Fixed menu appear > 6
This commit is contained in:
@ -3,6 +3,13 @@
|
|||||||
|
|
||||||
// Fade in effect for elements with class 'appear'
|
// Fade in effect for elements with class 'appear'
|
||||||
const setupIntersectionObserver = () => {
|
const setupIntersectionObserver = () => {
|
||||||
|
document.querySelectorAll('.appear').forEach(parent => {
|
||||||
|
const children = parent.querySelectorAll('.appear');
|
||||||
|
children.forEach((child, i) => {
|
||||||
|
child.style.transitionDelay = `${i * 0.2}s`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
const items = document.querySelectorAll('.appear');
|
const items = document.querySelectorAll('.appear');
|
||||||
const io = new IntersectionObserver((entries) => {
|
const io = new IntersectionObserver((entries) => {
|
||||||
entries.forEach((entry) => {
|
entries.forEach((entry) => {
|
||||||
|
@ -192,36 +192,6 @@ h2 {
|
|||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.appear.inview:nth-child(1) {
|
|
||||||
-webkit-transition-delay: 0s;
|
|
||||||
transition-delay: 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.appear.inview:nth-child(2) {
|
|
||||||
-webkit-transition-delay: 0.2s;
|
|
||||||
transition-delay: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.appear.inview:nth-child(3) {
|
|
||||||
-webkit-transition-delay: 0.4s;
|
|
||||||
transition-delay: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.appear.inview:nth-child(4) {
|
|
||||||
-webkit-transition-delay: 0.6s;
|
|
||||||
transition-delay: 0.6s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.appear.inview:nth-child(5) {
|
|
||||||
-webkit-transition-delay: 0.8s;
|
|
||||||
transition-delay: 0.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.appear.inview:nth-child(6) {
|
|
||||||
-webkit-transition-delay: 1s;
|
|
||||||
transition-delay: 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* img fade in */
|
/* img fade in */
|
||||||
|
|
||||||
.fade-in-img {
|
.fade-in-img {
|
||||||
|
Reference in New Issue
Block a user