├── 4.rellax ├── gallaxy.png ├── background.png └── index.html ├── 1. typeit └── index.html ├── 3. anime ├── index.html ├── shopping.html ├── style.css └── anime.min.js ├── 2. scrollout ├── style.css └── index.html └── 5.gsap ├── style.css └── index.html /4.rellax/gallaxy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dream-ellie/javascript_animation/HEAD/4.rellax/gallaxy.png -------------------------------------------------------------------------------- /4.rellax/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dream-ellie/javascript_animation/HEAD/4.rellax/background.png -------------------------------------------------------------------------------- /1. typeit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 29 | 30 | 31 |

DreamCoding Youtube

32 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /3. anime/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 22 | 23 | 24 |
25 | 26 | 32 | 33 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /2. scrollout/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | } 5 | 6 | html { 7 | min-height: 100%; 8 | box-sizing: border-box; 9 | font-size: 10px; 10 | } 11 | 12 | body { 13 | height: 100%; 14 | width: 100%; 15 | background-image: linear-gradient( 16 | 180deg, 17 | #5961f9 0%, 18 | #2afadf 40%, 19 | #f9fea5 100% 20 | ); 21 | background-repeat: no-repeat; 22 | } 23 | 24 | *, 25 | *:before, 26 | *:after { 27 | box-sizing: inherit; 28 | } 29 | 30 | h1, 31 | p { 32 | color: #204754; 33 | font-family: 'Nunito', sans-serif; 34 | -webkit-font-smoothing: antialiased; 35 | -moz-osx-font-smoothing: grayscale; 36 | } 37 | 38 | h1 { 39 | margin-bottom: 1rem; 40 | font-size: 4rem; 41 | } 42 | 43 | p { 44 | font-size: 2rem; 45 | line-height: 2.8rem; 46 | } 47 | 48 | p:last-child { 49 | margin-bottom: -6px; 50 | } 51 | .site-wrap { 52 | max-width: 700px; 53 | margin: 0 auto; 54 | padding: 10rem 2rem; 55 | } 56 | 57 | section { 58 | margin-bottom: 10rem; 59 | padding: 4rem; 60 | background: white; 61 | border-radius: 8px; 62 | box-shadow: 0px 0px 0 1px transparentize(#204754, 0.97), 63 | 0px 0px 0 3px transparentize(#204754, 0.98); 64 | } 65 | 66 | section:last-child { 67 | margin-bottom: 0; 68 | } 69 | 70 | [data-scroll] { 71 | opacity: 0; 72 | will-change: transform, scale, opacity; 73 | transform: translateY(6rem) scale(0.93); 74 | transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); 75 | } 76 | 77 | [data-scroll='in'] { 78 | opacity: 1; 79 | transform: translateY(0) scale(1); 80 | } 81 | 82 | [data-scroll='out'] { 83 | opacity: 0; 84 | } 85 | -------------------------------------------------------------------------------- /5.gsap/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background: black; 7 | padding: 0; 8 | margin: 0; 9 | font-family: 'Signika Negative', sans-serif, Arial; 10 | font-weight: 300; 11 | height: 100vh; 12 | overflow: hidden; 13 | } 14 | .container { 15 | display: flex; 16 | height: 100%; 17 | width: 100%; 18 | justify-content: center; 19 | align-items: center; 20 | overflow: hidden; 21 | } 22 | .container.grid, 23 | .container.columns { 24 | align-content: stretch; 25 | align-items: stretch; 26 | flex-wrap: wrap; 27 | } 28 | 29 | .letter { 30 | text-align: center; 31 | color: black; 32 | font-size: 10vmax; 33 | font-weight: 400; 34 | display: flex; 35 | align-items: center; 36 | justify-content: center; 37 | padding: 2px 6px; 38 | } 39 | .container.grid .letter { 40 | flex-basis: 50%; 41 | } 42 | .container.columns .letter { 43 | flex-basis: 25%; 44 | } 45 | .for, 46 | .gsap { 47 | font-size: 5vmax; 48 | color: white; 49 | } 50 | .for { 51 | padding: 2px 1.6vmax; 52 | font-weight: 300; 53 | display: none; 54 | } 55 | .gsap { 56 | padding: 2px 0; 57 | font-weight: 600; 58 | display: none; 59 | } 60 | .container.final .for, 61 | .container.final .gsap { 62 | display: block; 63 | } 64 | .F { 65 | background: rgba(0, 188, 212, 0.7); 66 | } 67 | .l { 68 | background: rgba(40, 150, 255, 0.7); 69 | } 70 | .i { 71 | background: rgba(153, 80, 220, 0.7); 72 | } 73 | .p { 74 | background: rgba(90, 108, 225, 0.7); 75 | } 76 | .container.plain .letter { 77 | background: transparent; 78 | color: white; 79 | padding: 0; 80 | } 81 | 82 | .logo { 83 | position: fixed; 84 | width: 60px; 85 | bottom: 20px; 86 | right: 30px; 87 | } 88 | -------------------------------------------------------------------------------- /4.rellax/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 60 | 61 | 62 |
63 |
Faster
64 |
No parallax
65 |
Slower
66 | 67 |
68 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /5.gsap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
14 |
F
15 |
l
16 |
i
17 |
p
18 |
for
19 |
GSAP
20 |
21 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /3. anime/shopping.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
Arriving date
18 |
19 April, 2022
19 |
Friday
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | 33 |
34 |
35 |
36 |
37 |
today
38 |
39 |
40 |
41 |
Shipped
42 |
43 |
44 |
45 |
46 | Outfor delivery 47 |
48 |
49 |
50 |
51 |
52 | Ariving 53 | 03 - 21 54 |
55 |
56 |
57 |
58 |
59 |
See your product details
60 |
61 | 62 |
63 |
64 |
65 |
Your order details
66 |
67 | Your product details (order 040-904-790) 68 |
69 |
70 |
71 |
72 | 76 |
77 |
78 | Nike Air Jordan 1 79 | 9740 INR 80 |
81 |
82 |
83 |
84 | 88 |
89 |
90 | Alex rider: Never say die Novel 12 91 | 655 INR 92 |
93 |
94 |
95 |
Request Cancellation
 98 |
Your Shipping Address
99 |
100 | Mahagun Moderne
101 | DELHI
102 | 201305
103 | GAUTAM BUDH NAGAR, GHAZIABAD 104 |
105 |
106 |
107 |
108 |
109 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /2. scrollout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Document 11 | 12 | 13 |
14 |
15 |

Scroll on down

16 |

17 | Consectetur adipisicing elit. Tempore tempora rerum, est autem 18 | cupiditate, corporis a qui libero ipsum delectus quidem dolor at 19 | nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis 20 | quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores 21 | sunt esse magni, ut, dignissimos. 22 |

23 |

24 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, 25 | deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta 26 | dolor itaque adipisci, dolorum minima, veritatis earum provident error 27 | molestias. Ratione magni illo sint vel velit ut excepturi consectetur 28 | suscipit, earum modi accusamus voluptatem nostrum, praesentium 29 | numquam, reiciendis voluptas sit id quisquam. Consequatur in quis 30 | reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit 31 | iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum 32 | quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, 33 | dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus 34 | maiores illum quas quos et aperiam aut doloremque optio maxime fugiat 35 | doloribus. Eum dolorum expedita quam, nesciunt 36 |

37 |

38 | Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem 39 | dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis 40 | blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur 41 | pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos. 42 |

43 |

Adipisicing elit. Tempore tempora rerum.

44 |
45 | 46 |
47 |

Articles fading in

48 |

49 | Consectetur adipisicing elit. Tempore tempora rerum, est autem 50 | cupiditate, corporis a qui libero ipsum delectus quidem dolor at 51 | nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis 52 | quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores 53 | sunt esse magni, ut, dignissimos. 54 |

55 |

56 | Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem 57 | dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis 58 | blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur 59 | pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos. 60 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore 61 | tempora rerum, est autem cupiditate, corporis a qui libero ipsum 62 | delectus quidem dolor at nulla, adipisci veniam in reiciendis aut 63 | asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in 64 | aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, 65 | dignissimos. 66 |

67 |

68 | Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem 69 | dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis 70 | blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur 71 | pariatur fugit quibusdam dolores. 72 |

73 |
74 | 75 |
76 |

Character splitting

77 |

78 | Consectetur adipisicing elit. Tempore tempora rerum, est autem 79 | cupiditate, corporis a qui libero ipsum delectus quidem dolor at 80 | nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis 81 | quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores 82 | sunt esse magni, ut, dignissimos. 83 |

84 |

85 | Lorem ipsum tempora in cupiditate, corporis a qui libero ipsum 86 | delectus quidem dolor at nulla, adipisci veniam in reiciendis aut 87 | asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in 88 | aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, 89 | dignissimos. Adipisci veniam in reiciendis aut asperiores omnis 90 | blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur 91 | pariaturlores sunt esse magni. Tempore tempora rerum, est autem 92 | cupiditate, corporis a qui libero. 93 |

94 |
95 | 96 |
97 |

Colors changing

98 |

99 | Consectetur adipisicing elit. Tempore tempora rerum, est autem 100 | cupiditate, corporis a qui libero ipsum delectus quidem dolor at 101 | nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis 102 | quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores 103 | sunt esse magni, ut, dignissimos. 104 |

105 |

106 | Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem 107 | dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis 108 | blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur 109 | pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos. 110 |

111 |

112 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, 113 | deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta 114 | dolor itaque adipisci, dolorum minima, veritatis earum provident error 115 | molestias. Ratione magni illo sint vel velit ut excepturi consectetur 116 | suscipit, earum modi accusamus voluptatem nostrum, praesentium 117 | numquam, reiciendis voluptas sit id quisquam. Consequatur in quis 118 | reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit 119 | iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum 120 | quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, 121 | dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus 122 | maiores illum quas quos et aperiam aut doloremque optio maxime fugiat 123 | doloribus. Eum dolorum expedita quam, nesciunt 124 |

125 |

Adipisicing elit. Tempore tempora rerum.

126 |
127 | 128 |
129 |

The end

130 |

131 | Consectetur adipisicing elit. Tempore tempora rerum, est autem 132 | cupiditate, corporis a qui libero ipsum delectus quidem dolor at 133 | nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis 134 | quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores 135 | sunt esse magni, ut, dignissimos. 136 |

137 |

Adipisicing elit. Tempore tempora rerum.

138 |

139 | Lorem ipsum cupiditate, corporis a qui libero ipsum tempora in 140 | delectus quidem dolor at nulla, adipisci veniam in reiciendis aut 141 | asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in 142 | aspernatur pariatur fugit quibusdam tempora in dolores sunt esse 143 | magni, ut, dignissimos. 144 |

145 |
146 |
147 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /3. anime/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700'); 2 | 3 | * { 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | body { 9 | font-family: 'Roboto', sans-serif; 10 | font-weight: 400; 11 | background-color: #cfdbea; 12 | } 13 | 14 | a { 15 | text-decoration: none; 16 | color: white; 17 | } 18 | 19 | .container { 20 | display: flex; 21 | justify-content: center; 22 | align-content: flex-start; 23 | position: relative; 24 | height: 100vh; 25 | width: 100vw; 26 | } 27 | 28 | .iphone { 29 | margin-top: 10px; 30 | background-color: #f4f4fb; 31 | height: 812px; 32 | width: 375px; 33 | box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3), 34 | inset 0 0 0 1px rgba(0, 0, 0, 0.15); 35 | overflow: hidden; 36 | position: relative; 37 | z-index: 2; 38 | transform: scale(0.8); 39 | transform-origin: top center; 40 | } 41 | 42 | .header { 43 | display: flex; 44 | justify-content: space-between; 45 | align-items: center; 46 | height: 20%; 47 | } 48 | 49 | .order-summary { 50 | margin-left: 1.5rem; 51 | padding: 1rem; 52 | display: flex; 53 | flex-direction: column; 54 | } 55 | 56 | .order-summary > div { 57 | margin: 6px; 58 | } 59 | 60 | .order-status { 61 | color: #338a9a; 62 | font-size: 0.9rem; 63 | font-weight: 700; 64 | letter-spacing: 0.5px; 65 | } 66 | 67 | .order-date { 68 | font-size: 1.5rem; 69 | font-weight: 700; 70 | } 71 | 72 | .order-day { 73 | color: #338a9a; 74 | font-size: 0.9rem; 75 | font-weight: 300; 76 | letter-spacing: 0.5px; 77 | } 78 | 79 | .back-btn { 80 | margin-right: 50px; 81 | font-size: 1rem; 82 | width: 40px; 83 | height: 40px; 84 | border-radius: 50%; 85 | text-align: center; 86 | box-shadow: 5px 5px 25px 0px rgba(0, 0, 0, 0.2); 87 | display: flex; 88 | justify-content: center; 89 | align-items: center; 90 | transition: all 0.2s; 91 | cursor: pointer; 92 | } 93 | 94 | .back-btn:hover { 95 | transform: scale(1.2); 96 | box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); 97 | } 98 | 99 | .hero-img-container { 100 | width: 100%; 101 | height: 300px; 102 | display: flex; 103 | justify-content: center; 104 | align-items: center; 105 | position: relative; 106 | padding-bottom: 20px; 107 | } 108 | 109 | .hero-img-container::before { 110 | height: 20px; 111 | width: 20px; 112 | background-color: #0268ee; 113 | position: absolute; 114 | top: 25px; 115 | right: 150px; 116 | content: ''; 117 | border-radius: 50%; 118 | } 119 | .arc { 120 | border: 1px solid #000; 121 | display: inline-block; 122 | min-width: 200px; 123 | min-height: 200px; 124 | padding: 0.5em; 125 | border-radius: 50%; 126 | border-top-color: transparent; 127 | border-left-color: transparent; 128 | border-bottom-color: transparent; 129 | opacity: 0.4; 130 | position: absolute; 131 | transform: rotate(-40deg); 132 | left: -10px; 133 | } 134 | 135 | .pattern { 136 | width: 50px; 137 | height: 50px; 138 | background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8Y2lyY2xlIGN4PSc0JyBjeT0nNCcgcj0nNCcgZmlsbD0nYmxhY2snLz4KPC9zdmc+'); 139 | opacity: 0.1; 140 | position: absolute; 141 | right: 30px; 142 | top: 30px; 143 | transform: scale(1.2); 144 | } 145 | 146 | .triangle1 { 147 | width: 0; 148 | height: 0; 149 | border-style: solid; 150 | border-width: 0 10px 20px 10px; 151 | border-color: transparent transparent #767eef transparent; 152 | position: absolute; 153 | top: 50px; 154 | left: 130px; 155 | transform: rotate(-45deg); 156 | } 157 | 158 | .hero-img { 159 | width: 80%; 160 | } 161 | 162 | .order-status-container { 163 | z-index: 3; 164 | display: flex; 165 | width: 100%; 166 | height: 30%; 167 | justify-content: space-evenly; 168 | align-items: center; 169 | background-color: white; 170 | border-top-right-radius: 50px; 171 | border-top-left-radius: 50px; 172 | position: relative; 173 | box-shadow: 0 14px 28px rgba(0, 0, 0, 0.02), 0 10px 10px rgba(0, 0, 0, 0.2); 174 | } 175 | 176 | .order-status-container::before { 177 | content: ''; 178 | position: absolute; 179 | width: 70px; 180 | height: 3px; 181 | background-color: #eaebff; 182 | opacity: 0.8; 183 | border-radius: 2px; 184 | top: 20px; 185 | } 186 | 187 | .status-item { 188 | display: flex; 189 | flex-direction: column; 190 | justify-content: flex-start; 191 | align-items: center; 192 | height: 150px; 193 | padding-top: 20px; 194 | } 195 | 196 | .status-item > div { 197 | margin: 10px; 198 | } 199 | 200 | .status-circle { 201 | height: 20px; 202 | width: 20px; 203 | background-color: #665cf5; 204 | border-radius: 50%; 205 | border: 5px solid white; 206 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 207 | z-index: 5; 208 | transition: all 0.2s; 209 | cursor: pointer; 210 | } 211 | 212 | .status-circle:hover { 213 | transform: scale(1.2); 214 | box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); 215 | } 216 | 217 | .status-text { 218 | font-size: 0.8rem; 219 | font-weight: 500; 220 | } 221 | 222 | .status-text span { 223 | display: block; 224 | text-align: center; 225 | padding: 2px; 226 | } 227 | 228 | .green { 229 | color: #338a9a; 230 | } 231 | 232 | .first::before { 233 | content: ''; 234 | height: 4px; 235 | width: 70px; 236 | background-color: #5858ef; 237 | position: absolute; 238 | z-index: 4; 239 | top: 83px; 240 | left: 60px; 241 | } 242 | 243 | .second::before { 244 | content: ''; 245 | height: 4px; 246 | width: 210px; 247 | background-color: #5858ef; 248 | position: absolute; 249 | z-index: 4; 250 | top: 83px; 251 | left: 100px; 252 | opacity: 0.2; 253 | } 254 | 255 | .order-details-container { 256 | position: relative; 257 | z-index: 6; 258 | height: 900px; 259 | background-color: #767eef; 260 | border-top-right-radius: 50px; 261 | border-top-left-radius: 50px; 262 | padding-top: 20px; 263 | transform: translateY(-45px); 264 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 265 | cursor: default; 266 | } 267 | 268 | .odc-header { 269 | display: flex; 270 | justify-content: center; 271 | align-items: flex-start; 272 | } 273 | 274 | .cta-text { 275 | margin-top: 40px; 276 | margin-right: 25px; 277 | color: white; 278 | font-size: 0.9rem; 279 | text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.18); 280 | } 281 | 282 | .cta-button { 283 | margin-top: 20px; 284 | padding: 20px 40px; 285 | background-color: #4e4ded; 286 | border: 0; 287 | border-radius: 10px; 288 | color: white; 289 | font-size: 1rem; 290 | font-weight: 500; 291 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.05); 292 | animation: shadow-pulse 1s infinite; 293 | cursor: pointer; 294 | } 295 | 296 | @keyframes shadow-pulse { 297 | 0% { 298 | box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.2); 299 | } 300 | 100% { 301 | box-shadow: 0 0 0 35px rgba(255, 255, 255, 0); 302 | } 303 | } 304 | 305 | .cta-button:focus { 306 | outline: none; 307 | } 308 | 309 | .order-details-container::before { 310 | content: ''; 311 | position: absolute; 312 | width: 70px; 313 | height: 3px; 314 | background-color: #eaebff; 315 | opacity: 0.8; 316 | border-radius: 2px; 317 | top: 20px; 318 | left: 150px; 319 | } 320 | 321 | .odc-wrapper { 322 | margin: 30px; 323 | } 324 | 325 | .odc-header-line { 326 | margin-top: 30px; 327 | color: white; 328 | font-size: 1.5rem; 329 | font-weight: 500; 330 | margin-bottom: 40px; 331 | } 332 | 333 | .odc-header-details { 334 | color: white; 335 | font-weight: bold; 336 | margin-bottom: 20px; 337 | } 338 | 339 | .product-container { 340 | background-color: #828af1; 341 | border-radius: 20px; 342 | padding: 10px; 343 | } 344 | 345 | .product { 346 | display: flex; 347 | justify-content: flex-start; 348 | align-items: center; 349 | } 350 | 351 | .product span { 352 | display: block; 353 | color: white; 354 | margin-left: 25px; 355 | margin-bottom: 8px; 356 | flex-grow: 1; 357 | } 358 | 359 | .product span:first-child { 360 | font-weight: 300; 361 | font-size: 0.8rem; 362 | } 363 | 364 | .product span:last-child { 365 | font-weight: 500; 366 | font-size: 1.3rem; 367 | } 368 | 369 | .img-photo { 370 | width: 90px; 371 | transform: rotate(-35deg); 372 | } 373 | 374 | .cancellation { 375 | margin-top: 20px; 376 | background-color: #828af1; 377 | border-radius: 20px; 378 | padding: 30px 20px; 379 | color: white; 380 | font-weight: bold; 381 | margin-bottom: 20px; 382 | text-align: center; 383 | } 384 | 385 | .shipping-desc { 386 | color: white; 387 | font-weight: bold; 388 | margin-bottom: 20px; 389 | } 390 | 391 | .shipping-address { 392 | margin-top: 20px; 393 | background-color: #828af1; 394 | border-radius: 20px; 395 | padding: 20px 20px; 396 | color: white; 397 | font-weight: bold; 398 | margin-bottom: 20px; 399 | } 400 | 401 | .footer { 402 | position: absolute; 403 | bottom: 15px; 404 | right: 15px; 405 | font-size: 0.9rem; 406 | } 407 | 408 | .footer small { 409 | font-size: 0.7rem; 410 | } 411 | 412 | .footer a { 413 | color: #3273dc; 414 | cursor: pointer; 415 | text-decoration: none; 416 | border-bottom: 2px solid rgba(50, 115, 220, 0.1); 417 | padding-bottom: 2px; 418 | } 419 | 420 | .footer a:hover { 421 | color: #1e57b4; 422 | border-bottom-color: #1e57b4; 423 | } 424 | -------------------------------------------------------------------------------- /3. anime/anime.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * anime.js v3.2.1 3 | * (c) 2020 Julian Garnier 4 | * Released under the MIT license 5 | * animejs.com 6 | */ 7 | 8 | !(function (n, e) { 9 | 'object' == typeof exports && 'undefined' != typeof module 10 | ? (module.exports = e()) 11 | : 'function' == typeof define && define.amd 12 | ? define(e) 13 | : (n.anime = e()); 14 | })(this, function () { 15 | 'use strict'; 16 | var n = { 17 | update: null, 18 | begin: null, 19 | loopBegin: null, 20 | changeBegin: null, 21 | change: null, 22 | changeComplete: null, 23 | loopComplete: null, 24 | complete: null, 25 | loop: 1, 26 | direction: 'normal', 27 | autoplay: !0, 28 | timelineOffset: 0, 29 | }, 30 | e = { 31 | duration: 1e3, 32 | delay: 0, 33 | endDelay: 0, 34 | easing: 'easeOutElastic(1, .5)', 35 | round: 0, 36 | }, 37 | t = [ 38 | 'translateX', 39 | 'translateY', 40 | 'translateZ', 41 | 'rotate', 42 | 'rotateX', 43 | 'rotateY', 44 | 'rotateZ', 45 | 'scale', 46 | 'scaleX', 47 | 'scaleY', 48 | 'scaleZ', 49 | 'skew', 50 | 'skewX', 51 | 'skewY', 52 | 'perspective', 53 | 'matrix', 54 | 'matrix3d', 55 | ], 56 | r = { CSS: {}, springs: {} }; 57 | function a(n, e, t) { 58 | return Math.min(Math.max(n, e), t); 59 | } 60 | function o(n, e) { 61 | return n.indexOf(e) > -1; 62 | } 63 | function u(n, e) { 64 | return n.apply(null, e); 65 | } 66 | var i = { 67 | arr: function (n) { 68 | return Array.isArray(n); 69 | }, 70 | obj: function (n) { 71 | return o(Object.prototype.toString.call(n), 'Object'); 72 | }, 73 | pth: function (n) { 74 | return i.obj(n) && n.hasOwnProperty('totalLength'); 75 | }, 76 | svg: function (n) { 77 | return n instanceof SVGElement; 78 | }, 79 | inp: function (n) { 80 | return n instanceof HTMLInputElement; 81 | }, 82 | dom: function (n) { 83 | return n.nodeType || i.svg(n); 84 | }, 85 | str: function (n) { 86 | return 'string' == typeof n; 87 | }, 88 | fnc: function (n) { 89 | return 'function' == typeof n; 90 | }, 91 | und: function (n) { 92 | return void 0 === n; 93 | }, 94 | nil: function (n) { 95 | return i.und(n) || null === n; 96 | }, 97 | hex: function (n) { 98 | return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n); 99 | }, 100 | rgb: function (n) { 101 | return /^rgb/.test(n); 102 | }, 103 | hsl: function (n) { 104 | return /^hsl/.test(n); 105 | }, 106 | col: function (n) { 107 | return i.hex(n) || i.rgb(n) || i.hsl(n); 108 | }, 109 | key: function (t) { 110 | return ( 111 | !n.hasOwnProperty(t) && 112 | !e.hasOwnProperty(t) && 113 | 'targets' !== t && 114 | 'keyframes' !== t 115 | ); 116 | }, 117 | }; 118 | function c(n) { 119 | var e = /\(([^)]+)\)/.exec(n); 120 | return e 121 | ? e[1].split(',').map(function (n) { 122 | return parseFloat(n); 123 | }) 124 | : []; 125 | } 126 | function s(n, e) { 127 | var t = c(n), 128 | o = a(i.und(t[0]) ? 1 : t[0], 0.1, 100), 129 | u = a(i.und(t[1]) ? 100 : t[1], 0.1, 100), 130 | s = a(i.und(t[2]) ? 10 : t[2], 0.1, 100), 131 | f = a(i.und(t[3]) ? 0 : t[3], 0.1, 100), 132 | l = Math.sqrt(u / o), 133 | d = s / (2 * Math.sqrt(u * o)), 134 | p = d < 1 ? l * Math.sqrt(1 - d * d) : 0, 135 | v = 1, 136 | h = d < 1 ? (d * l - f) / p : -f + l; 137 | function g(n) { 138 | var t = e ? (e * n) / 1e3 : n; 139 | return ( 140 | (t = 141 | d < 1 142 | ? Math.exp(-t * d * l) * (v * Math.cos(p * t) + h * Math.sin(p * t)) 143 | : (v + h * t) * Math.exp(-t * l)), 144 | 0 === n || 1 === n ? n : 1 - t 145 | ); 146 | } 147 | return e 148 | ? g 149 | : function () { 150 | var e = r.springs[n]; 151 | if (e) return e; 152 | for (var t = 0, a = 0; ; ) 153 | if (1 === g((t += 1 / 6))) { 154 | if (++a >= 16) break; 155 | } else a = 0; 156 | var o = t * (1 / 6) * 1e3; 157 | return (r.springs[n] = o), o; 158 | }; 159 | } 160 | function f(n) { 161 | return ( 162 | void 0 === n && (n = 10), 163 | function (e) { 164 | return Math.ceil(a(e, 1e-6, 1) * n) * (1 / n); 165 | } 166 | ); 167 | } 168 | var l, 169 | d, 170 | p = (function () { 171 | var n = 11, 172 | e = 1 / (n - 1); 173 | function t(n, e) { 174 | return 1 - 3 * e + 3 * n; 175 | } 176 | function r(n, e) { 177 | return 3 * e - 6 * n; 178 | } 179 | function a(n) { 180 | return 3 * n; 181 | } 182 | function o(n, e, o) { 183 | return ((t(e, o) * n + r(e, o)) * n + a(e)) * n; 184 | } 185 | function u(n, e, o) { 186 | return 3 * t(e, o) * n * n + 2 * r(e, o) * n + a(e); 187 | } 188 | return function (t, r, a, i) { 189 | if (0 <= t && t <= 1 && 0 <= a && a <= 1) { 190 | var c = new Float32Array(n); 191 | if (t !== r || a !== i) 192 | for (var s = 0; s < n; ++s) c[s] = o(s * e, t, a); 193 | return function (n) { 194 | return t === r && a === i 195 | ? n 196 | : 0 === n || 1 === n 197 | ? n 198 | : o(f(n), r, i); 199 | }; 200 | } 201 | function f(r) { 202 | for (var i = 0, s = 1, f = n - 1; s !== f && c[s] <= r; ++s) i += e; 203 | var l = i + ((r - c[--s]) / (c[s + 1] - c[s])) * e, 204 | d = u(l, t, a); 205 | return d >= 0.001 206 | ? (function (n, e, t, r) { 207 | for (var a = 0; a < 4; ++a) { 208 | var i = u(e, t, r); 209 | if (0 === i) return e; 210 | e -= (o(e, t, r) - n) / i; 211 | } 212 | return e; 213 | })(r, l, t, a) 214 | : 0 === d 215 | ? l 216 | : (function (n, e, t, r, a) { 217 | for ( 218 | var u, i, c = 0; 219 | (u = o((i = e + (t - e) / 2), r, a) - n) > 0 220 | ? (t = i) 221 | : (e = i), 222 | Math.abs(u) > 1e-7 && ++c < 10; 223 | 224 | ); 225 | return i; 226 | })(r, i, i + e, t, a); 227 | } 228 | }; 229 | })(), 230 | v = 231 | ((l = { 232 | linear: function () { 233 | return function (n) { 234 | return n; 235 | }; 236 | }, 237 | }), 238 | (d = { 239 | Sine: function () { 240 | return function (n) { 241 | return 1 - Math.cos((n * Math.PI) / 2); 242 | }; 243 | }, 244 | Circ: function () { 245 | return function (n) { 246 | return 1 - Math.sqrt(1 - n * n); 247 | }; 248 | }, 249 | Back: function () { 250 | return function (n) { 251 | return n * n * (3 * n - 2); 252 | }; 253 | }, 254 | Bounce: function () { 255 | return function (n) { 256 | for (var e, t = 4; n < ((e = Math.pow(2, --t)) - 1) / 11; ); 257 | return ( 258 | 1 / Math.pow(4, 3 - t) - 259 | 7.5625 * Math.pow((3 * e - 2) / 22 - n, 2) 260 | ); 261 | }; 262 | }, 263 | Elastic: function (n, e) { 264 | void 0 === n && (n = 1), void 0 === e && (e = 0.5); 265 | var t = a(n, 1, 10), 266 | r = a(e, 0.1, 2); 267 | return function (n) { 268 | return 0 === n || 1 === n 269 | ? n 270 | : -t * 271 | Math.pow(2, 10 * (n - 1)) * 272 | Math.sin( 273 | ((n - 1 - (r / (2 * Math.PI)) * Math.asin(1 / t)) * 274 | (2 * Math.PI)) / 275 | r 276 | ); 277 | }; 278 | }, 279 | }), 280 | ['Quad', 'Cubic', 'Quart', 'Quint', 'Expo'].forEach(function (n, e) { 281 | d[n] = function () { 282 | return function (n) { 283 | return Math.pow(n, e + 2); 284 | }; 285 | }; 286 | }), 287 | Object.keys(d).forEach(function (n) { 288 | var e = d[n]; 289 | (l['easeIn' + n] = e), 290 | (l['easeOut' + n] = function (n, t) { 291 | return function (r) { 292 | return 1 - e(n, t)(1 - r); 293 | }; 294 | }), 295 | (l['easeInOut' + n] = function (n, t) { 296 | return function (r) { 297 | return r < 0.5 ? e(n, t)(2 * r) / 2 : 1 - e(n, t)(-2 * r + 2) / 2; 298 | }; 299 | }), 300 | (l['easeOutIn' + n] = function (n, t) { 301 | return function (r) { 302 | return r < 0.5 303 | ? (1 - e(n, t)(1 - 2 * r)) / 2 304 | : (e(n, t)(2 * r - 1) + 1) / 2; 305 | }; 306 | }); 307 | }), 308 | l); 309 | function h(n, e) { 310 | if (i.fnc(n)) return n; 311 | var t = n.split('(')[0], 312 | r = v[t], 313 | a = c(n); 314 | switch (t) { 315 | case 'spring': 316 | return s(n, e); 317 | case 'cubicBezier': 318 | return u(p, a); 319 | case 'steps': 320 | return u(f, a); 321 | default: 322 | return u(r, a); 323 | } 324 | } 325 | function g(n) { 326 | try { 327 | return document.querySelectorAll(n); 328 | } catch (n) { 329 | return; 330 | } 331 | } 332 | function m(n, e) { 333 | for ( 334 | var t = n.length, 335 | r = arguments.length >= 2 ? arguments[1] : void 0, 336 | a = [], 337 | o = 0; 338 | o < t; 339 | o++ 340 | ) 341 | if (o in n) { 342 | var u = n[o]; 343 | e.call(r, u, o, n) && a.push(u); 344 | } 345 | return a; 346 | } 347 | function y(n) { 348 | return n.reduce(function (n, e) { 349 | return n.concat(i.arr(e) ? y(e) : e); 350 | }, []); 351 | } 352 | function b(n) { 353 | return i.arr(n) 354 | ? n 355 | : (i.str(n) && (n = g(n) || n), 356 | n instanceof NodeList || n instanceof HTMLCollection 357 | ? [].slice.call(n) 358 | : [n]); 359 | } 360 | function M(n, e) { 361 | return n.some(function (n) { 362 | return n === e; 363 | }); 364 | } 365 | function x(n) { 366 | var e = {}; 367 | for (var t in n) e[t] = n[t]; 368 | return e; 369 | } 370 | function w(n, e) { 371 | var t = x(n); 372 | for (var r in n) t[r] = e.hasOwnProperty(r) ? e[r] : n[r]; 373 | return t; 374 | } 375 | function k(n, e) { 376 | var t = x(n); 377 | for (var r in e) t[r] = i.und(n[r]) ? e[r] : n[r]; 378 | return t; 379 | } 380 | function O(n) { 381 | return i.rgb(n) 382 | ? (t = /rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec((e = n))) 383 | ? 'rgba(' + t[1] + ',1)' 384 | : e 385 | : i.hex(n) 386 | ? ((r = n.replace( 387 | /^#?([a-f\d])([a-f\d])([a-f\d])$/i, 388 | function (n, e, t, r) { 389 | return e + e + t + t + r + r; 390 | } 391 | )), 392 | (a = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r)), 393 | 'rgba(' + 394 | parseInt(a[1], 16) + 395 | ',' + 396 | parseInt(a[2], 16) + 397 | ',' + 398 | parseInt(a[3], 16) + 399 | ',1)') 400 | : i.hsl(n) 401 | ? (function (n) { 402 | var e, 403 | t, 404 | r, 405 | a = 406 | /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n) || 407 | /hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n), 408 | o = parseInt(a[1], 10) / 360, 409 | u = parseInt(a[2], 10) / 100, 410 | i = parseInt(a[3], 10) / 100, 411 | c = a[4] || 1; 412 | function s(n, e, t) { 413 | return ( 414 | t < 0 && (t += 1), 415 | t > 1 && (t -= 1), 416 | t < 1 / 6 417 | ? n + 6 * (e - n) * t 418 | : t < 0.5 419 | ? e 420 | : t < 2 / 3 421 | ? n + (e - n) * (2 / 3 - t) * 6 422 | : n 423 | ); 424 | } 425 | if (0 == u) e = t = r = i; 426 | else { 427 | var f = i < 0.5 ? i * (1 + u) : i + u - i * u, 428 | l = 2 * i - f; 429 | (e = s(l, f, o + 1 / 3)), 430 | (t = s(l, f, o)), 431 | (r = s(l, f, o - 1 / 3)); 432 | } 433 | return ( 434 | 'rgba(' + 255 * e + ',' + 255 * t + ',' + 255 * r + ',' + c + ')' 435 | ); 436 | })(n) 437 | : void 0; 438 | var e, t, r, a; 439 | } 440 | function C(n) { 441 | var e = 442 | /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec( 443 | n 444 | ); 445 | if (e) return e[1]; 446 | } 447 | function P(n, e) { 448 | return i.fnc(n) ? n(e.target, e.id, e.total) : n; 449 | } 450 | function I(n, e) { 451 | return n.getAttribute(e); 452 | } 453 | function D(n, e, t) { 454 | if (M([t, 'deg', 'rad', 'turn'], C(e))) return e; 455 | var a = r.CSS[e + t]; 456 | if (!i.und(a)) return a; 457 | var o = document.createElement(n.tagName), 458 | u = 459 | n.parentNode && n.parentNode !== document 460 | ? n.parentNode 461 | : document.body; 462 | u.appendChild(o), 463 | (o.style.position = 'absolute'), 464 | (o.style.width = 100 + t); 465 | var c = 100 / o.offsetWidth; 466 | u.removeChild(o); 467 | var s = c * parseFloat(e); 468 | return (r.CSS[e + t] = s), s; 469 | } 470 | function B(n, e, t) { 471 | if (e in n.style) { 472 | var r = e.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(), 473 | a = n.style[e] || getComputedStyle(n).getPropertyValue(r) || '0'; 474 | return t ? D(n, a, t) : a; 475 | } 476 | } 477 | function T(n, e) { 478 | return i.dom(n) && !i.inp(n) && (!i.nil(I(n, e)) || (i.svg(n) && n[e])) 479 | ? 'attribute' 480 | : i.dom(n) && M(t, e) 481 | ? 'transform' 482 | : i.dom(n) && 'transform' !== e && B(n, e) 483 | ? 'css' 484 | : null != n[e] 485 | ? 'object' 486 | : void 0; 487 | } 488 | function E(n) { 489 | if (i.dom(n)) { 490 | for ( 491 | var e, 492 | t = n.style.transform || '', 493 | r = /(\w+)\(([^)]*)\)/g, 494 | a = new Map(); 495 | (e = r.exec(t)); 496 | 497 | ) 498 | a.set(e[1], e[2]); 499 | return a; 500 | } 501 | } 502 | function F(n, e, t, r) { 503 | var a, 504 | u = o(e, 'scale') 505 | ? 1 506 | : 0 + 507 | (o((a = e), 'translate') || 'perspective' === a 508 | ? 'px' 509 | : o(a, 'rotate') || o(a, 'skew') 510 | ? 'deg' 511 | : void 0), 512 | i = E(n).get(e) || u; 513 | return ( 514 | t && (t.transforms.list.set(e, i), (t.transforms.last = e)), 515 | r ? D(n, i, r) : i 516 | ); 517 | } 518 | function A(n, e, t, r) { 519 | switch (T(n, e)) { 520 | case 'transform': 521 | return F(n, e, r, t); 522 | case 'css': 523 | return B(n, e, t); 524 | case 'attribute': 525 | return I(n, e); 526 | default: 527 | return n[e] || 0; 528 | } 529 | } 530 | function N(n, e) { 531 | var t = /^(\*=|\+=|-=)/.exec(n); 532 | if (!t) return n; 533 | var r = C(n) || 0, 534 | a = parseFloat(e), 535 | o = parseFloat(n.replace(t[0], '')); 536 | switch (t[0][0]) { 537 | case '+': 538 | return a + o + r; 539 | case '-': 540 | return a - o + r; 541 | case '*': 542 | return a * o + r; 543 | } 544 | } 545 | function S(n, e) { 546 | if (i.col(n)) return O(n); 547 | if (/\s/g.test(n)) return n; 548 | var t = C(n), 549 | r = t ? n.substr(0, n.length - t.length) : n; 550 | return e ? r + e : r; 551 | } 552 | function L(n, e) { 553 | return Math.sqrt(Math.pow(e.x - n.x, 2) + Math.pow(e.y - n.y, 2)); 554 | } 555 | function j(n) { 556 | for (var e, t = n.points, r = 0, a = 0; a < t.numberOfItems; a++) { 557 | var o = t.getItem(a); 558 | a > 0 && (r += L(e, o)), (e = o); 559 | } 560 | return r; 561 | } 562 | function q(n) { 563 | if (n.getTotalLength) return n.getTotalLength(); 564 | switch (n.tagName.toLowerCase()) { 565 | case 'circle': 566 | return (o = n), 2 * Math.PI * I(o, 'r'); 567 | case 'rect': 568 | return 2 * I((a = n), 'width') + 2 * I(a, 'height'); 569 | case 'line': 570 | return L( 571 | { x: I((r = n), 'x1'), y: I(r, 'y1') }, 572 | { x: I(r, 'x2'), y: I(r, 'y2') } 573 | ); 574 | case 'polyline': 575 | return j(n); 576 | case 'polygon': 577 | return ( 578 | (t = (e = n).points), 579 | j(e) + L(t.getItem(t.numberOfItems - 1), t.getItem(0)) 580 | ); 581 | } 582 | var e, t, r, a, o; 583 | } 584 | function H(n, e) { 585 | var t = e || {}, 586 | r = 587 | t.el || 588 | (function (n) { 589 | for (var e = n.parentNode; i.svg(e) && i.svg(e.parentNode); ) 590 | e = e.parentNode; 591 | return e; 592 | })(n), 593 | a = r.getBoundingClientRect(), 594 | o = I(r, 'viewBox'), 595 | u = a.width, 596 | c = a.height, 597 | s = t.viewBox || (o ? o.split(' ') : [0, 0, u, c]); 598 | return { 599 | el: r, 600 | viewBox: s, 601 | x: s[0] / 1, 602 | y: s[1] / 1, 603 | w: u, 604 | h: c, 605 | vW: s[2], 606 | vH: s[3], 607 | }; 608 | } 609 | function V(n, e, t) { 610 | function r(t) { 611 | void 0 === t && (t = 0); 612 | var r = e + t >= 1 ? e + t : 0; 613 | return n.el.getPointAtLength(r); 614 | } 615 | var a = H(n.el, n.svg), 616 | o = r(), 617 | u = r(-1), 618 | i = r(1), 619 | c = t ? 1 : a.w / a.vW, 620 | s = t ? 1 : a.h / a.vH; 621 | switch (n.property) { 622 | case 'x': 623 | return (o.x - a.x) * c; 624 | case 'y': 625 | return (o.y - a.y) * s; 626 | case 'angle': 627 | return (180 * Math.atan2(i.y - u.y, i.x - u.x)) / Math.PI; 628 | } 629 | } 630 | function $(n, e) { 631 | var t = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g, 632 | r = S(i.pth(n) ? n.totalLength : n, e) + ''; 633 | return { 634 | original: r, 635 | numbers: r.match(t) ? r.match(t).map(Number) : [0], 636 | strings: i.str(n) || e ? r.split(t) : [], 637 | }; 638 | } 639 | function W(n) { 640 | return m(n ? y(i.arr(n) ? n.map(b) : b(n)) : [], function (n, e, t) { 641 | return t.indexOf(n) === e; 642 | }); 643 | } 644 | function X(n) { 645 | var e = W(n); 646 | return e.map(function (n, t) { 647 | return { target: n, id: t, total: e.length, transforms: { list: E(n) } }; 648 | }); 649 | } 650 | function Y(n, e) { 651 | var t = x(e); 652 | if ((/^spring/.test(t.easing) && (t.duration = s(t.easing)), i.arr(n))) { 653 | var r = n.length; 654 | 2 === r && !i.obj(n[0]) 655 | ? (n = { value: n }) 656 | : i.fnc(e.duration) || (t.duration = e.duration / r); 657 | } 658 | var a = i.arr(n) ? n : [n]; 659 | return a 660 | .map(function (n, t) { 661 | var r = i.obj(n) && !i.pth(n) ? n : { value: n }; 662 | return ( 663 | i.und(r.delay) && (r.delay = t ? 0 : e.delay), 664 | i.und(r.endDelay) && 665 | (r.endDelay = t === a.length - 1 ? e.endDelay : 0), 666 | r 667 | ); 668 | }) 669 | .map(function (n) { 670 | return k(n, t); 671 | }); 672 | } 673 | function Z(n, e) { 674 | var t = [], 675 | r = e.keyframes; 676 | for (var a in (r && 677 | (e = k( 678 | (function (n) { 679 | for ( 680 | var e = m( 681 | y( 682 | n.map(function (n) { 683 | return Object.keys(n); 684 | }) 685 | ), 686 | function (n) { 687 | return i.key(n); 688 | } 689 | ).reduce(function (n, e) { 690 | return n.indexOf(e) < 0 && n.push(e), n; 691 | }, []), 692 | t = {}, 693 | r = function (r) { 694 | var a = e[r]; 695 | t[a] = n.map(function (n) { 696 | var e = {}; 697 | for (var t in n) 698 | i.key(t) ? t == a && (e.value = n[t]) : (e[t] = n[t]); 699 | return e; 700 | }); 701 | }, 702 | a = 0; 703 | a < e.length; 704 | a++ 705 | ) 706 | r(a); 707 | return t; 708 | })(r), 709 | e 710 | )), 711 | e)) 712 | i.key(a) && t.push({ name: a, tweens: Y(e[a], n) }); 713 | return t; 714 | } 715 | function G(n, e) { 716 | var t; 717 | return n.tweens.map(function (r) { 718 | var a = (function (n, e) { 719 | var t = {}; 720 | for (var r in n) { 721 | var a = P(n[r], e); 722 | i.arr(a) && 723 | 1 === 724 | (a = a.map(function (n) { 725 | return P(n, e); 726 | })).length && 727 | (a = a[0]), 728 | (t[r] = a); 729 | } 730 | return ( 731 | (t.duration = parseFloat(t.duration)), 732 | (t.delay = parseFloat(t.delay)), 733 | t 734 | ); 735 | })(r, e), 736 | o = a.value, 737 | u = i.arr(o) ? o[1] : o, 738 | c = C(u), 739 | s = A(e.target, n.name, c, e), 740 | f = t ? t.to.original : s, 741 | l = i.arr(o) ? o[0] : f, 742 | d = C(l) || C(s), 743 | p = c || d; 744 | return ( 745 | i.und(u) && (u = f), 746 | (a.from = $(l, p)), 747 | (a.to = $(N(u, l), p)), 748 | (a.start = t ? t.end : 0), 749 | (a.end = a.start + a.delay + a.duration + a.endDelay), 750 | (a.easing = h(a.easing, a.duration)), 751 | (a.isPath = i.pth(o)), 752 | (a.isPathTargetInsideSVG = a.isPath && i.svg(e.target)), 753 | (a.isColor = i.col(a.from.original)), 754 | a.isColor && (a.round = 1), 755 | (t = a), 756 | a 757 | ); 758 | }); 759 | } 760 | var Q = { 761 | css: function (n, e, t) { 762 | return (n.style[e] = t); 763 | }, 764 | attribute: function (n, e, t) { 765 | return n.setAttribute(e, t); 766 | }, 767 | object: function (n, e, t) { 768 | return (n[e] = t); 769 | }, 770 | transform: function (n, e, t, r, a) { 771 | if ((r.list.set(e, t), e === r.last || a)) { 772 | var o = ''; 773 | r.list.forEach(function (n, e) { 774 | o += e + '(' + n + ') '; 775 | }), 776 | (n.style.transform = o); 777 | } 778 | }, 779 | }; 780 | function z(n, e) { 781 | X(n).forEach(function (n) { 782 | for (var t in e) { 783 | var r = P(e[t], n), 784 | a = n.target, 785 | o = C(r), 786 | u = A(a, t, o, n), 787 | i = N(S(r, o || C(u)), u), 788 | c = T(a, t); 789 | Q[c](a, t, i, n.transforms, !0); 790 | } 791 | }); 792 | } 793 | function _(n, e) { 794 | return m( 795 | y( 796 | n.map(function (n) { 797 | return e.map(function (e) { 798 | return (function (n, e) { 799 | var t = T(n.target, e.name); 800 | if (t) { 801 | var r = G(e, n), 802 | a = r[r.length - 1]; 803 | return { 804 | type: t, 805 | property: e.name, 806 | animatable: n, 807 | tweens: r, 808 | duration: a.end, 809 | delay: r[0].delay, 810 | endDelay: a.endDelay, 811 | }; 812 | } 813 | })(n, e); 814 | }); 815 | }) 816 | ), 817 | function (n) { 818 | return !i.und(n); 819 | } 820 | ); 821 | } 822 | function R(n, e) { 823 | var t = n.length, 824 | r = function (n) { 825 | return n.timelineOffset ? n.timelineOffset : 0; 826 | }, 827 | a = {}; 828 | return ( 829 | (a.duration = t 830 | ? Math.max.apply( 831 | Math, 832 | n.map(function (n) { 833 | return r(n) + n.duration; 834 | }) 835 | ) 836 | : e.duration), 837 | (a.delay = t 838 | ? Math.min.apply( 839 | Math, 840 | n.map(function (n) { 841 | return r(n) + n.delay; 842 | }) 843 | ) 844 | : e.delay), 845 | (a.endDelay = t 846 | ? a.duration - 847 | Math.max.apply( 848 | Math, 849 | n.map(function (n) { 850 | return r(n) + n.duration - n.endDelay; 851 | }) 852 | ) 853 | : e.endDelay), 854 | a 855 | ); 856 | } 857 | var J = 0; 858 | var K = [], 859 | U = (function () { 860 | var n; 861 | function e(t) { 862 | for (var r = K.length, a = 0; a < r; ) { 863 | var o = K[a]; 864 | o.paused ? (K.splice(a, 1), r--) : (o.tick(t), a++); 865 | } 866 | n = a > 0 ? requestAnimationFrame(e) : void 0; 867 | } 868 | return ( 869 | 'undefined' != typeof document && 870 | document.addEventListener('visibilitychange', function () { 871 | en.suspendWhenDocumentHidden && 872 | (nn() 873 | ? (n = cancelAnimationFrame(n)) 874 | : (K.forEach(function (n) { 875 | return n._onDocumentVisibility(); 876 | }), 877 | U())); 878 | }), 879 | function () { 880 | n || 881 | (nn() && en.suspendWhenDocumentHidden) || 882 | !(K.length > 0) || 883 | (n = requestAnimationFrame(e)); 884 | } 885 | ); 886 | })(); 887 | function nn() { 888 | return !!document && document.hidden; 889 | } 890 | function en(t) { 891 | void 0 === t && (t = {}); 892 | var r, 893 | o = 0, 894 | u = 0, 895 | i = 0, 896 | c = 0, 897 | s = null; 898 | function f(n) { 899 | var e = 900 | window.Promise && 901 | new Promise(function (n) { 902 | return (s = n); 903 | }); 904 | return (n.finished = e), e; 905 | } 906 | var l, 907 | d, 908 | p, 909 | v, 910 | h, 911 | g, 912 | y, 913 | b, 914 | M = 915 | ((d = w(n, (l = t))), 916 | (p = w(e, l)), 917 | (v = Z(p, l)), 918 | (h = X(l.targets)), 919 | (g = _(h, v)), 920 | (y = R(g, p)), 921 | (b = J), 922 | J++, 923 | k(d, { 924 | id: b, 925 | children: [], 926 | animatables: h, 927 | animations: g, 928 | duration: y.duration, 929 | delay: y.delay, 930 | endDelay: y.endDelay, 931 | })); 932 | f(M); 933 | function x() { 934 | var n = M.direction; 935 | 'alternate' !== n && 936 | (M.direction = 'normal' !== n ? 'normal' : 'reverse'), 937 | (M.reversed = !M.reversed), 938 | r.forEach(function (n) { 939 | return (n.reversed = M.reversed); 940 | }); 941 | } 942 | function O(n) { 943 | return M.reversed ? M.duration - n : n; 944 | } 945 | function C() { 946 | (o = 0), (u = O(M.currentTime) * (1 / en.speed)); 947 | } 948 | function P(n, e) { 949 | e && e.seek(n - e.timelineOffset); 950 | } 951 | function I(n) { 952 | for (var e = 0, t = M.animations, r = t.length; e < r; ) { 953 | var o = t[e], 954 | u = o.animatable, 955 | i = o.tweens, 956 | c = i.length - 1, 957 | s = i[c]; 958 | c && 959 | (s = 960 | m(i, function (e) { 961 | return n < e.end; 962 | })[0] || s); 963 | for ( 964 | var f = a(n - s.start - s.delay, 0, s.duration) / s.duration, 965 | l = isNaN(f) ? 1 : s.easing(f), 966 | d = s.to.strings, 967 | p = s.round, 968 | v = [], 969 | h = s.to.numbers.length, 970 | g = void 0, 971 | y = 0; 972 | y < h; 973 | y++ 974 | ) { 975 | var b = void 0, 976 | x = s.to.numbers[y], 977 | w = s.from.numbers[y] || 0; 978 | (b = s.isPath 979 | ? V(s.value, l * x, s.isPathTargetInsideSVG) 980 | : w + l * (x - w)), 981 | p && ((s.isColor && y > 2) || (b = Math.round(b * p) / p)), 982 | v.push(b); 983 | } 984 | var k = d.length; 985 | if (k) { 986 | g = d[0]; 987 | for (var O = 0; O < k; O++) { 988 | d[O]; 989 | var C = d[O + 1], 990 | P = v[O]; 991 | isNaN(P) || (g += C ? P + C : P + ' '); 992 | } 993 | } else g = v[0]; 994 | Q[o.type](u.target, o.property, g, u.transforms), 995 | (o.currentValue = g), 996 | e++; 997 | } 998 | } 999 | function D(n) { 1000 | M[n] && !M.passThrough && M[n](M); 1001 | } 1002 | function B(n) { 1003 | var e = M.duration, 1004 | t = M.delay, 1005 | l = e - M.endDelay, 1006 | d = O(n); 1007 | (M.progress = a((d / e) * 100, 0, 100)), 1008 | (M.reversePlayback = d < M.currentTime), 1009 | r && 1010 | (function (n) { 1011 | if (M.reversePlayback) for (var e = c; e--; ) P(n, r[e]); 1012 | else for (var t = 0; t < c; t++) P(n, r[t]); 1013 | })(d), 1014 | !M.began && M.currentTime > 0 && ((M.began = !0), D('begin')), 1015 | !M.loopBegan && 1016 | M.currentTime > 0 && 1017 | ((M.loopBegan = !0), D('loopBegin')), 1018 | d <= t && 0 !== M.currentTime && I(0), 1019 | ((d >= l && M.currentTime !== e) || !e) && I(e), 1020 | d > t && d < l 1021 | ? (M.changeBegan || 1022 | ((M.changeBegan = !0), 1023 | (M.changeCompleted = !1), 1024 | D('changeBegin')), 1025 | D('change'), 1026 | I(d)) 1027 | : M.changeBegan && 1028 | ((M.changeCompleted = !0), 1029 | (M.changeBegan = !1), 1030 | D('changeComplete')), 1031 | (M.currentTime = a(d, 0, e)), 1032 | M.began && D('update'), 1033 | n >= e && 1034 | ((u = 0), 1035 | M.remaining && !0 !== M.remaining && M.remaining--, 1036 | M.remaining 1037 | ? ((o = i), 1038 | D('loopComplete'), 1039 | (M.loopBegan = !1), 1040 | 'alternate' === M.direction && x()) 1041 | : ((M.paused = !0), 1042 | M.completed || 1043 | ((M.completed = !0), 1044 | D('loopComplete'), 1045 | D('complete'), 1046 | !M.passThrough && 'Promise' in window && (s(), f(M))))); 1047 | } 1048 | return ( 1049 | (M.reset = function () { 1050 | var n = M.direction; 1051 | (M.passThrough = !1), 1052 | (M.currentTime = 0), 1053 | (M.progress = 0), 1054 | (M.paused = !0), 1055 | (M.began = !1), 1056 | (M.loopBegan = !1), 1057 | (M.changeBegan = !1), 1058 | (M.completed = !1), 1059 | (M.changeCompleted = !1), 1060 | (M.reversePlayback = !1), 1061 | (M.reversed = 'reverse' === n), 1062 | (M.remaining = M.loop), 1063 | (r = M.children); 1064 | for (var e = (c = r.length); e--; ) M.children[e].reset(); 1065 | ((M.reversed && !0 !== M.loop) || 1066 | ('alternate' === n && 1 === M.loop)) && 1067 | M.remaining++, 1068 | I(M.reversed ? M.duration : 0); 1069 | }), 1070 | (M._onDocumentVisibility = C), 1071 | (M.set = function (n, e) { 1072 | return z(n, e), M; 1073 | }), 1074 | (M.tick = function (n) { 1075 | (i = n), o || (o = i), B((i + (u - o)) * en.speed); 1076 | }), 1077 | (M.seek = function (n) { 1078 | B(O(n)); 1079 | }), 1080 | (M.pause = function () { 1081 | (M.paused = !0), C(); 1082 | }), 1083 | (M.play = function () { 1084 | M.paused && 1085 | (M.completed && M.reset(), (M.paused = !1), K.push(M), C(), U()); 1086 | }), 1087 | (M.reverse = function () { 1088 | x(), (M.completed = !M.reversed), C(); 1089 | }), 1090 | (M.restart = function () { 1091 | M.reset(), M.play(); 1092 | }), 1093 | (M.remove = function (n) { 1094 | rn(W(n), M); 1095 | }), 1096 | M.reset(), 1097 | M.autoplay && M.play(), 1098 | M 1099 | ); 1100 | } 1101 | function tn(n, e) { 1102 | for (var t = e.length; t--; ) 1103 | M(n, e[t].animatable.target) && e.splice(t, 1); 1104 | } 1105 | function rn(n, e) { 1106 | var t = e.animations, 1107 | r = e.children; 1108 | tn(n, t); 1109 | for (var a = r.length; a--; ) { 1110 | var o = r[a], 1111 | u = o.animations; 1112 | tn(n, u), u.length || o.children.length || r.splice(a, 1); 1113 | } 1114 | t.length || r.length || e.pause(); 1115 | } 1116 | return ( 1117 | (en.version = '3.2.1'), 1118 | (en.speed = 1), 1119 | (en.suspendWhenDocumentHidden = !0), 1120 | (en.running = K), 1121 | (en.remove = function (n) { 1122 | for (var e = W(n), t = K.length; t--; ) rn(e, K[t]); 1123 | }), 1124 | (en.get = A), 1125 | (en.set = z), 1126 | (en.convertPx = D), 1127 | (en.path = function (n, e) { 1128 | var t = i.str(n) ? g(n)[0] : n, 1129 | r = e || 100; 1130 | return function (n) { 1131 | return { property: n, el: t, svg: H(t), totalLength: q(t) * (r / 100) }; 1132 | }; 1133 | }), 1134 | (en.setDashoffset = function (n) { 1135 | var e = q(n); 1136 | return n.setAttribute('stroke-dasharray', e), e; 1137 | }), 1138 | (en.stagger = function (n, e) { 1139 | void 0 === e && (e = {}); 1140 | var t = e.direction || 'normal', 1141 | r = e.easing ? h(e.easing) : null, 1142 | a = e.grid, 1143 | o = e.axis, 1144 | u = e.from || 0, 1145 | c = 'first' === u, 1146 | s = 'center' === u, 1147 | f = 'last' === u, 1148 | l = i.arr(n), 1149 | d = l ? parseFloat(n[0]) : parseFloat(n), 1150 | p = l ? parseFloat(n[1]) : 0, 1151 | v = C(l ? n[1] : n) || 0, 1152 | g = e.start || 0 + (l ? d : 0), 1153 | m = [], 1154 | y = 0; 1155 | return function (n, e, i) { 1156 | if ( 1157 | (c && (u = 0), s && (u = (i - 1) / 2), f && (u = i - 1), !m.length) 1158 | ) { 1159 | for (var h = 0; h < i; h++) { 1160 | if (a) { 1161 | var b = s ? (a[0] - 1) / 2 : u % a[0], 1162 | M = s ? (a[1] - 1) / 2 : Math.floor(u / a[0]), 1163 | x = b - (h % a[0]), 1164 | w = M - Math.floor(h / a[0]), 1165 | k = Math.sqrt(x * x + w * w); 1166 | 'x' === o && (k = -x), 'y' === o && (k = -w), m.push(k); 1167 | } else m.push(Math.abs(u - h)); 1168 | y = Math.max.apply(Math, m); 1169 | } 1170 | r && 1171 | (m = m.map(function (n) { 1172 | return r(n / y) * y; 1173 | })), 1174 | 'reverse' === t && 1175 | (m = m.map(function (n) { 1176 | return o ? (n < 0 ? -1 * n : -n) : Math.abs(y - n); 1177 | })); 1178 | } 1179 | return g + (l ? (p - d) / y : d) * (Math.round(100 * m[e]) / 100) + v; 1180 | }; 1181 | }), 1182 | (en.timeline = function (n) { 1183 | void 0 === n && (n = {}); 1184 | var t = en(n); 1185 | return ( 1186 | (t.duration = 0), 1187 | (t.add = function (r, a) { 1188 | var o = K.indexOf(t), 1189 | u = t.children; 1190 | function c(n) { 1191 | n.passThrough = !0; 1192 | } 1193 | o > -1 && K.splice(o, 1); 1194 | for (var s = 0; s < u.length; s++) c(u[s]); 1195 | var f = k(r, w(e, n)); 1196 | f.targets = f.targets || n.targets; 1197 | var l = t.duration; 1198 | (f.autoplay = !1), 1199 | (f.direction = t.direction), 1200 | (f.timelineOffset = i.und(a) ? l : N(a, l)), 1201 | c(t), 1202 | t.seek(f.timelineOffset); 1203 | var d = en(f); 1204 | c(d), u.push(d); 1205 | var p = R(u, n); 1206 | return ( 1207 | (t.delay = p.delay), 1208 | (t.endDelay = p.endDelay), 1209 | (t.duration = p.duration), 1210 | t.seek(0), 1211 | t.reset(), 1212 | t.autoplay && t.play(), 1213 | t 1214 | ); 1215 | }), 1216 | t 1217 | ); 1218 | }), 1219 | (en.easing = h), 1220 | (en.penner = v), 1221 | (en.random = function (n, e) { 1222 | return Math.floor(Math.random() * (e - n + 1)) + n; 1223 | }), 1224 | en 1225 | ); 1226 | }); 1227 | --------------------------------------------------------------------------------