-
Notifications
You must be signed in to change notification settings - Fork 2
/
main.js
86 lines (76 loc) · 2.34 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import "./style.scss";
import gsap from "gsap";
gsap.registerPlugin(MotionPathPlugin);
const nextBtn = document.querySelector(".navigation .next");
const prevBtn = document.querySelector(".navigation .prev");
const images = document.querySelector(".images");
const imagesContainer = document.querySelector(".images-container");
const allImages = document.querySelectorAll(".images img");
const nextOrder = [[1 , 2 , 3] , [3 , 1 , 2] , [2 , 3 , 1]];
const prevOrder = [[2 , 3 , 1] , [1 , 2 , 3] , [3 , 1 , 2]];
const transformObjects = [
{
width: "700px",
top: "-20px",
left: "100px",
transform: "rotate(0deg)"
},
{
width: "250px",
top: "500px",
left: "-80px",
transform: "rotate(120deg)"
},
{
width: "250px",
top: "-100px",
left: "-80px",
transform: "rotate(28deg)"
}
];
function animation(current){
const order = this.classList.contains('next') ? nextOrder : prevOrder;
for(let j = 0 ; j < 3 ; j++){
const img = document.querySelector(`.image-${order[current-1][j]}`);
gsap.to(img , transformObjects[j]);
}
}
let current = 0;
nextBtn.addEventListener("click", () => {
current++;
if(current > 3 ){
current = 1;
}
animation.call(nextBtn , current);
});
prevBtn.addEventListener("click", () => {
current--;
if(current < 0 ){
current = 2;
}else if(current === 0){
current = 3;
}
animation.call(nextBtn , current);
});
nextBtn.addEventListener("click", () => {
const activeColor = document.querySelector(".color.active");
const nextColor = document.querySelector(".color.next");
const prevColor = document.querySelector(".color.prev");
activeColor.classList.remove("active");
activeColor.classList.add("prev");
nextColor.classList.remove("next");
nextColor.classList.add("active");
prevColor.classList.remove("prev");
prevColor.classList.add("next");
});
prevBtn.addEventListener("click", () => {
const activeColor = document.querySelector(".color.active");
const nextColor = document.querySelector(".color.next");
const prevColor = document.querySelector(".color.prev");
activeColor.classList.remove("active");
activeColor.classList.add("next");
nextColor.classList.remove("next");
nextColor.classList.add("prev");
prevColor.classList.remove("prev");
prevColor.classList.add("active");
});