I'm trying to write a custom parallax effect function with jQuery that only moves the transform property on that section.
The steps I think this should follow is as follows:
- Have a class on the div/section I want to "translate" or "parallax".
- Of course, that div is positioned absolute, and top by default is 0.
- When the div is approached on scroll, set it's top value to -72px.
- Then as the user is scrolling past the div begin to increase its translate ty value from 0.0% to 16%.
- If the user scrolls back up, reverse the transform altering from either 16%, the finished value, or whatever the current value is based on scroll, back to 0%, the starting value.
The CSS is:
.has-parallax {
overflow: hidden;
}
.image .abs-bg + img { display: none; }
.image .abs-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.image.will-parallax {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translate3d(0px, 0%, 0px);
}
Now, when the user scrolls the page and has approached whatever div with a background image that has class of .will-parallax
the transform value will begin to change only on the ty percentage of the 3d space.
An example of a website using this kind of parallax is https://www.wearecolony.com/
Can anyone assist in writing the jQuery code? Thanks.