You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
xshop/resources/views/segments/slider/ParallaxSlider/ParallaxSlider.js

78 lines
2.5 KiB
JavaScript

import {tns} from "tiny-slider/src/tiny-slider";
var parallaxSlider;
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('#ParallaxSliderTns')?.forEach(function (el) {
if (el.classList.contains('.tns-slider')) {
console.log('ignore');
return 'ignore';
}
parallaxSlider = tns({
container: el,
items: 1,
// slideBy: 'page',
autoplay: false,
autoplayButton: false,
// nextButton: false,
controls: false,
autoplayHoverPause: true,
mouseDrag: true,
autoplayTimeout: 5000,
autoplayButtonOutput: false,
// speed:10000,
});
});
// document.addEventListener('scroll', function() {
// const scrolled = window.scrollY;
// const slides = document.querySelectorAll('.parallax-slider');
//
// slides.forEach((slide) => {
// const offset = slide.offsetTop;
// slide.style.backgroundPositionY = `${(offset - scrolled) * 0.2}px`; // Adjust the multiplier for effect
// });
// });
// Parallax effect
function applyParallax() {
const sliders = document.querySelectorAll('.parallax-slider');
const windowHeight = window.innerHeight;
const scrollY = window.scrollY;
sliders.forEach(slider => {
const sliderRect = slider.getBoundingClientRect();
const sliderCenter = sliderRect.top + sliderRect.height / 2;
const viewportCenter = windowHeight / 2;
const distanceFromCenter = sliderCenter - viewportCenter;
let parallaxOffset = distanceFromCenter * -.4; // Adjust this value to control parallax intensity
if (sliderRect.width < 1000){
parallaxOffset = distanceFromCenter * -.7; // Adjust this value to control parallax intensity
}
const bgImage = slider.getAttribute('data-bg');
slider.style.backgroundImage = `url('${bgImage}')`;
slider.style.backgroundPositionY = `calc(50% + ${parallaxOffset}px)`;
});
}
try {
// Apply parallax on scroll and resize
window.addEventListener('scroll', applyParallax);
window.addEventListener('resize', applyParallax);
// Initial application
applyParallax();
// Reapply parallax when tiny-slider changes slides
parallaxSlider.events.on('transitionEnd', applyParallax);
} catch {
}
});