I am trying to do a presentation website and wanted to make an element as if it was floating in air. I have managed to get the thing working (for header section) but by the time you reach the element it is already too outset off of its original position. Currently my javascript is calculating the distance between the element and top of the page.
$(document).ready(function() {
$(window).scroll(function () {
$('.parallax-element-container').css({
'bottom' : -($(this).scrollTop()/8)+"px"
});
});
});
I have uploaded the issue to codepen to give you an idea, any suggestions are welcome.
You can wait until the window scrollTop is closer to your target, then start moving it.
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"
});
}
});
});