TEST
[hero_box image=”375″]
[hero_box image=”378″]
[hero_box image=”370″]
function scrollSequence(element) {
// Konfiguracja sekwencji przewijania
const config = {
threshold: 0.5,
animationClass: 'scroll-sequence-active',
animationStyles: {
opacity: ['0', '1'],
transform: ['translateY(50px)', 'translateY(0)']
}
};
// Funkcja dodająca style animacji
function addAnimationStyles(el) {
el.style.opacity = config.animationStyles.opacity[0];
el.style.transform = config.animationStyles.transform[0];
el.style.transition = 'all 0.8s ease';
}
// Funkcja tworząca obserwatora intersakcji
function createIntersectionObserver() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = config.animationStyles.opacity[1];
entry.target.style.transform = config.animationStyles.transform[1];
entry.target.classList.add(config.animationClass);
} else {
entry.target.style.opacity = config.animationStyles.opacity[0];
entry.target.style.transform = config.animationStyles.transform[0];
entry.target.classList.remove(config.animationClass);
}
});
}, {
threshold: config.threshold,
rootMargin: '0px 0px -100px 0px'
});
return observer;
}
// Inicjalizacja sekwencji
function initSequence() {
// Pobierz wszystkie elementy wewnątrz kontenera
const sequenceItems = element.querySelectorAll('.sequence-item');
const observer = createIntersectionObserver();
// Dodaj początkowe style i rozpocznij obserwację
sequenceItems.forEach(item => {
addAnimationStyles(item);
observer.observe(item);
});
}
// Dodaj kontener na style
const styleElement = document.createElement('style');
styleElement.textContent = `
.sequence-item {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease;
}
.sequence-item.scroll-sequence-active {
opacity: 1;
transform: translateY(0);
}
`;
document.head.appendChild(styleElement);
// Wywołaj inicjalizację
initSequence();
}
// Przykładowe użycie w WPBakery Raw JS
scrollSequence(document.currentScript.closest('.wpb_row'));
[hero_box image=”374″]
[hero_box image=”373″]