Working on a parallax effect, I've managed to assign unique scroll speeds to (almost) every element. Moreover, these elements are programmed not to activate their scroll speed until they enter the viewport.
Below is the JavaScript code for trigger commands upon reveal:
function isInView(element) {
if (typeof jQuery === "function" && element instanceof jQuery) {
element = element[0];
}
var rect = element.getBoundingClientRect();
return (
rect.bottom >= 0 &&
rect.left >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
The code snippet for controlling the scroll speed reads as follows:
$(window).scroll(function(){
var scrollPosition = $(this).scrollTop();
if (isInView($('#computer'))) {
$('#computer').css({
'transform' : 'translate(0px, '+ scrollPosition /12 +'%)'
});
}
For objects already at the top of the page:
$(window).scroll(function(){
var scrollPosition = $(this).scrollTop();
$('#shape-2').css({
'transform' : 'translate(0px, -'+ scrollPosition /8 +'%)'
});
The challenge arises when implementing the isElementInViewport function into the scroll speed logic. The element pops out of view upon revelation before scrolling as intended, leading to misalignment with the rest of the layout.
Attempts were made to address this issue by adjusting the initial position of the element so that it jumps back into place upon reveal before scrolling, but this solution proved ineffective due to inconsistencies across various screen sizes and resolutions.
Is there any way to prevent this unwanted jump upon reveal?