Parallax

A Parallax section title

You can use the Ensemble grid to place text inside your parallax sections.

A secondary parallax area

You can stack parallax sections like this to create stunning effects.

Parallax

Parallax is handled in Ensemble in pure CSS, this approach creates a subtle and smooth parallax effect with minimal performance overheads. Parallax sections can be used as stand alone areas (illustrated above) or within the Ensemble grid system. 


<div class="parallax">
	<div class="parallax__background parallax--banner-1"></div>
	<div class="grid-container">
		<div class="grid-row">
			<div class="column-12 text-center text-color-10">
				<h2 class="text-color-10">A Parallax section title</h2>
				<p>
					Use the Ensemble grid to place text inside your parallax sections.
				</p>
			</div>
		</div>
	</div>
</div>

Backgrounds can be added by use of a banner class stored in your themes "background" section located in your theme CSS file. 


.parallax--banner-1 {
	background-image: url(../img/general/parallax-demo-1.jpg);
}
Contained parallax

Parallax sections can also be used in the Ensemble grid.

A contained Parallax section

This parallax section sits inside the Ensemble grid.

An example of a parallax section that has been added to a 9 column layout. 


<div class="grid-container">
	<div class="grid-row">
		<div class="column-9">
			<div class="parallax">
			<div class="parallax__background parallax--banner-1"></div>
				<div class="grid-container">
					<div class="grid-row">
						<div class="column-12 text-center">
							<h2 class="text-color-10">A contained Parallax section</h2>
							<p class="text-color-10">
								This parallax section sits inside the Ensemble grid.
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>