I am attempting to recreate the effect found on this page http://demos.themetrust.com/hero/, where there is a slight parallax effect as the content comes up and over the banner.
I am unsure how to go about doing this, and most of the parallax tutorials I've found are either wildly different styles of parallax or css driven ones that don't really add much to the site. Would someone be able to point me in the direction of a suitable tutorial or project that I can learn from. I've been searching under "parallax banner," but, perhaps I've got the name of the effect wrong?
Here is an example of pure CSS parallax scrolling. Key are lines like
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
Maybe take a look at this Q&A too Pure CSS parallax without fixed background height?
Here is my example:
@import url(http://fonts.googleapis.com/css?family=Nunito);
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Nunito;
}
h1 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240, 230, 220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.title {
padding: 5%;
border-radius: 2px;
background: rgba(240, 230, 220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide,
.slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("http://lorempixel.com/640/480/abstract/6/");
background-attachment: fixed;
}
#slide1:before {
background-image: url("http://lorempixel.com/640/480/abstract/4/");
transform: translateZ(-1px) scale(2);
z-index: -1;
}
#slide2 {
background-image: url("http://lorempixel.com/640/480/abstract/3/");
background-attachment: fixed;
}
#slide3:before {
background-image: url("http://lorempixel.com/640/480/abstract/5/");
transform: translateZ(-1px) scale(2);
z-index: -1;
}
#slide4 {
background: #222;
}<div id="title" class="slide header">
<h1>Your page title</h1>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Part one</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
viris docendi denique vim.</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Another part</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
viris docendi denique vim.</p>
</div>
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Addendum</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
viris docendi denique vim.</p>
</div>
</div>
<div id="slide4" class="slide header">
<h1>The End</h1>
</div>