├── README.md ├── analog-button ├── index.html └── style.css ├── clash-slider ├── app.js ├── index.html └── style.css ├── css-type-of-hover ├── index.html └── style.css ├── dark-light ├── app.js ├── index.html └── style.css ├── hover-btn ├── index.html └── style.css ├── image-hover-transform ├── index.html └── style.css ├── image-slider ├── 1.png ├── 2.png ├── index.html └── style.css ├── image-transition ├── app.js ├── index.html └── style.css ├── images-slider ├── app.js ├── index.html └── style.css ├── mouse-move-icons-animation ├── app.js ├── index.html └── style.css ├── simple-svg-animation ├── app.js ├── index.html └── style.css ├── svg-hover ├── index.html └── style.css └── tab-animation ├── app.js ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # CSS-JS-Codes 2 | This is use Full for good foundation to learn CSS and Javascript 3 | -------------------------------------------------------------------------------- /analog-button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /analog-button/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | background-color: #151719; 7 | } 8 | button{ 9 | background-color: green; 10 | box-shadow: #ffffff 4px 4px 0px; 11 | border-radius: 8px; 12 | color: #ffffff; 13 | padding: 25px 50px; 14 | border: none; 15 | cursor: pointer; 16 | } 17 | 18 | button:active{ 19 | transform: translateY(4px) 20 | translateX(4px); 21 | box-shadow: #094c66 0px 0px 0px; 22 | } -------------------------------------------------------------------------------- /clash-slider/app.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var slideContainer = $('.slide-container'); 4 | 5 | slideContainer.slick(); 6 | 7 | $('.clash-card__image img').hide(); 8 | $('.slick-active').find('.clash-card img').fadeIn(200); 9 | 10 | // On before slide change 11 | slideContainer.on('beforeChange', function(event, slick, currentSlide, nextSlide) { 12 | $('.slick-active').find('.clash-card img').fadeOut(1000); 13 | }); 14 | 15 | // On after slide change 16 | slideContainer.on('afterChange', function(event, slick, currentSlide) { 17 | $('.slick-active').find('.clash-card img').fadeIn(200); 18 | }); 19 | 20 | })(); 21 | -------------------------------------------------------------------------------- /clash-slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |
17 |
18 | barbarian 19 |
20 |
Level 4
21 |
The Barbarian
22 |
23 | The Barbarian is a kilt-clad Scottish warrior with an angry, battle-ready expression, hungry for destruction. He has Killer yellow horseshoe mustache. 24 |
25 | 26 |
27 |
28 |
20S
29 |
Training
30 |
31 | 32 |
33 |
16
34 |
Speed
35 |
36 | 37 |
38 |
150
39 |
Cost
40 |
41 | 42 |
43 | 44 |
45 |
46 | 47 |
48 |
49 |
50 | archer 51 |
52 |
Level 5
53 |
The Archer
54 |
55 | The Archer is a female warrior with sharp eyes. She wears a short, light green dress, a hooded cape, a leather belt and an attached small pouch. 56 |
57 | 58 |
59 |
60 |
25S
61 |
Training
62 |
63 | 64 |
65 |
24
66 |
Speed
67 |
68 | 69 |
70 |
300
71 |
Cost
72 |
73 | 74 |
75 | 76 |
77 |
78 | 79 |
80 |
81 |
82 | giant 83 |
84 |
Level 5
85 |
The Giant
86 |
87 | Slow, steady and powerful, Giants are massive warriors that soak up huge amounts of damage. Show them a turret or cannon and you'll see their fury unleashed! 88 |
89 | 90 |
91 |
92 |
2M
93 |
Training
94 |
95 | 96 |
97 |
12
98 |
Speed
99 |
100 | 101 |
102 |
2250
103 |
Cost
104 |
105 | 106 |
107 | 108 |
109 |
110 | 111 |
112 |
113 |
114 | goblin 115 |
116 |
Level 5
117 |
The Goblin
118 |
119 | These pesky little creatures only have eyes for one thing: LOOT! They are faster than a Spring Trap, and their hunger for resources is limitless. 120 |
121 | 122 |
123 |
124 |
30S
125 |
Training
126 |
127 | 128 |
129 |
32
130 |
Speed
131 |
132 | 133 |
134 |
100
135 |
Cost
136 |
137 | 138 |
139 | 140 |
141 |
142 | 143 |
144 |
145 |
146 | wizard 147 |
148 |
Level 6
149 |
The Wizard
150 |
151 | The Wizard is a terrifying presence on the battlefield. Pair him up with some of his fellows and cast concentrated blasts of destruction on anything, land or sky! 152 |
153 | 154 |
155 |
156 |
5M
157 |
Training
158 |
159 | 160 |
161 |
16
162 |
Speed
163 |
164 | 165 |
166 |
4000
167 |
Cost
168 |
169 | 170 |
171 | 172 |
173 |
174 | 175 |
176 | 177 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /clash-slider/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,900); 2 | *, *:before, *:after { 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | background: linear-gradient(to bottom, #8c7a7a 0%, #af877c 65%, #af877c 100%) fixed; 8 | background: #000000; 9 | background-size: cover; 10 | font: 14px/20px "Lato", Arial, sans-serif; 11 | color: #9E9E9E; 12 | margin-top: 30px; 13 | } 14 | 15 | .slide-container { 16 | margin: auto; 17 | width: 600px; 18 | text-align: center; 19 | } 20 | 21 | .wrapper { 22 | padding-top: 40px; 23 | padding-bottom: 40px; 24 | } 25 | .wrapper:focus { 26 | outline: 0; 27 | } 28 | 29 | .clash-card { 30 | background: white; 31 | width: 300px; 32 | display: inline-block; 33 | margin: auto; 34 | border-radius: 19px; 35 | position: relative; 36 | text-align: center; 37 | box-shadow: -1px 15px 30px -12px black; 38 | z-index: 9999; 39 | } 40 | 41 | .clash-card__image { 42 | position: relative; 43 | height: 230px; 44 | margin-bottom: 35px; 45 | border-top-left-radius: 14px; 46 | border-top-right-radius: 14px; 47 | } 48 | 49 | .clash-card__image--barbarian { 50 | background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/barbarian-bg.jpg"); 51 | } 52 | .clash-card__image--barbarian img { 53 | width: 400px; 54 | position: absolute; 55 | top: -65px; 56 | left: -70px; 57 | } 58 | 59 | .clash-card__image--archer { 60 | background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/archer-bg.jpg"); 61 | } 62 | .clash-card__image--archer img { 63 | width: 400px; 64 | position: absolute; 65 | top: -34px; 66 | left: -37px; 67 | } 68 | 69 | .clash-card__image--giant { 70 | background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/giant-bg.jpg"); 71 | } 72 | .clash-card__image--giant img { 73 | width: 340px; 74 | position: absolute; 75 | top: -30px; 76 | left: -25px; 77 | } 78 | 79 | .clash-card__image--goblin { 80 | background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/goblin-bg.jpg"); 81 | } 82 | .clash-card__image--goblin img { 83 | width: 370px; 84 | position: absolute; 85 | top: -21px; 86 | left: -37px; 87 | } 88 | 89 | .clash-card__image--wizard { 90 | background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/wizard-bg.jpg"); 91 | } 92 | .clash-card__image--wizard img { 93 | width: 345px; 94 | position: absolute; 95 | top: -28px; 96 | left: -10px; 97 | } 98 | 99 | .clash-card__level { 100 | text-transform: uppercase; 101 | font-size: 12px; 102 | font-weight: 700; 103 | margin-bottom: 3px; 104 | } 105 | 106 | .clash-card__level--barbarian { 107 | color: #EC9B3B; 108 | } 109 | 110 | .clash-card__level--archer { 111 | color: #EE5487; 112 | } 113 | 114 | .clash-card__level--giant { 115 | color: #F6901A; 116 | } 117 | 118 | .clash-card__level--goblin { 119 | color: #82BB30; 120 | } 121 | 122 | .clash-card__level--wizard { 123 | color: #4FACFF; 124 | } 125 | 126 | .clash-card__unit-name { 127 | font-size: 26px; 128 | color: black; 129 | font-weight: 900; 130 | margin-bottom: 5px; 131 | } 132 | 133 | .clash-card__unit-description { 134 | padding: 20px; 135 | margin-bottom: 10px; 136 | } 137 | 138 | .clash-card__unit-stats--barbarian { 139 | background: #EC9B3B; 140 | } 141 | .clash-card__unit-stats--barbarian .one-third { 142 | border-right: 1px solid #BD7C2F; 143 | } 144 | 145 | .clash-card__unit-stats--archer { 146 | background: #EE5487; 147 | } 148 | .clash-card__unit-stats--archer .one-third { 149 | border-right: 1px solid #D04976; 150 | } 151 | 152 | .clash-card__unit-stats--giant { 153 | background: #F6901A; 154 | } 155 | .clash-card__unit-stats--giant .one-third { 156 | border-right: 1px solid #de7b09; 157 | } 158 | 159 | .clash-card__unit-stats--goblin { 160 | background: #82BB30; 161 | } 162 | .clash-card__unit-stats--goblin .one-third { 163 | border-right: 1px solid #71a32a; 164 | } 165 | 166 | .clash-card__unit-stats--wizard { 167 | background: #4FACFF; 168 | } 169 | .clash-card__unit-stats--wizard .one-third { 170 | border-right: 1px solid #309eff; 171 | } 172 | 173 | .clash-card__unit-stats { 174 | color: white; 175 | font-weight: 700; 176 | border-bottom-left-radius: 14px; 177 | border-bottom-right-radius: 14px; 178 | } 179 | .clash-card__unit-stats .one-third { 180 | width: 33%; 181 | float: left; 182 | padding: 20px 15px; 183 | } 184 | .clash-card__unit-stats sup { 185 | position: absolute; 186 | bottom: 4px; 187 | font-size: 45%; 188 | margin-left: 2px; 189 | } 190 | .clash-card__unit-stats .stat { 191 | position: relative; 192 | font-size: 24px; 193 | margin-bottom: 10px; 194 | } 195 | .clash-card__unit-stats .stat-value { 196 | text-transform: uppercase; 197 | font-weight: 400; 198 | font-size: 12px; 199 | } 200 | .clash-card__unit-stats .no-border { 201 | border-right: none; 202 | } 203 | 204 | .clearfix:after { 205 | visibility: hidden; 206 | display: block; 207 | font-size: 0; 208 | content: " "; 209 | clear: both; 210 | height: 0; 211 | } 212 | 213 | .slick-prev { 214 | left: 100px; 215 | z-index: 999; 216 | } 217 | 218 | .slick-next { 219 | right: 100px; 220 | z-index: 999; 221 | } -------------------------------------------------------------------------------- /css-type-of-hover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hover Effects 8 | 9 | 10 | 11 | 12 |

Awesome Hover Effect in CSS

13 | 14 |
15 |

Hover Effect 1

16 |

Hover Effect 2

17 |

Hover Effect 3

18 |

Hover Effect 4

19 |

Hover Effect 5

20 |

Hover Effect 6

21 |

Hover Effect 7

22 |

Hover Effect 8

23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /css-type-of-hover/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Catamaran'); 2 | 3 | html { 4 | box-sizing: border-box 5 | } 6 | *, *:before, *:after { 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | width: 90%; 12 | margin: 50px auto; 13 | color: rgba(255, 255, 255, 0.7); 14 | font: 16px/1 'Catamaran', sans-serif; 15 | background: #000000; 16 | } 17 | 18 | ::-webkit-scrollbar{ 19 | display: none; 20 | } 21 | body:after { 22 | content: ''; 23 | display: flex; 24 | clear: both; 25 | } 26 | 27 | h1 { 28 | font-weight: normal; 29 | color: #fff; 30 | transition: all .3s ease; 31 | text-align: center; 32 | font-family: Arial, Helvetica, sans-serif; 33 | font-size: 25px; 34 | margin: 150px 0px; 35 | } 36 | .container { 37 | display: flex; 38 | justify-content: space-between; 39 | align-items: center; 40 | flex-wrap: wrap; 41 | max-width: 1230px; 42 | background: rgba(255,255,255,0); 43 | flex-direction: row; 44 | 45 | } 46 | h2 { 47 | width: 50%; 48 | text-align: center; 49 | height: 44px; 50 | line-height: 24px; 51 | font-weight: 400; 52 | 53 | } 54 | @media screen and (max-width: 768px) { 55 | h2 { 56 | width: 100%; 57 | } 58 | h1 { 59 | margin-bottom: 30px; 60 | line-height: 30px; 61 | } 62 | } 63 | 64 | a, a > span { 65 | position: relative; 66 | color: inherit; 67 | text-decoration: none; 68 | line-height: 24px; 69 | } 70 | a:before, a:after, a > span:before, a > span:after { 71 | content: ''; 72 | position: absolute; 73 | transition: transform .5s ease; 74 | } 75 | .hover-1 { 76 | padding-top: 10px; 77 | } 78 | .hover-1:before { 79 | left: 0; 80 | bottom: 0; 81 | width: 100%; 82 | height: 2px; 83 | background: #008f0c; 84 | transform: scaleX(0); 85 | } 86 | .hover-1:hover:before { 87 | transform: scaleX(1); 88 | } 89 | .hover-2 { 90 | padding: 10px; 91 | } 92 | .hover-2:before, .hover-2:after { 93 | left: 0; 94 | top: 0; 95 | width: 100%; 96 | height: 100%; 97 | border-style: solid; 98 | border-color: #008f0c; 99 | } 100 | .hover-2:before { 101 | border-width: 2px 0 2px 0; 102 | transform: scaleX(0); 103 | } 104 | .hover-2:after { 105 | border-width: 0 2px 0 2px; 106 | transform: scaleY(0); 107 | } 108 | .hover-2:hover:before, .hover-2:hover:after { 109 | transform: scale(1, 1); 110 | } 111 | .hover-3 { 112 | display: inline-flex; 113 | padding-top: 10px; 114 | padding-bottom: 5px; 115 | overflow: hidden; 116 | } 117 | .hover-3:before { 118 | left: 0; 119 | bottom: 0; 120 | width: 100%; 121 | height: 2px; 122 | background: #008f0c; 123 | transform: translateX(-100%); 124 | } 125 | .hover-3:hover:before { 126 | transform: translateX(0); 127 | } 128 | .hover-4 { 129 | padding: 10px; 130 | display: inline-flex; 131 | overflow: hidden; 132 | } 133 | .hover-4:before, .hover-4:after { 134 | left: 0; 135 | width: 100%; 136 | height: 2px; 137 | background: #008f0c; 138 | } 139 | .hover-4:before { 140 | bottom: 0; 141 | transform: translateX(-100%); 142 | } 143 | .hover-4:after { 144 | top: 0; 145 | transform: translateX(100%); 146 | } 147 | .hover-4:hover:before, .hover-4:hover:after { 148 | transform: translateX(0); 149 | } 150 | .hover-5 { 151 | display: inline-block; 152 | overflow: hidden; 153 | } 154 | .hover-5:before, .hover-5:after { 155 | right: 0; 156 | bottom: 0; 157 | background: #008f0c; 158 | } 159 | .hover-5:before { 160 | width: 100%; 161 | height: 2px; 162 | transform: translateX(-100%); 163 | } 164 | .hover-5:after { 165 | width: 2px; 166 | height: 100%; 167 | transform: translateY(100%); 168 | } 169 | .hover-5 > span { 170 | display: flex; 171 | padding: 10px; 172 | } 173 | .hover-5 > span:before, .hover-5 > span:after { 174 | left: 0; 175 | top: 0; 176 | background: #008f0c; 177 | } 178 | .hover-5 > span:before { 179 | width: 100%; 180 | height: 2px; 181 | transform: translateX(100%); 182 | } 183 | .hover-5 > span:after { 184 | width: 2px; 185 | height: 100%; 186 | transform: translateY(-100%); 187 | } 188 | .hover-5:hover:before, 189 | .hover-5:hover:after, 190 | .hover-5:hover > span:before, 191 | .hover-5:hover > span:after { 192 | transform: translate(0, 0); 193 | } 194 | .hover-6 { 195 | display: inline-flex; 196 | overflow: hidden; 197 | } 198 | .hover-6:before, .hover-6:after { 199 | right: 0; 200 | bottom: 0; 201 | background: #008f0c; 202 | transition: transform .3s ease; 203 | } 204 | .hover-6:before { 205 | width: 100%; 206 | height: 2px; 207 | transform: translateX(-100%); 208 | transition-delay: .9s; 209 | } 210 | .hover-6:after { 211 | width: 2px; 212 | height: 100%; 213 | transform: translateY(100%); 214 | transition-delay: .6s; 215 | } 216 | .hover-6 > span { 217 | display: flex; 218 | padding: 10px; 219 | } 220 | .hover-6 > span:before, 221 | .hover-6 > span:after { 222 | left: 0; 223 | top: 0; 224 | background: #008f0c; 225 | transition: transform .3s ease; 226 | } 227 | .hover-6 > span:before { 228 | width: 100%; 229 | height: 2px; 230 | transform: translateX(100%); 231 | transition-delay: .3s; 232 | } 233 | .hover-6 > span:after { 234 | width: 2px; 235 | height: 100%; 236 | transform: translateY(-100%); 237 | transition-delay: 0s; 238 | } 239 | .hover-6:hover:before, 240 | .hover-6:hover:after, 241 | .hover-6:hover > span:before, 242 | .hover-6:hover > span:after { 243 | transform: translate(0, 0); 244 | } 245 | .hover-6:hover:before { 246 | transition-delay: 0s; 247 | } 248 | .hover-6:hover:after { 249 | transition-delay: .3s; 250 | } 251 | .hover-6:hover > span:before { 252 | transition-delay: .6s; 253 | } 254 | .hover-6:hover > span:after { 255 | transition-delay: .9s; 256 | } 257 | .hover-7 { 258 | display: inline-block; 259 | overflow: hidden; 260 | } 261 | .hover-7:before { 262 | left: 0; 263 | top: 0; 264 | width: 100%; 265 | height: 100%; 266 | background: #008f0c; 267 | transform: translateX(-100%); 268 | } 269 | .hover-7:after { 270 | content: attr(data-content); 271 | left: 0; 272 | top: 0; 273 | width: 0; 274 | margin: 12px; 275 | color: #000000; 276 | white-space: nowrap; 277 | overflow: hidden; 278 | transition: width .5s ease; 279 | } 280 | .hover-7 > span { 281 | display: block; 282 | margin: 2px; 283 | padding: 10px; 284 | } 285 | .hover-7:hover:before { 286 | transform: translateX(0); 287 | } 288 | .hover-7:hover:after { 289 | width: calc(100% - 24px); 290 | } 291 | .hover-8 { 292 | display: inline-flex; 293 | overflow: hidden; 294 | } 295 | .hover-8:before { 296 | left: 0; 297 | top: 0; 298 | width: 100%; 299 | height: 100%; 300 | background: #008f0c; 301 | transform: translateY(-100%); 302 | } 303 | .hover-8:after { 304 | content: attr(data-content); 305 | top: 0; 306 | left: 0; 307 | height: 0; 308 | margin: 12px; 309 | color: #000000; 310 | white-space: nowrap; 311 | overflow: hidden; 312 | transition: height .5s ease; 313 | } 314 | .hover-8 > span { 315 | display: block; 316 | margin: 2px; 317 | padding: 10px; 318 | } 319 | .hover-8:hover:before { 320 | transform: translateY(0); 321 | } 322 | .hover-8:hover:after { 323 | height: calc(100% - 24px); 324 | } 325 | .footer {text-align: center;} 326 | .footer a {color:#000000;} 327 | -------------------------------------------------------------------------------- /dark-light/app.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | const themeSwitch = 3 | document.querySelector("#toggle-theme"); 4 | themeSwitch.addEventListener("change", 5 | () => { 6 | document.body.classList.toggle 7 | ("dark-theme"); 8 | }); 9 | 10 | $("#toggle-theme").on("click", 11 | function () { 12 | $(this).parent() 13 | .toggleClass("checked"); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /dark-light/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dark Light 8 | 9 | 10 | 11 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /dark-light/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Volkhov:wght@400;700&display=swap'); 2 | 3 | body{ 4 | padding-top: 100px; 5 | font-family: 'Poppins', sans-serif; 6 | } 7 | 8 | .light-theme { 9 | --black-color: #000; 10 | --grey-color: #b5b2b2; 11 | --grey-color-200: #9e9e9e; 12 | --grey-border: #e4dfdd; 13 | --grey-border-200: rgba(149, 146, 146, 0.32); 14 | --text-color: rgba(0, 0, 0, 0.5); 15 | --white-color: #fff; 16 | --green-color: #88ffc6; 17 | } 18 | 19 | .dark-theme { 20 | --black-color: #fff; 21 | --text-color: rgba(255, 255, 255, 0.5); 22 | --white-color: #000; 23 | --green-color: #88ffc6; 24 | } 25 | 26 | .d-flex { 27 | display: flex; 28 | display: -webkit-flex; 29 | } 30 | .flex-wrap { 31 | flex-wrap: wrap; 32 | -webkit-flex-wrap: wrap; 33 | } 34 | .justify-content-between { 35 | justify-content: space-between; 36 | -webkit-justify-content: space-between; 37 | } 38 | .align-items-center { 39 | align-items: center; 40 | --webkit-align-items: center; 41 | } 42 | 43 | .img-fluid { 44 | max-width: 100%; 45 | height: auto; 46 | } 47 | 48 | .banner { 49 | height: 50vh; 50 | overflow: hidden; 51 | padding: 0px 10px; 52 | } 53 | .banner::after { 54 | content: ""; 55 | position: absolute; 56 | transition: all 1s; 57 | -webkit-transition: all 1s; 58 | top: 0; 59 | right: 0%; 60 | width: 0%; 61 | background: #000; 62 | height: 100%; 63 | } 64 | .dark-theme .banner::after { 65 | content: ""; 66 | width: 100%; 67 | } 68 | 69 | 70 | 71 | .switch { 72 | margin-bottom: 20px; 73 | background: rgba(0, 0, 0, 0.1); 74 | position: relative; 75 | border-radius: 50px; 76 | width: 200px; 77 | transition: all 1.2s; 78 | -webkit-transition: all 1.2s; 79 | cursor: pointer; 80 | } 81 | .switch.checked { 82 | background: #34323d; 83 | } 84 | .switch::before { 85 | content: ""; 86 | position: absolute; 87 | left: 0; 88 | top: 0; 89 | width: 50%; 90 | height: 100%; 91 | background: #fff; 92 | border-radius: 50px; 93 | z-index: 1; 94 | box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); 95 | -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); 96 | transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 97 | -webkit-transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 98 | } 99 | .switch input[type="checkbox"] { 100 | position: absolute; 101 | top: 0; 102 | left: 0; 103 | width: 100%; 104 | height: 100%; 105 | opacity: 0; 106 | cursor: pointer; 107 | } 108 | .switch span { 109 | color: var(--black-color); 110 | display: block; 111 | width: 50%; 112 | text-align: center; 113 | padding: 5px; 114 | z-index: 2; 115 | text-transform: capitalize; 116 | } 117 | .switch.checked::before { 118 | left: 50%; 119 | } 120 | .switch.checked .dark-txt { 121 | color: #000; 122 | } 123 | .banner-left{ 124 | position: relative; 125 | z-index: 56565; 126 | top: 85px; 127 | } 128 | 129 | .banner-img{ 130 | display: flex; 131 | animation: myanimation 8s infinite linear; 132 | flex-direction: column; 133 | align-items: center; 134 | position: relative; 135 | z-index: 5; 136 | left: 115px; 137 | } 138 | 139 | ::-webkit-scrollbar{ 140 | display: none; 141 | } 142 | .my-img{ 143 | position: relative; 144 | z-index: 6565654; 145 | } 146 | @keyframes myanimation { 147 | 0% { 148 | transform: translateY(calc(-40% + 50vh)); 149 | -webkit-transform: translateY(calc(-50% + 50vh)); 150 | } 151 | 25% { 152 | transform: translateY(0%); 153 | -webkit-transform: translateY(0%); 154 | } 155 | 75% { 156 | transform: translateY(calc(-100% + 100vh)); 157 | -webkit-transform: translateY(calc(-100% + 100vh)); 158 | } 159 | 100% { 160 | transform: translateY(calc(-40% + 50vh)); 161 | -webkit-transform: translateY(calc(-50% + 50vh)); 162 | } 163 | } 164 | 165 | 166 | 167 | -------------------------------------------------------------------------------- /hover-btn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | My project 20 | 21 |
22 | 23 | -------------------------------------------------------------------------------- /hover-btn/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | *, 7 | *:before, 8 | *:after { 9 | box-sizing: border-box; 10 | } 11 | 12 | ul, 13 | ol { 14 | list-style: none; 15 | } 16 | 17 | a { 18 | text-decoration: none; 19 | } 20 | 21 | body { 22 | font-family: "Nunito", sans-serif; 23 | font-size: 14px; 24 | line-height: 1.5; 25 | } 26 | 27 | .btn { 28 | display: inline-block; 29 | color: #ffffff; 30 | padding: 32px; 31 | position: relative; 32 | letter-spacing: 1px; 33 | } 34 | .btn__circle, .btn__text, .btn__white-circle { 35 | position: absolute; 36 | } 37 | .btn__circle { 38 | top: 0; 39 | left: 0; 40 | height: 100%; 41 | border-radius: 100%; 42 | width: 100%; 43 | box-shadow: 0 0 1px 1px #fff; 44 | transition: 0.3s linear; 45 | } 46 | .btn__white-circle { 47 | top: 50%; 48 | left: 50%; 49 | transform: translate(-50%, -50%) scale(0); 50 | width: 56px; 51 | height: 56px; 52 | border-radius: 100%; 53 | background: #ffffff; 54 | display: flex; 55 | transition: 0.3s ease-in-out; 56 | } 57 | .btn__white-circle svg { 58 | width: 24px; 59 | height: 24px; 60 | margin: auto; 61 | } 62 | .btn__text { 63 | top: 50%; 64 | transform: translateY(-50%); 65 | white-space: nowrap; 66 | z-index: 2; 67 | padding: 24px 8px; 68 | transition: 0.3s linear; 69 | } 70 | .btn:hover .btn__circle { 71 | transform: scale(0); 72 | } 73 | .btn:hover .btn__white-circle { 74 | transform: translate(-50%, -50%) scale(1); 75 | } 76 | .btn:hover .btn__text { 77 | transform: translate(40px, -50%); 78 | } 79 | 80 | .content { 81 | background: black; 82 | height: 100vh; 83 | width: 100vw; 84 | display: flex; 85 | align-items: center; 86 | justify-content: center; 87 | } -------------------------------------------------------------------------------- /image-hover-transform/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Challanges 8 | 9 | 10 | 11 |
12 |
13 |
15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /image-hover-transform/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background: #000000; 13 | } 14 | 15 | .l-container { 16 | display: grid; 17 | grid-template-columns: repeat(4, 1fr); 18 | grid-gap: 30px; 19 | width: 100%; 20 | max-width: 1200px; 21 | padding: 30px; 22 | } 23 | @media screen and (max-width: 760px) { 24 | .l-container { 25 | grid-template-columns: repeat(2, 1fr); 26 | } 27 | } 28 | 29 | .b-game-card { 30 | position: relative; 31 | z-index: 1; 32 | width: 100%; 33 | padding-bottom: 150%; 34 | perspective: 1000px; 35 | } 36 | .b-game-card__cover { 37 | position: absolute; 38 | z-index: 1; 39 | top: 0; 40 | left: 0; 41 | width: 100%; 42 | height: 100%; 43 | overflow: hidden; 44 | background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); 45 | background-size: cover; 46 | perspective-origin: 50% 50%; 47 | transform-style: preserve-3d; 48 | transform-origin: top center; 49 | will-change: transform; 50 | transform: skewX(0.001deg); 51 | transition: transform 0.35s ease-in-out; 52 | } 53 | .b-game-card__cover::after { 54 | display: block; 55 | content: ""; 56 | position: absolute; 57 | z-index: 100; 58 | top: 0; 59 | left: 0; 60 | width: 100%; 61 | height: 120%; 62 | background: linear-gradient(226deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 0) 60%); 63 | transform: translateY(-20%); 64 | will-change: transform; 65 | transition: transform 0.65s cubic-bezier(0.18, 0.9, 0.58, 1); 66 | } 67 | .b-game-card:hover .b-game-card__cover { 68 | transform: rotateX(7deg) translateY(-6px); 69 | } 70 | .b-game-card:hover .b-game-card__cover::after { 71 | transform: translateY(0%); 72 | } 73 | .b-game-card::before { 74 | display: block; 75 | content: ""; 76 | position: absolute; 77 | top: 5%; 78 | left: 5%; 79 | width: 90%; 80 | height: 90%; 81 | background: rgba(0, 0, 0, 0.5); 82 | box-shadow: 0 6px 12px 12px rgba(0, 0, 0, 0.4); 83 | will-change: opacity; 84 | transform-origin: top center; 85 | transform: skewX(0.001deg); 86 | transition: transform 0.35s ease-in-out, opacity 0.5s ease-in-out; 87 | } 88 | .b-game-card:hover::before { 89 | opacity: 0.6; 90 | transform: rotateX(7deg) translateY(-6px) scale(1.05); 91 | } -------------------------------------------------------------------------------- /image-slider/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaganjavid/100-plus-css-js-code/5dc73c935ad5da3738f5b90f74cf66152485e1f9/image-slider/1.png -------------------------------------------------------------------------------- /image-slider/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaganjavid/100-plus-css-js-code/5dc73c935ad5da3738f5b90f74cf66152485e1f9/image-slider/2.png -------------------------------------------------------------------------------- /image-slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | 13 | 14 | 16 |
17 | 18 | 19 | 31 | 32 | -------------------------------------------------------------------------------- /image-slider/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0; 3 | height:100vh; 4 | display:grid; 5 | place-items:center; 6 | background-color:#1c1c1c; 7 | } 8 | 9 | .wrapper{ 10 | width:400px; 11 | height:250px; 12 | position:relative; 13 | border-radius:10px; 14 | overflow:hidden; 15 | box-shadow:0 10px 20px rgba(0,0,0,0.2); 16 | } 17 | 18 | .wrapper img{ 19 | width:100%; 20 | height:100%; 21 | object-fit:cover; 22 | position:absolute; 23 | } 24 | 25 | .img2{ 26 | clip-path:polygon(0 0,50% 0,50% 100%,0 100%); 27 | } 28 | 29 | .slider{ 30 | -webkit-appearance:none; 31 | position:relative; 32 | width:calc(100% + 20px); 33 | height:100%; 34 | background-color:transparent; 35 | position:absolute; 36 | outline:none; 37 | margin-left:-12px; 38 | } 39 | 40 | .slider::-webkit-slider-thumb{ 41 | -webkit-appearance:none; 42 | cursor:e-resize; 43 | width:30px; 44 | height:30px; 45 | border:3px solid #111; 46 | border-radius:50%; 47 | background-color:rgba(255,255,255,0.6); 48 | } -------------------------------------------------------------------------------- /image-transition/app.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | /* Please ❤ this if you like it! */ 4 | 5 | 6 | 7 | (function($) { "use strict"; 8 | 9 | //Page cursors 10 | 11 | document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) { 12 | t.style.left = n.clientX + "px", 13 | t.style.top = n.clientY + "px", 14 | e.style.left = n.clientX + "px", 15 | e.style.top = n.clientY + "px", 16 | i.style.left = n.clientX + "px", 17 | i.style.top = n.clientY + "px" 18 | }); 19 | var t = document.getElementById("cursor"), 20 | e = document.getElementById("cursor2"), 21 | i = document.getElementById("cursor3"); 22 | function n(t) { 23 | e.classList.add("hover"), i.classList.add("hover") 24 | } 25 | function s(t) { 26 | e.classList.remove("hover"), i.classList.remove("hover") 27 | } 28 | s(); 29 | for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) { 30 | o(r[a]) 31 | } 32 | function o(t) { 33 | t.addEventListener("mouseover", n), t.addEventListener("mouseout", s) 34 | } 35 | 36 | 37 | //Switch light/dark 38 | 39 | $(".switch").on('click', function () { 40 | if ($("body").hasClass("light")) { 41 | $("body").removeClass("light"); 42 | $(".switch").removeClass("switched"); 43 | } 44 | else { 45 | $("body").addClass("light"); 46 | $(".switch").addClass("switched"); 47 | } 48 | }); 49 | 50 | $(document).ready(function() { 51 | 52 | /* Hero Case study images */ 53 | 54 | $('.slide-buttons li:nth-child(1)').on('mouseenter', function() { 55 | $('.slide-buttons li.active').removeClass('active'); 56 | $('.hero-center-section.show').removeClass("show"); 57 | $('.hero-center-section:nth-child(1)').addClass("show"); 58 | $('.slide-buttons li:nth-child(1)').addClass('active'); 59 | }) 60 | $('.slide-buttons li:nth-child(2)').on('mouseenter', function() { 61 | $('.slide-buttons li.active').removeClass('active'); 62 | $('.hero-center-section.show').removeClass("show"); 63 | $('.hero-center-section:nth-child(2)').addClass("show"); 64 | $('.slide-buttons li:nth-child(2)').addClass('active'); 65 | }) 66 | $('.slide-buttons li:nth-child(3)').on('mouseenter', function() { 67 | $('.slide-buttons li.active').removeClass('active'); 68 | $('.hero-center-section.show').removeClass("show"); 69 | $('.hero-center-section:nth-child(3)').addClass("show"); 70 | $('.slide-buttons li:nth-child(3)').addClass('active'); 71 | }) 72 | $('.slide-buttons li:nth-child(4)').on('mouseenter', function() { 73 | $('.slide-buttons li.active').removeClass('active'); 74 | $('.hero-center-section.show').removeClass("show"); 75 | $('.hero-center-section:nth-child(4)').addClass("show"); 76 | $('.slide-buttons li:nth-child(4)').addClass('active'); 77 | }) 78 | $('.slide-buttons li:nth-child(5)').on('mouseenter', function() { 79 | $('.slide-buttons li.active').removeClass('active'); 80 | $('.hero-center-section.show').removeClass("show"); 81 | $('.hero-center-section:nth-child(5)').addClass("show"); 82 | $('.slide-buttons li:nth-child(5)').addClass('active'); 83 | }) 84 | $('.slide-buttons li:nth-child(6)').on('mouseenter', function() { 85 | $('.slide-buttons li.active').removeClass('active'); 86 | $('.hero-center-section.show').removeClass("show"); 87 | $('.hero-center-section:nth-child(6)').addClass("show"); 88 | $('.slide-buttons li:nth-child(6)').addClass('active'); 89 | }) 90 | $('.slide-buttons li:nth-child(1)').trigger('mouseenter') 91 | 92 | }); 93 | 94 | })(jQuery); -------------------------------------------------------------------------------- /image-transition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Media Query 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
Love
17 |
18 |
19 |
20 |
21 | 22 |
23 |
24 |
25 |
26 |
27 | 28 | 29 | 30 |
31 |
travel
32 |
33 |
34 |
35 |
36 | 37 |
38 |
39 |
40 |
41 |
42 |
43 |
fashion
44 |
45 |
46 |
47 |
48 | 49 |
50 |
51 |
52 |
53 |
54 |
55 |
animals
56 |
57 |
58 |
59 |
60 | 61 |
62 |
63 |
64 |
65 |
66 |
67 |
business
68 |
69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 |
77 |
78 | 79 | 80 |
81 | 98 |
99 | 100 | 102 | 103 |
104 |
105 |
106 | 107 | 109 | 110 |
111 |
112 |
113 |
114 |
115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /image-transition/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext'); 2 | 3 | 4 | :root { 5 | --white: #ffffff; 6 | --black: #000000; 7 | --dark-blue: #1f2029; 8 | --dark-light: #424455; 9 | --red: #da2c4d; 10 | --yellow: #f8ab37; 11 | --grey: #ecedf3; 12 | } 13 | 14 | /* #Primary 15 | ================================================== */ 16 | 17 | body{ 18 | width: 100%; 19 | height: 100vh; 20 | background: var(--dark-blue); 21 | overflow-x: hidden; 22 | font-family: 'Poppins', sans-serif; 23 | font-size: 16px; 24 | line-height: 30px; 25 | -webkit-transition: all 300ms linear; 26 | transition: all 300ms linear; 27 | } 28 | p{ 29 | font-family: 'Poppins', sans-serif; 30 | font-size: 16px; 31 | line-height: 30px; 32 | color: var(--white); 33 | -webkit-transition: all 300ms linear; 34 | transition: all 300ms linear; 35 | } 36 | ::selection { 37 | color: var(--white); 38 | background-color: var(--black); 39 | } 40 | ::-moz-selection { 41 | color: var(--white); 42 | background-color: var(--black); 43 | } 44 | mark{ 45 | color: var(--white); 46 | background-color: var(--black); 47 | } 48 | .color-yellow { 49 | color: var(--yellow); 50 | } 51 | .size-18{ 52 | font-size: 18px; 53 | } 54 | .opacity-40{ 55 | opacity: 0.4; 56 | } 57 | .opacity-60{ 58 | opacity: 0.6; 59 | } 60 | .section { 61 | position: relative; 62 | width: 100%; 63 | display: block; 64 | z-index: 30 !important; 65 | } 66 | .over-hide { 67 | overflow: hidden; 68 | } 69 | .padding-top-bottom { 70 | padding-top: 90px; 71 | padding-bottom: 90px; 72 | } 73 | .hero-center-section{ 74 | position: fixed; 75 | top: 50%; 76 | left: 0; 77 | width: 100%; 78 | z-index: 10; 79 | transform: translateY(-50%); 80 | opacity: 0; 81 | -webkit-transition: all 300ms linear; 82 | transition: all 300ms linear; 83 | } 84 | .hero-center-section.show{ 85 | opacity: 1; 86 | } 87 | .hero-center-section .left-text{ 88 | position: absolute; 89 | top: -50%; 90 | left: -20px; 91 | height: 200%; 92 | z-index: 1; 93 | font-family: 'Poppins', sans-serif; 94 | font-weight: 900; 95 | text-align: center; 96 | -webkit-writing-mode: vertical-lr; 97 | writing-mode: vertical-lr; 98 | font-size: 7vw; 99 | line-height: 1; 100 | color: rgba(200,200,200,.1); 101 | background: linear-gradient(90deg, rgba(200,200,200,0), rgba(200,200,200,0.1)); 102 | -webkit-background-clip: text; 103 | -webkit-text-fill-color: transparent; 104 | line-height: 1; 105 | -webkit-transition: all 300ms linear; 106 | transition: all 300ms linear; 107 | } 108 | .hero-center-section.show .left-text{ 109 | left: 0; 110 | } 111 | 112 | .z-bigger { 113 | z-index: 30 !important; 114 | } 115 | 116 | .img-wrap { 117 | position: relative; 118 | width: 100%; 119 | overflow: hidden; 120 | border-radius: 4px; 121 | box-shadow: 0 3px 5px rgba(0, 0, 0, 0.02); 122 | display: block; 123 | transform: scale(1.03); 124 | -webkit-transition: all 300ms linear; 125 | transition: all 300ms linear; 126 | } 127 | .hero-center-section.show .img-wrap{ 128 | transform: scale(1); 129 | } 130 | .img-wrap img { 131 | width: 100%; 132 | height: auto; 133 | display: block; 134 | } 135 | 136 | /* #Cursor 137 | ================================================== */ 138 | .cursor, 139 | .cursor2, 140 | .cursor3{ 141 | position: fixed; 142 | border-radius: 50%; 143 | transform: translateX(-50%) translateY(-50%); 144 | pointer-events: none; 145 | left: -100px; 146 | top: 50%; 147 | mix-blend-mode: difference; 148 | -webkit-transition: all 300ms linear; 149 | transition: all 300ms linear; 150 | z-index: 9999999; 151 | } 152 | .cursor{ 153 | background-color: var(--white); 154 | height: 0; 155 | width: 0; 156 | z-index: 9999999; 157 | } 158 | .cursor2,.cursor3{ 159 | height: 36px; 160 | width: 36px; 161 | z-index:99998; 162 | -webkit-transition:all 0.3s ease-out; 163 | transition:all 0.3s ease-out 164 | } 165 | .cursor2.hover, 166 | .cursor3.hover{ 167 | -webkit-transform:scale(2) 168 | translateX(-25%) translateY(-25%); 169 | transform:scale(2) 170 | translateX(-25%) translateY(-25%); 171 | border:none 172 | } 173 | .cursor2{ 174 | border: 2px solid var(--white); 175 | box-shadow: 0 0 12px 176 | rgba(255, 255, 255, 0.2); 177 | } 178 | .cursor2.hover{ 179 | background: rgba(255,255,255,1); 180 | box-shadow: 0 0 0 181 | rgba(255, 255, 255, 0.2); 182 | } 183 | 184 | .link-to-page { 185 | position: fixed; 186 | top: 30px; 187 | right: 30px; 188 | z-index: 20000; 189 | cursor: pointer; 190 | width: 50px; 191 | } 192 | .link-to-page img{ 193 | width: 100%; 194 | height: auto; 195 | display: block; 196 | } 197 | .slide-buttons{ 198 | position: relative; 199 | padding: 0; 200 | margin: 0 auto; 201 | text-align: center; 202 | width: 580px; 203 | max-width: 100%; 204 | padding-left: 20px; 205 | padding-right: 20px; 206 | list-style: none; 207 | } 208 | .slide-buttons li{ 209 | position: relative; 210 | padding: 0; 211 | margin: 0 auto; 212 | text-align: center; 213 | margin: 60px 0; 214 | display: block; 215 | list-style: none; 216 | -webkit-transition: all 300ms linear; 217 | transition: all 300ms linear; 218 | } 219 | .slide-buttons li a{ 220 | position: relative; 221 | display: inline-block; 222 | font-family: 'Poppins', sans-serif; 223 | font-weight: 900; 224 | font-size: 100px; 225 | line-height: 1; 226 | text-transform: uppercase; 227 | -webkit-text-stroke: 2px var(--white); 228 | text-stroke: 2px var(--white); 229 | -webkit-text-fill-color: transparent; 230 | text-fill-color: transparent; 231 | color: transparent; 232 | opacity: 0.3; 233 | -webkit-transition: all 300ms linear; 234 | transition: all 300ms linear; 235 | } 236 | .slide-buttons li.active a{ 237 | opacity: 1; 238 | } 239 | .slide-buttons li a:hover{ 240 | text-decoration: none; 241 | } 242 | .slide-buttons li a:focus, 243 | .slide-buttons li a:active{ 244 | border: none; 245 | outline: none; 246 | box-shadow: none; 247 | } 248 | .slide-buttons li a::before { 249 | position: absolute; 250 | top: 0; 251 | left: 0; 252 | font-family: 'Poppins', sans-serif; 253 | font-weight: 900; 254 | font-size: 100px; 255 | line-height: 1; 256 | overflow: hidden; 257 | text-transform: uppercase; 258 | padding: 0; 259 | max-height: 0; 260 | -webkit-text-stroke: transparent; 261 | text-stroke: transparent; 262 | -webkit-text-fill-color: var(--white); 263 | text-fill-color: var(--white); 264 | color: var(--white); 265 | content: attr(data-hover); 266 | -webkit-transition: max-height 0.4s; 267 | -moz-transition: max-height 0.4s; 268 | transition: max-height 0.4s; 269 | } 270 | .slide-buttons li.active a::before, 271 | .slide-buttons li a:active::before, 272 | .slide-buttons li a:focus::before { 273 | max-height: 100%; 274 | } 275 | 276 | 277 | .bottom-right{ 278 | position: fixed; 279 | bottom: 50px; 280 | right: 30px; 281 | z-index: 1000; 282 | } 283 | .switch, 284 | .circle { 285 | -webkit-transition: all 300ms linear; 286 | transition: all 300ms linear; 287 | } 288 | .switch { 289 | width: 80px; 290 | height: 4px; 291 | border-radius: 27px; 292 | background-image: linear-gradient(298deg, var(--red), var(--yellow)); 293 | position: relative; 294 | display: block; 295 | margin: 0 auto; 296 | text-align: center; 297 | opacity: 1; 298 | transform: translate(0); 299 | transition: all 300ms linear; 300 | transition-delay: 1900ms; 301 | } 302 | .circle { 303 | cursor: pointer; 304 | position: absolute; 305 | top: 50%; 306 | transform: translateY(-50%); 307 | left: 0; 308 | width: 40px; 309 | height: 40px; 310 | border-radius: 50%; 311 | background: var(--dark-light); 312 | box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07); 313 | } 314 | .circle:hover { 315 | box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07); 316 | } 317 | .circle:before { 318 | position: absolute; 319 | font-family: 'unicons'; 320 | content: '\eac1'; 321 | top: 0; 322 | left: 0; 323 | z-index: 2; 324 | font-size: 20px; 325 | line-height: 40px; 326 | text-align: center; 327 | width: 100%; 328 | height: 40px; 329 | opacity: 1; 330 | color: var(--grey); 331 | -webkit-transition: all 300ms linear; 332 | transition: all 300ms linear; 333 | } 334 | .circle:after { 335 | position: absolute; 336 | font-family: 'unicons'; 337 | content: '\eb8f'; 338 | top: 0; 339 | left: 0; 340 | z-index: 2; 341 | font-size: 20px; 342 | line-height: 40px; 343 | text-align: center; 344 | width: 100%; 345 | height: 40px; 346 | color: var(--yellow); 347 | opacity: 0; 348 | -webkit-transition: all 300ms linear; 349 | transition: all 300ms linear; 350 | } 351 | .switched { 352 | } 353 | .switched .circle { 354 | left: 40px; 355 | box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07); 356 | background: var(--dark); 357 | } 358 | .switched .circle:hover { 359 | box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07); 360 | } 361 | .switched .circle:before { 362 | opacity: 0; 363 | } 364 | .switched .circle:after { 365 | opacity: 1; 366 | } 367 | body.light{ 368 | background: var(--white); 369 | } 370 | body.light p{ 371 | color: var(--dark-blue); 372 | } 373 | body.light h3{ 374 | color: var(--dark); 375 | } 376 | body.light .cursor, 377 | body.light .cursor2, 378 | body.light .cursor3{ 379 | mix-blend-mode: difference; 380 | z-index: 9999999 !important; 381 | } 382 | body.light .cursor.hover, 383 | body.light .cursor2.hover, 384 | body.light .cursor3.hover{ 385 | } 386 | body.light .cursor{ 387 | background-color: var(--dark-blue); 388 | } 389 | body.light .cursor2{ 390 | height: 16px; 391 | width: 16px; 392 | background-color: var(--dark-blue); 393 | box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); 394 | mix-blend-mode: difference; 395 | border-color: transparent; 396 | } 397 | body.light .cursor.hover, 398 | body.light .cursor2.hover, 399 | body.light .cursor3.hover{ 400 | opacity: 0; 401 | } 402 | body.light .cursor2.hover{ 403 | background: rgba(0,0,0,1); 404 | box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); 405 | } 406 | body.light .slide-buttons li a{ 407 | -webkit-text-stroke: 2px var(--dark-blue); 408 | text-stroke: 2px var(--dark-blue); 409 | -webkit-text-fill-color: transparent; 410 | text-fill-color: transparent; 411 | color: transparent; 412 | opacity: 1; 413 | } 414 | body.light .slide-buttons li a::before { 415 | -webkit-text-stroke: transparent; 416 | text-stroke: transparent; 417 | -webkit-text-fill-color: var(--dark-blue); 418 | text-fill-color: var(--dark-blue); 419 | color: var(--dark-blue); 420 | } 421 | body.light .hero-center-section.show{ 422 | margit-top: 0; 423 | opacity: 0.9; 424 | } 425 | body.light .hero-center-section .left-text{ 426 | color: rgba(0,0,0,.16); 427 | background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.16)); 428 | -webkit-background-clip: text; 429 | -webkit-text-fill-color: transparent; 430 | } 431 | 432 | /* #Media 433 | ================================================== */ 434 | 435 | 436 | @media (max-width: 1199px) { 437 | .hero-center-section .left-text{ 438 | font-size: 13vw; 439 | } 440 | .slide-buttons li{ 441 | margin: 50px 0; 442 | } 443 | .slide-buttons li a{ 444 | font-size: 80px; 445 | } 446 | .slide-buttons li a::before { 447 | font-size: 80px; 448 | } 449 | } 450 | 451 | @media (max-width: 991px) { 452 | .hero-center-section .left-text{ 453 | font-size: 16vw; 454 | } 455 | } 456 | 457 | @media (max-width: 767px) { 458 | .cursor, 459 | .cursor2, 460 | .cursor3{ 461 | display: none; 462 | } 463 | .hero-center-section .left-text{ 464 | display: none; 465 | } 466 | .slide-buttons li{ 467 | margin: 40px 0; 468 | } 469 | .slide-buttons li a{ 470 | font-size: 60px; 471 | font-weight: 700; 472 | } 473 | .slide-buttons li a::before { 474 | font-size: 60px; 475 | font-weight: 700; 476 | } 477 | } 478 | 479 | @media (max-width: 575px) { 480 | .slide-buttons li a{ 481 | font-size: 50px; 482 | font-weight: 700; 483 | } 484 | .slide-buttons li a::before { 485 | font-size: 50px; 486 | font-weight: 700; 487 | } 488 | } -------------------------------------------------------------------------------- /images-slider/app.js: -------------------------------------------------------------------------------- 1 | $(".custom-carousel").owlCarousel({ 2 | autoWidth: true, 3 | loop: true 4 | }); 5 | $(document).ready(function () { 6 | $(".custom-carousel .item").click(function () { 7 | $(".custom-carousel .item").not($(this)).removeClass("active"); 8 | $(this).toggleClass("active"); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /images-slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Challanges 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |

Blissful

17 |

Blissful is a multiplayer online battle arena by Valve. The game is a sequel to Defense of the 18 | Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.

19 |
20 |
21 |
22 |
23 |

Delighted

24 |

Delighted is a multiplayer online battle arena by Valve. The game is a sequel to Defense 25 | of the Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.

26 |
27 |
28 |
29 |
30 |

Joyful

31 |

Joyful is a multiplayer online battle arena by Valve. The game is a sequel to Defense of the 32 | Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.

33 |
34 |
35 |
36 |
37 |

Joyous

38 |

Joyous is a multiplayer online battle arena by Valve. The game is a sequel to Defense of the 39 | Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.

40 |
41 |
42 |
43 |
44 |

Jubilant

45 |

Jubilant royale where 100 players fight to be the last person standing. which was a community-created mod 46 | for Blizzard Entertainment's Warcraft III.

47 |
48 |
49 |
50 |
51 |

Tickled

52 |

Tickled is a 2018 first-person shooter game developed by Ubisoft. 53 | which was a community-created mod for Blizzard Entertainment's Warcraft III.

54 |
55 |
56 |
57 | 58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /images-slider/style.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /******* Fonts Import Start **********/ 4 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); 5 | /********* Fonts Face CSS End **********/ 6 | 7 | /******* Common Element CSS Start ******/ 8 | * { 9 | margin: 0px; 10 | padding: 0px; 11 | } 12 | body { 13 | font-family: "Roboto", sans-serif; 14 | font-size: 16px; 15 | } 16 | .clear { 17 | clear: both; 18 | } 19 | img { 20 | max-width: 100%; 21 | border: 0px; 22 | } 23 | ul, 24 | ol { 25 | list-style: none; 26 | } 27 | a { 28 | text-decoration: none; 29 | color: inherit; 30 | outline: none; 31 | transition: all 0.4s ease-in-out; 32 | -webkit-transition: all 0.4s ease-in-out; 33 | } 34 | a:focus, 35 | a:active, 36 | a:visited, 37 | a:hover { 38 | text-decoration: none; 39 | outline: none; 40 | } 41 | a:hover { 42 | color: #e73700; 43 | } 44 | h2 { 45 | margin-bottom: 48px; 46 | padding-bottom: 16px; 47 | font-size: 20px; 48 | line-height: 28px; 49 | font-weight: 700; 50 | position: relative; 51 | text-transform: capitalize; 52 | } 53 | h3 { 54 | margin: 0 0 10px; 55 | font-size: 28px; 56 | line-height: 36px; 57 | } 58 | /******* Common Element CSS End *********/ 59 | 60 | /* -------- title style ------- */ 61 | .line-title { 62 | position: relative; 63 | width: 400px; 64 | } 65 | .line-title::before, 66 | .line-title::after { 67 | content: ""; 68 | position: absolute; 69 | bottom: 0; 70 | left: 0; 71 | height: 4px; 72 | border-radius: 2px; 73 | } 74 | .line-title::before { 75 | width: 100%; 76 | background: #f2f2f2; 77 | } 78 | .line-title::after { 79 | width: 32px; 80 | background: #e73700; 81 | } 82 | 83 | /******* Middle section CSS Start ******/ 84 | /* -------- Landing page ------- */ 85 | .game-section { 86 | padding: 60px 50px; 87 | } 88 | .game-section .owl-stage { 89 | margin: 15px 0; 90 | display: flex; 91 | display: -webkit-flex; 92 | } 93 | .game-section .item { 94 | margin: 0 15px 60px; 95 | width: 320px; 96 | height: 400px; 97 | display: flex; 98 | display: -webkit-flex; 99 | align-items: flex-end; 100 | -webkit-align-items: flex-end; 101 | background: #343434 no-repeat center center / cover; 102 | border-radius: 16px; 103 | overflow: hidden; 104 | position: relative; 105 | transition: all 0.4s ease-in-out; 106 | -webkit-transition: all 0.4s ease-in-out; 107 | cursor: pointer; 108 | } 109 | .game-section .item.active { 110 | width: 500px; 111 | box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25); 112 | -webkit-box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25); 113 | } 114 | .game-section .item:after { 115 | content: ""; 116 | display: block; 117 | position: absolute; 118 | height: 100%; 119 | width: 100%; 120 | left: 0; 121 | top: 0; 122 | background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); 123 | } 124 | .game-section .item-desc { 125 | padding: 0 24px 12px; 126 | color: #fff; 127 | position: relative; 128 | z-index: 1; 129 | overflow: hidden; 130 | transform: translateY(calc(100% - 54px)); 131 | -webkit-transform: translateY(calc(100% - 54px)); 132 | transition: all 0.4s ease-in-out; 133 | -webkit-transition: all 0.4s ease-in-out; 134 | } 135 | .game-section .item.active .item-desc { 136 | transform: none; 137 | -webkit-transform: none; 138 | } 139 | .game-section .item-desc p { 140 | opacity: 0; 141 | -webkit-transform: translateY(32px); 142 | transform: translateY(32px); 143 | transition: all 0.4s ease-in-out 0.2s; 144 | -webkit-transition: all 0.4s ease-in-out 0.2s; 145 | } 146 | .game-section .item.active .item-desc p { 147 | opacity: 1; 148 | -webkit-transform: translateY(0); 149 | transform: translateY(0); 150 | } 151 | .game-section .owl-theme.custom-carousel .owl-dots { 152 | margin-top: -20px; 153 | position: relative; 154 | z-index: 5; 155 | } 156 | /******** Middle section CSS End *******/ 157 | 158 | /***** responsive css Start ******/ 159 | 160 | @media (min-width: 992px) and (max-width: 1199px) { 161 | h2 { 162 | margin-bottom: 32px; 163 | } 164 | h3 { 165 | margin: 0 0 8px; 166 | font-size: 24px; 167 | line-height: 32px; 168 | } 169 | 170 | /* -------- Landing page ------- */ 171 | .game-section { 172 | padding: 50px 30px; 173 | } 174 | .game-section .item { 175 | margin: 0 12px 60px; 176 | width: 260px; 177 | height: 360px; 178 | } 179 | .game-section .item.active { 180 | width: 400px; 181 | } 182 | .game-section .item-desc { 183 | transform: translateY(calc(100% - 46px)); 184 | -webkit-transform: translateY(calc(100% - 46px)); 185 | } 186 | } 187 | 188 | @media (min-width: 768px) and (max-width: 991px) { 189 | h2 { 190 | margin-bottom: 32px; 191 | } 192 | h3 { 193 | margin: 0 0 8px; 194 | font-size: 24px; 195 | line-height: 32px; 196 | } 197 | .line-title { 198 | width: 330px; 199 | } 200 | 201 | /* -------- Landing page ------- */ 202 | .game-section { 203 | padding: 50px 30px 40px; 204 | } 205 | .game-section .item { 206 | margin: 0 12px 60px; 207 | width: 240px; 208 | height: 330px; 209 | } 210 | .game-section .item.active { 211 | width: 360px; 212 | } 213 | .game-section .item-desc { 214 | transform: translateY(calc(100% - 42px)); 215 | -webkit-transform: translateY(calc(100% - 42px)); 216 | } 217 | } 218 | 219 | @media (max-width: 767px) { 220 | body { 221 | font-size: 14px; 222 | } 223 | h2 { 224 | margin-bottom: 20px; 225 | } 226 | h3 { 227 | margin: 0 0 8px; 228 | font-size: 19px; 229 | line-height: 24px; 230 | } 231 | .line-title { 232 | width: 250px; 233 | } 234 | 235 | /* -------- Landing page ------- */ 236 | .game-section { 237 | padding: 30px 15px 20px; 238 | } 239 | .game-section .item { 240 | margin: 0 10px 40px; 241 | width: 200px; 242 | height: 280px; 243 | } 244 | .game-section .item.active { 245 | width: 270px; 246 | box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25); 247 | -webkit-box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25); 248 | } 249 | .game-section .item-desc { 250 | padding: 0 14px 5px; 251 | transform: translateY(calc(100% - 42px)); 252 | -webkit-transform: translateY(calc(100% - 42px)); 253 | } 254 | } 255 | -------------------------------------------------------------------------------- /mouse-move-icons-animation/app.js: -------------------------------------------------------------------------------- 1 | let pointer = document. 2 | querySelectorAll(".pointer") 3 | 4 | document.addEventListener 5 | ("mousemove", mouseMove) 6 | 7 | function mouseMove(e){ 8 | let x = e.clientX 9 | let y = e.clientY 10 | pointer.forEach(function(cursor){ 11 | cursor.style.left = x + "px" 12 | cursor.style.top = y + "px" 13 | }) 14 | } -------------------------------------------------------------------------------- /mouse-move-icons-animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Mouse Animation 8 | 9 | 10 | 11 |
12 |
13 |
☺
14 |
☻
15 |
♥
16 |
♦
17 |
♣
18 |
19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /mouse-move-icons-animation/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #111111; 3 | } 4 | .pointer{ 5 | position:absolute; 6 | top:50%; 7 | left:50%; 8 | color:#00ff2f; 9 | font-size:40px; 10 | user-select:none; 11 | transform:translate(-50%, -50%); 12 | width:40px; 13 | height:40px; 14 | pointer-events: none; 15 | box-sizing:border-box; 16 | transition:0.2s; 17 | } 18 | 19 | .pointer1{ 20 | transition:0.05s; 21 | } 22 | .pointer2{ 23 | transition:0.1s; 24 | } 25 | .pointer3{ 26 | transition:0.15s; 27 | } 28 | .pointer4{ 29 | transition:0.2s; 30 | } 31 | .pointer5{ 32 | transition:0.25s; 33 | } -------------------------------------------------------------------------------- /simple-svg-animation/app.js: -------------------------------------------------------------------------------- 1 | 2 | "use strict"; 3 | 4 | const body = document.body; 5 | const bgColorsBody = ["#1d1d27", "#ff96bd", "#9999fb"]; 6 | const menu = body.querySelector(".menu"); 7 | const menuItems = menu.querySelectorAll(".menu__item"); 8 | const menuBorder = menu.querySelector(".menu__border"); 9 | let activeItem = menu.querySelector(".active"); 10 | 11 | function clickItem(item, index) { 12 | menu.style.removeProperty("--timeOut"); 13 | 14 | if (activeItem == item) return; 15 | 16 | if (activeItem) { 17 | activeItem.classList.remove("active"); 18 | } 19 | 20 | 21 | item.classList.add("active"); 22 | body.style.backgroundColor = bgColorsBody[index]; 23 | activeItem = item; 24 | offsetMenuBorder(activeItem, menuBorder); 25 | 26 | } 27 | 28 | function offsetMenuBorder(element, menuBorder) { 29 | 30 | const offsetActiveItem = element.getBoundingClientRect(); 31 | const left = Math.floor(offsetActiveItem.left - 32 | menu.offsetLeft - (menuBorder.offsetWidth 33 | - offsetActiveItem.width) / 2) + "px"; 34 | menuBorder.style.transform = `translate3d(${left}, 0 , 0)`; 35 | 36 | } 37 | 38 | offsetMenuBorder(activeItem, menuBorder); 39 | 40 | menuItems.forEach((item, index) => { 41 | item.addEventListener 42 | ("click", () => clickItem(item, index)); 43 | }) 44 | 45 | window.addEventListener("resize", () => { 46 | offsetMenuBorder(activeItem, menuBorder); 47 | menu.style.setProperty("--timeOut", "none"); 48 | }); -------------------------------------------------------------------------------- /simple-svg-animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Svg Animation 8 | 9 | 10 | 11 | 12 | 13 | 20 | 21 | 28 | 29 | 36 | 37 |
38 | 39 | 40 | 41 |
42 | 43 | 44 | 47 | 48 | 49 |
50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /simple-svg-animation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Volkhov:wght@400;700&display=swap'); 2 | html { 3 | 4 | box-sizing: border-box; 5 | --bgColorMenu : #1d1d27; 6 | --duration: .7s; 7 | 8 | } 9 | 10 | html *, 11 | html *::before, 12 | html *::after { 13 | 14 | box-sizing: inherit; 15 | 16 | } 17 | 18 | body{ 19 | 20 | margin: 0; 21 | display: flex; 22 | height: 100vh; 23 | flex-direction: column; 24 | align-items: center; 25 | justify-content: center; 26 | background-color: #ffb457; 27 | -webkit-tap-highlight-color: transparent; 28 | transition: background-color var(--duration); 29 | font-family: 'Poppins', sans-serif; 30 | 31 | } 32 | 33 | .menu{ 34 | 35 | margin: 0; 36 | display: flex; 37 | /* Works well with 100% width */ 38 | width: 32.05em; 39 | font-size: 1.5em; 40 | padding: 0 2.85em; 41 | position: relative; 42 | align-items: center; 43 | justify-content: center; 44 | background-color: var(--bgColorMenu); 45 | 46 | } 47 | 48 | h2{ 49 | font-size: 20px; 50 | color: #ffffff; 51 | } 52 | 53 | .small{ 54 | font-size: 14px; 55 | font-weight: 500; 56 | color: #ffffff; 57 | } 58 | 59 | 60 | .menu__item{ 61 | 62 | all: unset; 63 | flex-grow: 1; 64 | z-index: 100; 65 | display: flex; 66 | cursor: pointer; 67 | position: relative; 68 | border-radius: 50%; 69 | align-items: center; 70 | will-change: transform; 71 | justify-content: center; 72 | padding: 0.55em 0 0.85em; 73 | transition: transform var(--timeOut , var(--duration)); 74 | 75 | } 76 | 77 | .menu__item::before{ 78 | 79 | content: ""; 80 | z-index: -1; 81 | width: 4.2em; 82 | height: 4.2em; 83 | border-radius: 50%; 84 | position: absolute; 85 | transform: scale(0); 86 | transition: background-color var(--duration), transform var(--duration); 87 | 88 | } 89 | 90 | 91 | .menu__item.active { 92 | 93 | transform: translate3d(0, -.8em , 0); 94 | 95 | } 96 | 97 | .menu__item.active::before{ 98 | 99 | transform: scale(1); 100 | background-color: var(--bgColorItem); 101 | 102 | } 103 | 104 | .icon{ 105 | 106 | width: 2.6em; 107 | height: 2.6em; 108 | stroke: white; 109 | fill: transparent; 110 | stroke-width: 1pt; 111 | stroke-miterlimit: 10; 112 | stroke-linecap: round; 113 | stroke-linejoin: round; 114 | stroke-dasharray: 400; 115 | 116 | } 117 | 118 | .menu__item.active .icon { 119 | 120 | animation: strok 1.5s reverse; 121 | 122 | } 123 | 124 | @keyframes strok { 125 | 126 | 100% { 127 | 128 | stroke-dashoffset: 400; 129 | 130 | } 131 | 132 | } 133 | 134 | .menu__border{ 135 | 136 | left: 0; 137 | bottom: 99%; 138 | width: 10.9em; 139 | height: 2.4em; 140 | position: absolute; 141 | clip-path: url(#menu); 142 | will-change: transform; 143 | background-color: var(--bgColorMenu); 144 | transition: transform var(--timeOut , var(--duration)); 145 | 146 | } 147 | 148 | .svg-container { 149 | 150 | width: 0; 151 | height: 0; 152 | } 153 | 154 | 155 | @media screen and (max-width: 50em) { 156 | .menu{ 157 | font-size: .8em; 158 | } 159 | } -------------------------------------------------------------------------------- /svg-hover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 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 | -------------------------------------------------------------------------------- /svg-hover/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | :before, 3 | :after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | background-color: #222; 9 | color: white; 10 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 11 | } 12 | 13 | @-webkit-keyframes fadeInScale { 14 | 0% { 15 | opacity: 0; 16 | transform: scale(0) translateY(50%); 17 | } 18 | 90% { 19 | transform: scale(1.05); 20 | } 21 | 100% { 22 | opacity: 1; 23 | transform: scale(1) translateY(0); 24 | } 25 | } 26 | 27 | @keyframes fadeInScale { 28 | 0% { 29 | opacity: 0; 30 | transform: scale(0) translateY(50%); 31 | } 32 | 90% { 33 | transform: scale(1.05); 34 | } 35 | 100% { 36 | opacity: 1; 37 | transform: scale(1) translateY(0); 38 | } 39 | } 40 | .container { 41 | position: absolute; 42 | width: 100%; 43 | height: 100%; 44 | display: flex; 45 | justify-content: center; 46 | align-items: center; 47 | } 48 | 49 | .card { 50 | position: relative; 51 | width: 20em; 52 | background-color: #292929; 53 | transition: all 0.3s ease-in-out; 54 | } 55 | .card:hover { 56 | box-shadow: 0 10px 20px 10px 57 | rgba(0, 0, 0, 0.2); 58 | } 59 | 60 | .card__link { 61 | display: block; 62 | padding: 1em; 63 | text-decoration: none; 64 | } 65 | 66 | .card__icon { 67 | position: absolute; 68 | width: 4em; 69 | height: 4em; 70 | transition: all 0.3s ease-in-out; 71 | } 72 | .card:hover .card__icon { 73 | opacity: 0; 74 | transform: scale(0); 75 | } 76 | 77 | .card__media { 78 | padding: 2em 0; 79 | } 80 | .card__media svg path { 81 | opacity: 0; 82 | transition: all 0.3s ease-in-out; 83 | transform-origin: center center; 84 | } 85 | .card:hover .card__media svg path { 86 | -webkit-animation: fadeInScale 87 | 0.3s ease-in-out forwards; 88 | animation: fadeInScale 89 | 0.3s ease-in-out forwards; 90 | } 91 | .card:hover .card__media 92 | svg path:nth-child(2) { 93 | -webkit-animation-delay: 0.1s; 94 | animation-delay: 0.1s; 95 | } 96 | .card:hover .card__media 97 | svg path:nth-child(3) { 98 | -webkit-animation-delay: 0.2s; 99 | animation-delay: 0.2s; 100 | } 101 | 102 | -------------------------------------------------------------------------------- /tab-animation/app.js: -------------------------------------------------------------------------------- 1 | let tabs = document.querySelectorAll(".tab"); 2 | let overlay = document.querySelector(".overlay"); 3 | 4 | let firstActive = document.querySelector(".tab-is-active"); 5 | let activeColor = getComputedStyle(firstActive).background; 6 | overlay.style.background = activeColor; 7 | document.body.style.background = activeColor; 8 | 9 | tabs.forEach((tab) => { 10 | tab.addEventListener("click", function () { 11 | let tl = new TimelineLite(); 12 | 13 | let accentColor = getComputedStyle(this).background; 14 | this.children[0].style.borderColor = accentColor; 15 | if (!this.classList.contains("tab-is-active")) { 16 | tl.fromTo( 17 | this.children[0], 18 | 0.1, 19 | { scale: 0, opacity: 1 }, 20 | { scale: 3, opacity: 0 }, 21 | "0" 22 | ); 23 | overlay.style.background = accentColor; 24 | tl.fromTo( 25 | overlay, 26 | 1, 27 | { scale: 0, opacity: 0 }, 28 | { scale: 1, opacity: 1 }, 29 | "0" 30 | ); 31 | } 32 | tabs.forEach((tab) => { 33 | tab.classList.remove("tab-is-active"); 34 | this.classList.add("tab-is-active"); 35 | }); 36 | }); 37 | }); -------------------------------------------------------------------------------- /tab-animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tab Animation 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 | 52 |
53 | 54 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /tab-animation/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&subset=cyrillic"); 2 | 3 | body { 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | height: 100vh; 8 | width: 100%; 9 | transition: 0.5s; 10 | overflow: hidden; 11 | } 12 | 13 | .overlay { 14 | height: 200vw; 15 | width: 200vw; 16 | border-radius: 50%; 17 | background-color: #000; 18 | position: absolute; 19 | top: 50%; 20 | left: 50%; 21 | transform: translate(-50%, -50%); 22 | } 23 | 24 | .nav { 25 | background-color: #fff; 26 | padding: 12px 5px; 27 | border-radius: 15px; 28 | box-shadow: 3px 3px 15px rgba(179, 179, 179, 0.185); 29 | position: relative; 30 | z-index: 99; 31 | } 32 | 33 | .tabs { 34 | display: flex; 35 | width: 490px; 36 | justify-content: space-around; 37 | list-style-type: none; 38 | } 39 | 40 | .tab { 41 | padding: 12px 22px; 42 | background-color: #e0efff; 43 | color: #58a6ff; 44 | margin-right: 15px; 45 | border-radius: 55px; 46 | text-align: center; 47 | white-space: nowrap; 48 | transition: 0.3s ease; 49 | overflow: hidden; 50 | max-width: 0px; 51 | cursor: pointer; 52 | position: relative; 53 | flex-basis: 120px; 54 | } 55 | 56 | .tab-is-active { 57 | max-width: 100px; 58 | box-shadow: 7px 7px 15px rgba(124, 124, 124, 0.096); 59 | } 60 | 61 | .tab-is-active .tab-name { 62 | opacity: 1; 63 | } 64 | 65 | .tab-circle { 66 | position: absolute; 67 | height: 20px; 68 | width: 20px; 69 | border-radius: 50%; 70 | border: 2px solid #95c5fd; 71 | z-index: 10; 72 | opacity: 0; 73 | left: 30px; 74 | pointer-events: none; 75 | } 76 | 77 | .tab-icon { 78 | margin-right: 1px; 79 | font-size: 18px; 80 | vertical-align: middle; 81 | position: relative; 82 | right: 6.7px; 83 | top: -1px; 84 | } 85 | 86 | .tab-name { 87 | font-family: "Ubuntu", sans-serif; 88 | font-size: 15px; 89 | font-weight: 500; 90 | position: relative; 91 | transition: 0.3s ease; 92 | top: 1px; 93 | opacity: 0; 94 | } 95 | 96 | .tab-bookmark { 97 | background: #3330E4; 98 | color: #ffffff; 99 | } 100 | 101 | .tab-burn { 102 | background: #F637EC; 103 | color: #ffffff; 104 | } 105 | 106 | 107 | .tab-clipboard { 108 | background: #FFC600; 109 | color: #ffffff; 110 | } 111 | 112 | .tab-comment { 113 | background: #3EC70B; 114 | color: #ffffff; 115 | } 116 | .tab-bell { 117 | background: #FF5403; 118 | color: #ffffff; 119 | } --------------------------------------------------------------------------------