jQuery(document).ready(function($) {
// Cache the elements
const $text1 = $('#text-1');
const $text2 = $('#text-2');
const $image1 = $('#image-1');
const $image2 = $('#image-2');
const fadeStart = 100;
const fadeEnd = 500;
const parallaxFactor = 0.3;
// On scroll event
$(window).on('scroll', function() {
const scrollY = $(this).scrollTop();
// Calculate ratio for fading and sliding text
let ratio = (scrollY - fadeStart) / (fadeEnd - fadeStart);
if (ratio 1) ratio = 1;
// Move text elements
const translateX = -200 * ratio;
const opacityVal = 1 - ratio;
$text1.css({
'transform': `translateX(${translateX}px)`,
'opacity': opacityVal
});
$text2.css({
'transform': `translateX(${translateX}px)`,
'opacity': opacityVal
});
// Parallax effect on images
const imageTranslateY = scrollY * parallaxFactor;
$image1.css('transform', `translateY(${imageTranslateY}px)`);
$image2.css('transform', `translateY(${imageTranslateY}px)`);
});
});
imunify-bot-check