-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
66 lines (57 loc) · 1.75 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import "./style.css";
import image1 from "./Assets/Img/Blog/image-1.jpg";
import image2 from "./Assets/Img/Blog/image-2.jpg";
import image3 from "./Assets/Img/Blog/image-3.jpg";
import image4 from "./Assets/Img/Blog/image-4.jpeg";
import image5 from "./Assets/Img/Blog/image-5.jpg";
import image6 from "./Assets/Img/Blog/image-6.jpg";
import image7 from "./Assets/Img/Blog/image-7.jpg";
const images = [image1, image2, image3, image4, image5, image6, image7];
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
gsap
.timeline({
scrollTrigger: {
trigger: ".img1",
// markers: true,
start: "top 80%",
end: "top 20%",
scrub: 4,
},
})
.fromTo(".img2", { opacity: 0, scale: 0 }, { opacity: 1, scale: 1 })
.fromTo(".img1", { x: 500 }, { x: 0 })
.fromTo(".img3", { x: -800, opacity: 0.2 }, { x: 0, opacity: 1 });
// [[[[[[[[[[[[[[ Image Change - Blog ]]]]]]]]]]]]]]
gsap
.timeline({
scrollTrigger: {
trigger: ".middle",
// markers: true,
start: "top 70%",
end: "top 10%",
scrub: 4,
},
})
.fromTo(".front", { scale: 0, opacity: 0 }, { scale: 1, opacity: 1 })
.fromTo(".blog_image", { scale: 0, opacity: 0 }, { scale: 1, opacity: 1 });
const image = document.querySelector(".blog_image");
let currentImage_num = 1;
setInterval(() => {
currentImage_num++;
// @Blink Logic
setTimeout(() => {
image.style.opacity = 1;
}, 200);
image.style.opacity = 0;
if (currentImage_num > 7) {
currentImage_num = 1;
}
// @ Change the Image one by one
setTimeout(() => {
console.log(currentImage_num);
image.src = images[currentImage_num - 1];
image.alt = `Image ${currentImage_num + 1}`;
}, 150);
}, 2000);