Delay parallax effect until section reaches viewport
Hey guys I ran into a little problem. I am trying to make a presentation site and wanted to create an element as if it were floating in the air. I managed to get it working (for the header section), but by the time you reach the element, it is already too far out of its original position. Currently my javascript is calculating the distance between the element and the top of the page.
$(document).ready(function() {
$(window).scroll(function () {
$('.parallax-element-container').css({
'bottom' : -($(this).scrollTop()/8)+"px"
});
});
});
I have uploaded the issue in code to give you an idea, any suggestions are appreciated.
+3
source to share
1 answer
You can wait until the scrollTop window is closer to your target and then start moving.
Example: http://codepen.io/anon/pen/aONWEP
$(document).ready(function() {
var parallaxTop = $('.parallax-element-container').offset().top;
var parallaxStart = parallaxTop * .9;
$(window).scroll(function() {
if ($(this).scrollTop() >= parallaxStart) {
$('.parallax-element-container').css({
'bottom': -(($(this).scrollTop() - parallaxStart) / 2) + "px"
});
}
});
});
+1
source to share