-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathtrashwork.html
125 lines (114 loc) · 4.79 KB
/
trashwork.html
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootcamp</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/MotionPathPlugin.min.js"></script>
</head>
<body class="bg-dark">
<section class="animation">
<!-- <div>
<img class="img-fluid col-1" src="/newplane.png">
</div> -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="105%" height="auto" style="margin-top:2rem ;" viewBox="-0.001 0.141603 2.6 1.133" xml:space="preserve">
<path xmlns="http://www.w3.org/2000/svg" id="imgpath"
d="M 0 1 C 0.256 0.979 0.831 1.354 1.005 1.258 C 1.471 1.059 1.084 0.46 0.997 0.4 C 0.671 0.17 0.649 1.229 0.992 1.142 C 1.453 1.031 1.73 0.641 2.154 0.972 C 2.328 1.089 2.4903 0.9827 2.598 0.999"
stroke="#FF0000" stroke-width="0" fill="none" />
</svg>
<img id="0" class="allplane0 plane" src="/newplane.png">
<!-- <i id="1" class="bi bi-square-fill plane allplane1"></i>
<i id="2" class="bi bi-square-fill plane allplane2"></i>
<i id="3" class="bi bi-square-fill plane allplane3"></i>
<i id="4" class="bi bi-square-fill plane allplane4"></i>
<i id="5" class="bi bi-square-fill plane allplane5"></i>
<i id="6" class="bi bi-square-fill plane allplane6"></i>
<i id="7" class="bi bi-square-fill plane allplane7"></i>
<i id="8" class="bi bi-square-fill plane allplane8"></i>
<i id="9" class="bi bi-square-fill plane allplane9"></i>
<i id="10" class="bi bi-square-fill plane allplane10"></i> -->
</section>
<h2 class="text-white p-3">nice alle vro</h2>
<style>
:root {
--width:20px;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
.animation{
/* height: 400px; */
position: relative;
overflow: hidden;
}
.bi-square-fill{
width: var(--width);
height: var(--width);
color: white;
opacity: 0.2;
display: flex;
justify-content: center;
align-items: center;
font-size: 3px;
}
.plane{
width:var(--width);
position: absolute;
top: 60%;
left: 0%;
transform: translateX(-100%);
}
</style>
<script>
let array = document.querySelectorAll(".plane");
let X = window.innerWidth;
array.forEach((item) => {
let string = ".allplane" + item.id;
//write a way to find interger inside a string
let number = parseInt(item.id);
gsapdyna(string, number);
})
function gsapdyna(string, number){
gsap.to(string, {
rotation: 0,
repeat:-1,
delay: number * 0.05,
duration: 15,
ease: "power2.out",
motionPath: {
path:"#imgpath",
align: "#imgpath",
// autoRotate: true,
offsetY: -12,
offsetX: -12,
// path: [
// { x: X * .2, y: 70 },
// { x: X * .7, y: -70 },
// { x: X * .36, y: -150 },
// { x: X * .1, y: -50 },
// { x: X * .4, y: -20 },
// { x: X * .7, y: -50 },
// { x: X + .9, y: 0 },
// { x: X + 200, y: 30 },
// ],
curviness: 1.8,
autoRotate: true
}
});
}
gsap.registerPlugin(MotionPathPlugin);
</script>
</body>