├── .gitignore ├── README.md ├── css ├── demo.css └── normalize.css ├── favicon.ico ├── img ├── related │ ├── AnimatedGridLayout.jpg │ ├── ImageGridEffects.jpg │ ├── IsometricGrids.png │ └── LoadingEffectsGridItems.jpg ├── set1 │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 7.png │ ├── 8.jpg │ └── 9.jpg ├── set2 │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ └── 8.jpg └── set3 │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── index.html ├── js ├── anime.min.js ├── imagesloaded.pkgd.min.js ├── main.js └── masonry.pkgd.min.js └── sponsor ├── FullStory.jpg └── pater.css /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Grid Loading Animations 2 | 3 | Some inspiration for loading effects on grid items. 4 | 5 | [Article on Codrops](https://tympanus.net/codrops/?p=30656) 6 | 7 | [Demo](http://tympanus.net/Development/GridLoadingAnimations/) 8 | 9 | This demo is kindly sponsored by [FullStory](http://synd.co/2oQTgFH). 10 | 11 | If you would like to become a demo sponsor, you can find out more [here](https://tympanus.net/codrops/advertise/#advertise_demo) 12 | 13 | ## Credits 14 | 15 | * [Masonry](http://masonry.desandro.com/) by Dave DeSandro 16 | * [anime.js](http://anime-js.com/) by Julian Garnier 17 | * Images from [Unsplash.com](https://unsplash.com/) and [Pexels.com](https://www.pexels.com/) licensed under [Creative Commons Zero](https://creativecommons.org/publicdomain/zero/1.0/) (CC0) license 18 | 19 | ## License 20 | This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used. 21 | 22 | ## Misc 23 | 24 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/) 25 | 26 | [© Codrops 2017](http://www.codrops.com) 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | -webkit-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: 'Roboto Mono', monospace; 10 | font-size: 14px; 11 | font-weight: 500; 12 | color: #82888a; 13 | background: #2c2d31; 14 | overflow-x: hidden; 15 | -webkit-font-smoothing: antialiased; 16 | } 17 | 18 | .js .loading::before, 19 | .js .loading::after { 20 | content: ''; 21 | position: fixed; 22 | z-index: 1000; 23 | } 24 | 25 | .loading::before { 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 100%; 30 | background: #2c2d31; 31 | } 32 | 33 | .loading::after { 34 | top: 50%; 35 | left: 50%; 36 | width: 40px; 37 | height: 40px; 38 | margin: -20px 0 0 -20px; 39 | border: 8px solid #383a41; 40 | border-bottom-color: #565963; 41 | border-radius: 50%; 42 | animation: animLoader 0.8s linear infinite forwards; 43 | } 44 | 45 | @keyframes animLoader { 46 | to { transform: rotate(360deg); } 47 | } 48 | 49 | a { 50 | text-decoration: none; 51 | color: #f2f2f2; 52 | outline: none; 53 | } 54 | 55 | a:hover, 56 | a:focus { 57 | color: #e6629a; 58 | } 59 | 60 | .hidden { 61 | position: absolute; 62 | overflow: hidden; 63 | width: 0; 64 | height: 0; 65 | pointer-events: none; 66 | } 67 | 68 | main { 69 | display: flex; 70 | flex-wrap: wrap; 71 | } 72 | 73 | /* Icons */ 74 | .icon { 75 | display: block; 76 | width: 1.5em; 77 | height: 1.5em; 78 | margin: 0 auto; 79 | fill: currentColor; 80 | } 81 | 82 | .content--side { 83 | position: relative; 84 | z-index: 100; 85 | width: 15vw; 86 | min-width: 130px; 87 | max-height: 100vh; 88 | padding: 0 1em; 89 | order: 2; 90 | } 91 | 92 | .content--center { 93 | flex: 1; 94 | max-width: calc(100vw - 260px); 95 | order: 3; 96 | } 97 | 98 | .content--right { 99 | order: 4; 100 | } 101 | 102 | .content--related { 103 | display: flex; 104 | flex-wrap: wrap; 105 | justify-content: center; 106 | width: 100%; 107 | padding: 8em 1em 3em; 108 | text-align: center; 109 | order: 5; 110 | } 111 | 112 | .media-related { 113 | width: 100%; 114 | } 115 | 116 | .media-item { 117 | padding: 1em; 118 | } 119 | 120 | .media-item__img { 121 | max-width: 100%; 122 | opacity: 0.7; 123 | transition: opacity 0.3s; 124 | } 125 | 126 | .media-item:hover .media-item__img, 127 | .media-item:focus .media-item__img { 128 | opacity: 1; 129 | } 130 | 131 | .media-item__title { 132 | font-size: 1em; 133 | max-width: 220px; 134 | padding: 0.5em; 135 | margin: 0 auto; 136 | } 137 | 138 | /* Header */ 139 | .codrops-header { 140 | position: relative; 141 | z-index: 100; 142 | display: flex; 143 | align-items: center; 144 | width: 100%; 145 | padding: 3em 1em 4em; 146 | order: 1; 147 | } 148 | 149 | .codrops-header__title { 150 | font-size: 1em; 151 | font-weight: normal; 152 | flex: 1; 153 | margin: 0 7em 0 0; 154 | text-align: center; 155 | text-transform: lowercase; 156 | } 157 | 158 | .codrops-header__title::before, 159 | .codrops-header__title::after { 160 | font-size: 22px; 161 | font-weight: bold; 162 | display: inline-block; 163 | padding: 0 0.25em; 164 | color: #42454c; 165 | } 166 | 167 | .codrops-header__title::after { 168 | content: '\2309'; 169 | vertical-align: sub; 170 | } 171 | 172 | .codrops-header__title::before { 173 | content: '\230A'; 174 | } 175 | 176 | /* GitHub corner */ 177 | .github-corner { 178 | position: absolute; 179 | top: 0; 180 | right: 0; 181 | } 182 | 183 | .github-corner__svg { 184 | fill: #82888a; 185 | color: #2c2d31; 186 | position: absolute; 187 | top: 0; 188 | border: 0; 189 | right: 0; 190 | } 191 | 192 | .github-corner:hover .octo-arm { 193 | animation: octocat-wave 560ms ease-in-out; 194 | } 195 | 196 | @keyframes octocat-wave { 197 | 0%, 198 | 100% { 199 | transform: rotate(0); 200 | } 201 | 20%, 202 | 60% { 203 | transform: rotate(-25deg); 204 | } 205 | 40%, 206 | 80% { 207 | transform: rotate(10deg); 208 | } 209 | } 210 | 211 | @media (max-width:500px) { 212 | .github-corner:hover .octo-arm { 213 | animation: none; 214 | } 215 | .github-corner .octo-arm { 216 | animation: octocat-wave 560ms ease-in-out; 217 | } 218 | } 219 | 220 | 221 | /* Top Navigation Style */ 222 | .codrops-links { 223 | position: relative; 224 | display: flex; 225 | justify-content: space-between; 226 | align-items: center; 227 | height: 2.75em; 228 | margin: 0 0 0 2.25em; 229 | text-align: center; 230 | white-space: nowrap; 231 | background: #1f2125; 232 | } 233 | 234 | .codrops-links::after { 235 | content: ''; 236 | position: absolute; 237 | top: -10%; 238 | left: calc(50% - 1px); 239 | width: 2px; 240 | height: 120%; 241 | background: #2c2d31; 242 | transform: rotate3d(0,0,1,22.5deg); 243 | } 244 | 245 | .codrops-icon { 246 | display: inline-block; 247 | padding: 0 0.65em; 248 | } 249 | 250 | /* Controls */ 251 | .control--grids { 252 | margin: 0 0 2.5em; 253 | text-align: right; 254 | } 255 | 256 | .control__title { 257 | font-size: 0.85em; 258 | display: block; 259 | width: 100%; 260 | margin: 0 0 1em; 261 | color: #e6629a; 262 | } 263 | 264 | .control__item { 265 | position: relative; 266 | display: block; 267 | margin: 0 0 0.5em; 268 | } 269 | 270 | .control__radio { 271 | position: absolute; 272 | z-index: 10; 273 | top: 0; 274 | left: 0; 275 | width: 100%; 276 | height: 100%; 277 | cursor: pointer; 278 | opacity: 0; 279 | } 280 | 281 | .control__label { 282 | white-space: nowrap; 283 | } 284 | 285 | .control__radio:checked + .control__label { 286 | color: #fff; 287 | background: #673ab7; 288 | } 289 | 290 | .control__radio:not(:checked):hover + .control__label, 291 | .control__btn:hover { 292 | color: white; 293 | } 294 | 295 | .control__btn { 296 | display: block; 297 | width: 100%; 298 | margin: 0 0 0.5em; 299 | padding: 0; 300 | text-align: left; 301 | color: inherit; 302 | border: none; 303 | background: none; 304 | } 305 | 306 | .control__btn:focus { 307 | outline: none; 308 | } 309 | 310 | /* Grid */ 311 | 312 | .grid { 313 | position: relative; 314 | z-index: 2; 315 | display: block; 316 | margin: 0 auto; 317 | } 318 | 319 | .grid--hidden { 320 | position: fixed !important; 321 | z-index: 1; 322 | top: 0; 323 | left: 0; 324 | width: 100%; 325 | pointer-events: none; 326 | opacity: 0; 327 | } 328 | 329 | .js .grid--loading::before, 330 | .js .grid--loading::after { 331 | content: ''; 332 | z-index: 1000; 333 | } 334 | 335 | .js .grid--loading::before { 336 | position: fixed; 337 | top: 0; 338 | left: 0; 339 | width: 100vw; 340 | height: 100vh; 341 | background: #2c2d31; 342 | } 343 | 344 | .js .grid--loading::after { 345 | position: absolute; 346 | top: calc(25vh - 20px); 347 | left: 50%; 348 | width: 40px; 349 | height: 40px; 350 | margin: 0 0 0 -20px; 351 | border: 8px solid #383a41; 352 | border-bottom-color: #565963; 353 | border-radius: 50%; 354 | animation: animLoader 0.8s linear forwards infinite; 355 | } 356 | 357 | .grid__sizer { 358 | margin-bottom: 0 !important; 359 | } 360 | 361 | .grid__link, 362 | .grid__img { 363 | display: block; 364 | } 365 | 366 | .grid__img { 367 | width: 100%; 368 | } 369 | 370 | .grid__deco { 371 | position: absolute; 372 | top: 0; 373 | left: 0; 374 | pointer-events: none; 375 | } 376 | 377 | .grid__deco path { 378 | fill: none; 379 | stroke: #fff; 380 | stroke-width: 2px; 381 | } 382 | 383 | .grid__reveal { 384 | position: absolute; 385 | z-index: 50; 386 | top: 0; 387 | left: 0; 388 | width: 100%; 389 | height: 100%; 390 | pointer-events: none; 391 | opacity: 0; 392 | background-color: #2c2d31; 393 | } 394 | 395 | .grid .grid__item, 396 | .grid .grid__sizer { 397 | width: calc(50% - 20px); 398 | margin: 0 10px 20px; 399 | } 400 | 401 | @media screen and (min-width: 60em) { 402 | .grid .grid__item, 403 | .grid .grid__sizer { 404 | width: calc((100% / 3) - 20px); 405 | margin: 0 10px 20px; 406 | } 407 | } 408 | 409 | @media screen and (min-width: 70em) { 410 | .grid .grid__item, 411 | .grid .grid__sizer { 412 | width: calc(25% - 30px); 413 | margin: 0 15px 30px; 414 | } 415 | /* Grid types */ 416 | .grid--type-b .grid__item, 417 | .grid--type-b .grid__sizer { 418 | width: calc(20% - 20px); 419 | margin: 0 10px 20px; 420 | } 421 | 422 | .grid--type-c .grid__item, 423 | .grid--type-c .grid__sizer { 424 | width: calc(25% - 16px); 425 | margin: 0 8px 16px; 426 | } 427 | } 428 | 429 | @media screen and (max-width: 50em) { 430 | main { 431 | display: block; 432 | } 433 | .codrops-header { 434 | padding: 1em; 435 | flex-wrap: wrap; 436 | } 437 | .codrops-links { 438 | margin: 0; 439 | } 440 | .codrops-header__title { 441 | width: 100%; 442 | text-align: left; 443 | flex: none; 444 | margin: 1em 0; 445 | } 446 | .content--side { 447 | width: 100%; 448 | } 449 | .content--right { 450 | order: 3; 451 | } 452 | .content--center { 453 | max-width: 100vw; 454 | } 455 | .control { 456 | margin: 0 0 1em; 457 | text-align: left; 458 | } 459 | .control__item, 460 | .control__btn { 461 | display: inline-block; 462 | } 463 | .control__btn { 464 | width: auto; 465 | } 466 | } 467 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/favicon.ico -------------------------------------------------------------------------------- /img/related/AnimatedGridLayout.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/related/AnimatedGridLayout.jpg -------------------------------------------------------------------------------- /img/related/ImageGridEffects.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/related/ImageGridEffects.jpg -------------------------------------------------------------------------------- /img/related/IsometricGrids.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/related/IsometricGrids.png -------------------------------------------------------------------------------- /img/related/LoadingEffectsGridItems.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/related/LoadingEffectsGridItems.jpg -------------------------------------------------------------------------------- /img/set1/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set1/1.jpg -------------------------------------------------------------------------------- /img/set1/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set1/10.jpg -------------------------------------------------------------------------------- /img/set1/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set1/11.jpg -------------------------------------------------------------------------------- /img/set1/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set1/2.jpg -------------------------------------------------------------------------------- /img/set1/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set1/3.jpg -------------------------------------------------------------------------------- /img/set1/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set1/4.jpg -------------------------------------------------------------------------------- /img/set1/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set1/5.jpg -------------------------------------------------------------------------------- /img/set1/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set1/6.jpg -------------------------------------------------------------------------------- /img/set1/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set1/7.jpg -------------------------------------------------------------------------------- /img/set1/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set1/7.png -------------------------------------------------------------------------------- /img/set1/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set1/8.jpg -------------------------------------------------------------------------------- /img/set1/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set1/9.jpg -------------------------------------------------------------------------------- /img/set2/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set2/1.jpg -------------------------------------------------------------------------------- /img/set2/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set2/2.jpg -------------------------------------------------------------------------------- /img/set2/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set2/3.jpg -------------------------------------------------------------------------------- /img/set2/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set2/4.jpg -------------------------------------------------------------------------------- /img/set2/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set2/5.jpg -------------------------------------------------------------------------------- /img/set2/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set2/6.jpg -------------------------------------------------------------------------------- /img/set2/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set2/7.jpg -------------------------------------------------------------------------------- /img/set2/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set2/8.jpg -------------------------------------------------------------------------------- /img/set3/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set3/1.jpg -------------------------------------------------------------------------------- /img/set3/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set3/10.jpg -------------------------------------------------------------------------------- /img/set3/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set3/11.jpg -------------------------------------------------------------------------------- /img/set3/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set3/2.jpg -------------------------------------------------------------------------------- /img/set3/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set3/3.jpg -------------------------------------------------------------------------------- /img/set3/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set3/4.jpg -------------------------------------------------------------------------------- /img/set3/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set3/5.jpg -------------------------------------------------------------------------------- /img/set3/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set3/6.jpg -------------------------------------------------------------------------------- /img/set3/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set3/7.jpg -------------------------------------------------------------------------------- /img/set3/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set3/8.jpg -------------------------------------------------------------------------------- /img/set3/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/img/set3/9.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Grid Loading Animations | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 28 |
29 |
30 |
31 | 32 | 33 |
34 |

Grid Loading Animations

35 | 36 | 41 | 42 |
43 |
44 |
45 | switch layout 46 |
47 | 48 | 49 |
50 |
51 | 52 | 53 |
54 |
55 | 56 | 57 |
58 |
59 |
60 |
61 |
62 | run effect 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
79 |
80 |
81 |
82 |
83 |
84 | Some image 85 |
86 |
87 | Some image 88 |
89 |
90 | 91 |
92 |
93 |

See Every Click, Swipe,
and Scroll

94 |

See how users experience your designs with FullStory.

95 | Get it free today! 96 |
97 | 98 |
99 |
100 | Some image 101 |
102 |
103 | Some image 104 |
105 |
106 | Some image 107 |
108 |
109 | Some image 110 |
111 |
112 | Some image 113 |
114 |
115 | Some image 116 |
117 |
118 | Some image 119 |
120 |
121 | Some image 122 |
123 |
124 | Some image 125 |
126 |
127 | Some image 128 |
129 |
130 | Some image 131 |
132 |
133 | Some image 134 |
135 |
136 | Some image 137 |
138 |
139 | Some image 140 |
141 |
142 |
143 |
144 |
145 | Some image 146 |
147 |
148 | Some image 149 |
150 |
151 | 152 |
153 |
154 |

See Every Click, Swipe,
and Scroll

155 |

See how users experience your designs with FullStory.

156 | Get it free today! 157 |
158 | 159 |
160 |
161 | Some image 162 |
163 |
164 | Some image 165 |
166 |
167 | Some image 168 |
169 |
170 | Some image 171 |
172 |
173 | Some image 174 |
175 |
176 | Some image 177 |
178 |
179 | Some image 180 |
181 |
182 | Some image 183 |
184 |
185 | Some image 186 |
187 |
188 | Some image 189 |
190 |
191 | Some image 192 |
193 |
194 | Some image 195 |
196 |
197 | Some image 198 |
199 |
200 | Some image 201 |
202 |
203 | Some image 204 |
205 |
206 | Some image 207 |
208 |
209 | Some image 210 |
211 |
212 | Some image 213 |
214 |
215 | Some image 216 |
217 |
218 | Some image 219 |
220 |
221 | Some image 222 |
223 |
224 | Some image 225 |
226 |
227 | Some image 228 |
229 |
230 |
231 |
232 |
233 | Some image 234 |
235 |
236 | Some image 237 |
238 |
239 | 240 |
241 |
242 |

See Every Click, Swipe,
and Scroll

243 |

See how users experience your designs with FullStory.

244 | Get it free today! 245 |
246 | 247 |
248 |
249 | Some image 250 |
251 |
252 | Some image 253 |
254 |
255 | Some image 256 |
257 |
258 | Some image 259 |
260 |
261 | Some image 262 |
263 |
264 | Some image 265 |
266 |
267 | Some image 268 |
269 |
270 | Some image 271 |
272 |
273 | Some image 274 |
275 |
276 | Some image 277 |
278 |
279 | Some image 280 |
281 |
282 | Some image 283 |
284 |
285 | Some image 286 |
287 |
288 | Some image 289 |
290 |
291 | Some image 292 |
293 |
294 | Some image 295 |
296 |
297 |
298 |
299 |

Become a demo sponsor

300 |

If you enjoyed this demo you might also like:

301 | 302 | 303 |

Image Grid Effects

304 | 305 | 306 | 307 |

Loading Effects for Grid Items

308 | 309 | 310 | 311 |

Isometric Grids

312 | 313 | 314 | 315 |

Animated Grid Layout

316 | 317 |
318 |
319 | 320 | 321 | 322 | 323 | 324 | 325 | -------------------------------------------------------------------------------- /js/anime.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | 2017 Julian Garnier 3 | Released under the MIT license 4 | */ 5 | var $jscomp$this=this; 6 | (function(u,r){"function"===typeof define&&define.amd?define([],r):"object"===typeof module&&module.exports?module.exports=r():u.anime=r()})(this,function(){function u(a){if(!g.col(a))try{return document.querySelectorAll(a)}catch(b){}}function r(a){return a.reduce(function(a,c){return a.concat(g.arr(c)?r(c):c)},[])}function v(a){if(g.arr(a))return a;g.str(a)&&(a=u(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]}function E(a,b){return a.some(function(a){return a===b})} 7 | function z(a){var b={},c;for(c in a)b[c]=a[c];return b}function F(a,b){var c=z(a),d;for(d in a)c[d]=b.hasOwnProperty(d)?b[d]:a[d];return c}function A(a,b){var c=z(a),d;for(d in b)c[d]=g.und(a[d])?b[d]:a[d];return c}function R(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,h){return b+b+c+c+h+h});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"}function S(a){function b(a,b,c){0> 8 | c&&(c+=1);1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}var c=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);a=parseInt(c[1])/360;var d=parseInt(c[2])/100,c=parseInt(c[3])/100;if(0==d)d=c=a=c;else{var e=.5>c?c*(1+d):c+d-c*d,k=2*c-e,d=b(k,e,a+1/3),c=b(k,e,a);a=b(k,e,a-1/3)}return"rgb("+255*d+","+255*c+","+255*a+")"}function w(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(a))return a[2]}function T(a){if(-1k&&q=m&&(f.began=!0,e("begin")),e("run")):(q<=k&&0!==O&&(d(0),p&&g()),q>=h&&O!==h&&(d(h),p||g()));a>=h&&(f.remaining?(t=n,"alternate"===f.direction&&(f.reversed=!f.reversed)):(f.pause(),P(),Q=b(),f.completed||(f.completed=!0,e("complete"))),l=0);if(f.children)for(a=f.children,h=0;h=b&& 22 | 0<=d&&1>=d){var g=new Float32Array(11);if(b!==c||d!==e)for(var h=0;11>h;++h)g[h]=a(.1*h,b,d);return function(h){if(b===c&&d===e)return h;if(0===h)return 0;if(1===h)return 1;for(var k=0,l=1;10!==l&&g[l]<=h;++l)k+=.1;--l;var l=k+(h-g[l])/(g[l+1]-g[l])*.1,n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(.001<=n){for(k=0;4>k;++k){n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(0===n)break;var m=a(l,b,d)-h,l=l-m/n}h=l}else if(0===n)h=l;else{var l=k,k=k+.1,f=0;do m=l+(k-l)/2,n=a(m,b,d)-h,0++f);h=m}return a(h,c,e)}}}}(),M=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var b="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),c={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],a],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1], 24 | [.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},d={linear:x(.25,.25,.75,.75)},e={},k;for(k in c)e.type=k,c[e.type].forEach(function(a){return function(c,e){d["ease"+a.type+b[e]]=g.fnc(c)?c:x.apply($jscomp$this,c)}}(e)),e={type:e.type};return d}(),ha={css:function(a,b,c){return a.style[b]= 25 | c},attribute:function(a,b,c){return a.setAttribute(b,c)},object:function(a,b,c){return a[b]=c},transform:function(a,b,c,d,e){d[e]||(d[e]=[]);d[e].push(b+"("+c+")")}},p=[],y=0,ia=function(){function a(){y=requestAnimationFrame(b)}function b(b){var c=p.length;if(c){for(var e=0;ed&&(b.duration=a.duration);b.children.push(a)});return b};return b};m.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return m}); -------------------------------------------------------------------------------- /js/imagesloaded.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * imagesLoaded PACKAGED v4.1.1 3 | * JavaScript is all like "You images are done yet or what?" 4 | * MIT License 5 | */ 6 | 7 | !function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var r=this._onceEvents&&this._onceEvents[t];o;){var s=r&&r[o];s&&(this.off(t,o),delete r[o]),o.apply(this,e),n+=s?0:1,o=i[n]}return this}},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter")):t.imagesLoaded=e(t,t.EvEmitter)}(window,function(t,e){function i(t,e){for(var i in e)t[i]=e[i];return t}function n(t){var e=[];if(Array.isArray(t))e=t;else if("number"==typeof t.length)for(var i=0;i .grid__link'); 19 | } 20 | 21 | /** 22 | * Effects. 23 | */ 24 | GridLoaderFx.prototype.effects = { 25 | 'Hapi': { 26 | animeOpts: { 27 | duration: function(t,i) { 28 | return 600 + i*75; 29 | }, 30 | easing: 'easeOutExpo', 31 | delay: function(t,i) { 32 | return i*50; 33 | }, 34 | opacity: { 35 | value: [0,1], 36 | easing: 'linear' 37 | }, 38 | scale: [0,1] 39 | } 40 | }, 41 | 'Amun': { 42 | // Sort target elements function. 43 | sortTargetsFn: function(a,b) { 44 | var aBounds = a.getBoundingClientRect(), 45 | bBounds = b.getBoundingClientRect(); 46 | 47 | return (aBounds.left - bBounds.left) || (aBounds.top - bBounds.top); 48 | }, 49 | animeOpts: { 50 | duration: function(t,i) { 51 | return 500 + i*50; 52 | }, 53 | easing: 'easeOutExpo', 54 | delay: function(t,i) { 55 | return i * 20; 56 | }, 57 | opacity: { 58 | value: [0,1], 59 | duration: function(t,i) { 60 | return 250 + i*50; 61 | }, 62 | easing: 'linear' 63 | }, 64 | translateY: [400,0] 65 | } 66 | }, 67 | 'Kek': { 68 | sortTargetsFn: function(a,b) { 69 | return b.getBoundingClientRect().left - a.getBoundingClientRect().left; 70 | }, 71 | animeOpts: { 72 | duration: 800, 73 | easing: [0.1,1,0.3,1], 74 | delay: function(t,i) { 75 | return i * 20; 76 | }, 77 | opacity: { 78 | value: [0,1], 79 | duration: 600, 80 | easing: 'linear' 81 | }, 82 | translateX: [-500,0], 83 | rotateZ: [15,0] 84 | } 85 | }, 86 | 'Isis': { 87 | animeOpts: { 88 | duration: 900, 89 | elasticity: 500, 90 | delay: function(t,i) { 91 | return i*15; 92 | }, 93 | opacity: { 94 | value: [0,1], 95 | duration: 300, 96 | easing: 'linear' 97 | }, 98 | translateX: function() { 99 | return [anime.random(0,1) === 0 ? 100 : -100,0]; 100 | }, 101 | translateY: function() { 102 | return [anime.random(0,1) === 0 ? 100 : -100,0]; 103 | } 104 | } 105 | }, 106 | 'Montu': { 107 | perspective: 800, 108 | origin: '50% 0%', 109 | animeOpts: { 110 | duration: 1500, 111 | elasticity: 400, 112 | delay: function(t,i) { 113 | return i*75; 114 | }, 115 | opacity: { 116 | value: [0,1], 117 | duration: 1000, 118 | easing: 'linear' 119 | }, 120 | rotateX: [-90,0] 121 | } 122 | }, 123 | 'Osiris': { 124 | perspective: 3000, 125 | animeOpts: { 126 | duration: function() { 127 | return anime.random(500,1000) 128 | }, 129 | easing: [0.2,1,0.3,1], 130 | delay: function(t,i) { 131 | return i*50; 132 | }, 133 | opacity: { 134 | value: [0,1], 135 | duration: 700, 136 | easing: 'linear' 137 | }, 138 | translateZ: { 139 | value: [-3000,0], 140 | duration: 1000 141 | }, 142 | rotateY: ['-1turns',0] 143 | } 144 | }, 145 | 'Satet': { 146 | animeOpts: { 147 | duration: 800, 148 | elasticity: 600, 149 | delay: function(t,i) { 150 | return i*100; 151 | }, 152 | opacity: { 153 | value: [0,1], 154 | duration: 600, 155 | easing: 'linear' 156 | }, 157 | scaleX: { 158 | value: [0.4,1] 159 | }, 160 | scaleY: { 161 | value: [0.6,1], 162 | duration: 1000 163 | } 164 | } 165 | }, 166 | 'Atum': { 167 | sortTargetsFn: function(a,b) { 168 | var docScrolls = {top : document.body.scrollTop + document.documentElement.scrollTop}, 169 | y1 = window.innerHeight + docScrolls.top, 170 | aBounds = a.getBoundingClientRect(), 171 | ay1 = aBounds.top + docScrolls.top + aBounds.height/2, 172 | bBounds = b.getBoundingClientRect(), 173 | by1 = bBounds.top + docScrolls.top + bBounds.height/2; 174 | 175 | return Math.abs(y1-ay1) - Math.abs(y1-by1); 176 | }, 177 | perspective: 1000, 178 | origin: '50% 0%', 179 | animeOpts: { 180 | duration: 800, 181 | easing: [0.1,1,0.3,1], 182 | delay: function(t,i) { 183 | return i*35; 184 | }, 185 | opacity: { 186 | value: [0,1], 187 | duration: 600, 188 | easing: 'linear' 189 | }, 190 | translateX: [100,0], 191 | translateY: [-100,0], 192 | translateZ: [400,0], 193 | rotateZ: [10,0], 194 | rotateX: [75,0] 195 | } 196 | }, 197 | 'Ra': { 198 | origin: '50% 0%', 199 | animeOpts: { 200 | duration: 500, 201 | easing: 'easeOutBack', 202 | delay: function(t,i) { 203 | return i * 100; 204 | }, 205 | opacity: { 206 | value: [0,1], 207 | easing: 'linear' 208 | }, 209 | translateY: [400,0], 210 | scaleY: [ 211 | {value: [3,0.6], delay: function(t,i) {return i * 100 + 120;}, duration: 300, easing: 'easeOutExpo'}, 212 | {value: [0.6,1], duration: 1400, easing: 'easeOutElastic'} 213 | ], 214 | scaleX: [ 215 | {value: [0.9,1.05], delay: function(t,i) {return i * 100 + 120;}, duration: 300, easing: 'easeOutExpo'}, 216 | {value: [1.05,1], duration: 1400, easing: 'easeOutElastic'} 217 | ] 218 | } 219 | }, 220 | 'Sobek': { 221 | animeOpts: { 222 | duration: 600, 223 | easing: 'easeOutExpo', 224 | delay: function(t,i) { 225 | return i*100; 226 | }, 227 | opacity: { 228 | value: [0,1], 229 | duration: 100, 230 | easing: 'linear' 231 | }, 232 | translateX: function(t,i) { 233 | var docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft}, 234 | x1 = window.innerWidth/2 + docScrolls.left, 235 | tBounds = t.getBoundingClientRect(), 236 | x2 = tBounds.left +docScrolls.left + tBounds.width/2; 237 | 238 | return [x1-x2,0]; 239 | }, 240 | translateY: function(t,i) { 241 | var docScrolls = {top : document.body.scrollTop + document.documentElement.scrollTop}, 242 | y1 = window.innerHeight + docScrolls.top, 243 | tBounds = t.getBoundingClientRect(), 244 | y2 = tBounds.top + docScrolls.top + tBounds.height/2; 245 | 246 | return [y1-y2,0]; 247 | }, 248 | rotate: function(t,i) { 249 | var x1 = window.innerWidth/2, 250 | tBounds = t.getBoundingClientRect(), 251 | x2 = tBounds.left + tBounds.width/2; 252 | 253 | return [x2 < x1 ? 90 : -90,0]; 254 | }, 255 | scale: [0,1] 256 | } 257 | }, 258 | 'Ptah': { 259 | itemOverflowHidden: true, 260 | sortTargetsFn: function(a,b) { 261 | return b.getBoundingClientRect().left - a.getBoundingClientRect().left; 262 | }, 263 | origin: '100% 0%', 264 | animeOpts: { 265 | duration: 500, 266 | easing: 'easeOutExpo', 267 | delay: function(t,i) { 268 | return i * 20; 269 | }, 270 | opacity: { 271 | value: [0,1], 272 | duration: 400, 273 | easing: 'linear' 274 | }, 275 | rotateZ: [45,0] 276 | } 277 | }, 278 | 'Bes': { 279 | revealer: true, 280 | revealerOrigin: '100% 50%', 281 | animeRevealerOpts: { 282 | duration: 800, 283 | delay: function(t,i) { 284 | return i*75; 285 | }, 286 | easing: 'easeInOutQuart', 287 | scaleX: [1,0] 288 | }, 289 | animeOpts: { 290 | duration: 800, 291 | easing: 'easeInOutQuart', 292 | delay: function(t,i) { 293 | return i*75; 294 | }, 295 | opacity: { 296 | value: [0,1], 297 | easing: 'linear' 298 | }, 299 | scale: [0.8,1] 300 | } 301 | }, 302 | 'Seker': { 303 | revealer: true, 304 | revealerOrigin: '50% 100%', 305 | animeRevealerOpts: { 306 | duration: 500, 307 | delay: function(t,i) { 308 | return i*50; 309 | }, 310 | easing: [0.7,0,0.3,1], 311 | translateY: [100,0], 312 | scaleY: [1,0] 313 | }, 314 | animeOpts: { 315 | duration: 500, 316 | easing: [0.7,0,0.3,1], 317 | delay: function(t,i) { 318 | return i*50; 319 | }, 320 | opacity: { 321 | value: [0,1], 322 | duration: 400, 323 | easing: 'linear' 324 | }, 325 | translateY: [100,0], 326 | scale: [0.8,1] 327 | } 328 | }, 329 | 'Nut': { 330 | revealer: true, 331 | revealerColor: '#1d1d1d', 332 | itemOverflowHidden: true, 333 | animeRevealerOpts: { 334 | easing: 'easeOutCubic', 335 | delay: function(t,i) { 336 | return i*100; 337 | }, 338 | translateX: [ 339 | {value: ['101%','0%'], duration: 400 }, 340 | {value: ['0%','-101%'], duration: 400} 341 | ] 342 | }, 343 | animeOpts: { 344 | duration: 900, 345 | easing: 'easeOutCubic', 346 | delay: function(t,i) { 347 | return 400+i*100; 348 | }, 349 | opacity: { 350 | value: 1, 351 | duration: 1, 352 | easing: 'linear' 353 | }, 354 | scale: [0.8,1] 355 | } 356 | }, 357 | 'Shu': { 358 | lineDrawing: true, 359 | animeLineDrawingOpts: { 360 | duration: 800, 361 | delay: function(t,i) { 362 | return i*150; 363 | }, 364 | easing: 'easeInOutSine', 365 | strokeDashoffset: [anime.setDashoffset, 0], 366 | opacity: [ 367 | {value: [0,1]}, 368 | {value: [1,0], duration: 200, easing: 'linear', delay:500} 369 | ] 370 | }, 371 | animeOpts: { 372 | duration: 800, 373 | easing: [0.2,1,0.3,1], 374 | delay: function(t,i) { 375 | return i*150 + 800; 376 | }, 377 | opacity: { 378 | value: [0,1], 379 | easing: 'linear' 380 | }, 381 | scale: [0.5,1] 382 | } 383 | } 384 | }; 385 | 386 | GridLoaderFx.prototype._render = function(effect) { 387 | // Reset styles. 388 | this._resetStyles(); 389 | 390 | var self = this, 391 | effectSettings = this.effects[effect], 392 | animeOpts = effectSettings.animeOpts 393 | 394 | if( effectSettings.perspective != undefined ) { 395 | [].slice.call(this.items).forEach(function(item) { 396 | item.parentNode.style.WebkitPerspective = item.parentNode.style.perspective = effectSettings.perspective + 'px'; 397 | }); 398 | } 399 | 400 | if( effectSettings.origin != undefined ) { 401 | [].slice.call(this.items).forEach(function(item) { 402 | item.style.WebkitTransformOrigin = item.style.transformOrigin = effectSettings.origin; 403 | }); 404 | } 405 | 406 | if( effectSettings.lineDrawing != undefined ) { 407 | [].slice.call(this.items).forEach(function(item) { 408 | // Create SVG. 409 | var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), 410 | path = document.createElementNS('http://www.w3.org/2000/svg', 'path'), 411 | itemW = item.offsetWidth, 412 | itemH = item.offsetHeight; 413 | 414 | svg.setAttribute('width', itemW + 'px'); 415 | svg.setAttribute('height', itemH + 'px'); 416 | svg.setAttribute('viewBox', '0 0 ' + itemW + ' ' + itemH); 417 | svg.setAttribute('class', 'grid__deco'); 418 | path.setAttribute('d', 'M0,0 l' + itemW + ',0 0,' + itemH + ' -' + itemW + ',0 0,-' + itemH); 419 | path.setAttribute('stroke-dashoffset', anime.setDashoffset(path)); 420 | svg.appendChild(path); 421 | item.parentNode.appendChild(svg); 422 | }); 423 | 424 | var animeLineDrawingOpts = effectSettings.animeLineDrawingOpts; 425 | animeLineDrawingOpts.targets = this.el.querySelectorAll('.grid__deco > path'); 426 | anime.remove(animeLineDrawingOpts.targets); 427 | anime(animeLineDrawingOpts); 428 | } 429 | 430 | if( effectSettings.revealer != undefined ) { 431 | [].slice.call(this.items).forEach(function(item) { 432 | var revealer = document.createElement('div'); 433 | revealer.className = 'grid__reveal'; 434 | if( effectSettings.revealerOrigin != undefined ) { 435 | revealer.style.transformOrigin = effectSettings.revealerOrigin; 436 | } 437 | if( effectSettings.revealerColor != undefined ) { 438 | revealer.style.backgroundColor = effectSettings.revealerColor; 439 | } 440 | item.parentNode.appendChild(revealer); 441 | }); 442 | 443 | var animeRevealerOpts = effectSettings.animeRevealerOpts; 444 | animeRevealerOpts.targets = this.el.querySelectorAll('.grid__reveal'); 445 | animeRevealerOpts.begin = function(obj) { 446 | for(var i = 0, len = obj.animatables.length; i < len; ++i) { 447 | obj.animatables[i].target.style.opacity = 1; 448 | } 449 | }; 450 | anime.remove(animeRevealerOpts.targets); 451 | anime(animeRevealerOpts); 452 | } 453 | 454 | if( effectSettings.itemOverflowHidden ) { 455 | [].slice.call(this.items).forEach(function(item) { 456 | item.parentNode.style.overflow = 'hidden'; 457 | }); 458 | } 459 | 460 | animeOpts.targets = effectSettings.sortTargetsFn && typeof effectSettings.sortTargetsFn === 'function' ? [].slice.call(this.items).sort(effectSettings.sortTargetsFn) : this.items; 461 | anime.remove(animeOpts.targets); 462 | anime(animeOpts); 463 | }; 464 | 465 | GridLoaderFx.prototype._resetStyles = function() { 466 | this.el.style.WebkitPerspective = this.el.style.perspective = 'none'; 467 | [].slice.call(this.items).forEach(function(item) { 468 | var gItem = item.parentNode; 469 | item.style.opacity = 0; 470 | item.style.WebkitTransformOrigin = item.style.transformOrigin = '50% 50%'; 471 | item.style.transform = 'none'; 472 | 473 | var svg = item.parentNode.querySelector('svg.grid__deco'); 474 | if( svg ) { 475 | gItem.removeChild(svg); 476 | } 477 | 478 | var revealer = item.parentNode.querySelector('.grid__reveal'); 479 | if( revealer ) { 480 | gItem.removeChild(revealer); 481 | } 482 | 483 | gItem.style.overflow = ''; 484 | }); 485 | }; 486 | 487 | window.GridLoaderFx = GridLoaderFx; 488 | 489 | var body = document.body, 490 | grids = [].slice.call(document.querySelectorAll('.grid')), masonry = [], 491 | currentGrid = 0, 492 | // Switch grid radio buttons. 493 | switchGridCtrls = [].slice.call(document.querySelectorAll('.control__radio')), 494 | // Choose effect buttons. 495 | fxCtrls = [].slice.call(document.querySelectorAll('.control--effects > .control__btn')), 496 | // The GridLoaderFx instances. 497 | loaders = [], 498 | loadingTimeout; 499 | 500 | function init() { 501 | // Preload images 502 | imagesLoaded(body, function() { 503 | // Initialize Masonry on each grid. 504 | grids.forEach(function(grid) { 505 | var m = new Masonry(grid, { 506 | itemSelector: '.grid__item', 507 | columnWidth: '.grid__sizer', 508 | percentPosition: true, 509 | transitionDuration: 0 510 | }); 511 | masonry.push(m); 512 | // Hide the grid. 513 | grid.classList.add('grid--hidden'); 514 | // Init GridLoaderFx. 515 | loaders.push(new GridLoaderFx(grid)); 516 | }); 517 | 518 | // Show current grid. 519 | grids[currentGrid].classList.remove('grid--hidden'); 520 | // Init/Bind events. 521 | initEvents(); 522 | // Remove loading class from body 523 | body.classList.remove('loading'); 524 | }); 525 | } 526 | 527 | function initEvents() { 528 | // Switching grids radio buttons. 529 | switchGridCtrls.forEach(function(ctrl) { 530 | ctrl.addEventListener('click', switchGrid); 531 | }); 532 | // Effect selection. 533 | fxCtrls.forEach(function(ctrl) { 534 | ctrl.addEventListener('click', applyFx); 535 | }); 536 | } 537 | 538 | function switchGrid(ev) { 539 | // Hide current grid. 540 | grids[currentGrid].classList.add('grid--hidden'); 541 | // New grid. 542 | var grid = grids.filter(function(obj) { return obj.classList.contains(ev.target.value); })[0]; 543 | // Update currentGrid. 544 | currentGrid = grids.indexOf(grid); 545 | // Show new grid. 546 | grid.classList.remove('grid--hidden'); 547 | masonry[currentGrid].layout(); 548 | } 549 | 550 | function applyFx(ev) { 551 | // Simulate loading grid to show the effect. 552 | clearTimeout(loadingTimeout); 553 | grids[currentGrid].classList.add('grid--loading'); 554 | 555 | loadingTimeout = setTimeout(function() { 556 | grids[currentGrid].classList.remove('grid--loading'); 557 | 558 | // Apply effect. 559 | loaders[currentGrid]._render(ev.target.getAttribute('data-fx')); 560 | }, 500); 561 | } 562 | 563 | init(); 564 | 565 | })(window); -------------------------------------------------------------------------------- /js/masonry.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Masonry PACKAGED v4.1.1 3 | * Cascading grid layout library 4 | * http://masonry.desandro.com 5 | * MIT License 6 | * by David DeSandro 7 | */ 8 | 9 | !function(t,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("jquery")):t.jQueryBridget=e(t,t.jQuery)}(window,function(t,e){"use strict";function i(i,r,a){function h(t,e,n){var o,r="$()."+i+'("'+e+'")';return t.each(function(t,h){var u=a.data(h,i);if(!u)return void s(i+" not initialized. Cannot call methods, i.e. "+r);var d=u[e];if(!d||"_"==e.charAt(0))return void s(r+" is not a valid method");var l=d.apply(u,n);o=void 0===o?l:o}),void 0!==o?o:t}function u(t,e){t.each(function(t,n){var o=a.data(n,i);o?(o.option(e),o._init()):(o=new r(n,e),a.data(n,i,o))})}a=a||e||t.jQuery,a&&(r.prototype.option||(r.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(!0,this.options,t))}),a.fn[i]=function(t){if("string"==typeof t){var e=o.call(arguments,1);return h(this,t,e)}return u(this,t),this},n(a))}function n(t){!t||t&&t.bridget||(t.bridget=i)}var o=Array.prototype.slice,r=t.console,s="undefined"==typeof r?function(){}:function(t){r.error(t)};return n(e||t.jQuery),i}),function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var r=this._onceEvents&&this._onceEvents[t];o;){var s=r&&r[o];s&&(this.off(t,o),delete r[o]),o.apply(this,e),n+=s?0:1,o=i[n]}return this}},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("get-size/get-size",[],function(){return e()}):"object"==typeof module&&module.exports?module.exports=e():t.getSize=e()}(window,function(){"use strict";function t(t){var e=parseFloat(t),i=-1==t.indexOf("%")&&!isNaN(e);return i&&e}function e(){}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0;u>e;e++){var i=h[e];t[i]=0}return t}function n(t){var e=getComputedStyle(t);return e||a("Style returned "+e+". Are you running this code in a hidden iframe on Firefox? See http://bit.ly/getsizebug1"),e}function o(){if(!d){d=!0;var e=document.createElement("div");e.style.width="200px",e.style.padding="1px 2px 3px 4px",e.style.borderStyle="solid",e.style.borderWidth="1px 2px 3px 4px",e.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(e);var o=n(e);r.isBoxSizeOuter=s=200==t(o.width),i.removeChild(e)}}function r(e){if(o(),"string"==typeof e&&(e=document.querySelector(e)),e&&"object"==typeof e&&e.nodeType){var r=n(e);if("none"==r.display)return i();var a={};a.width=e.offsetWidth,a.height=e.offsetHeight;for(var d=a.isBorderBox="border-box"==r.boxSizing,l=0;u>l;l++){var c=h[l],f=r[c],m=parseFloat(f);a[c]=isNaN(m)?0:m}var p=a.paddingLeft+a.paddingRight,g=a.paddingTop+a.paddingBottom,y=a.marginLeft+a.marginRight,v=a.marginTop+a.marginBottom,_=a.borderLeftWidth+a.borderRightWidth,E=a.borderTopWidth+a.borderBottomWidth,z=d&&s,b=t(r.width);b!==!1&&(a.width=b+(z?0:p+_));var x=t(r.height);return x!==!1&&(a.height=x+(z?0:g+E)),a.innerWidth=a.width-(p+_),a.innerHeight=a.height-(g+E),a.outerWidth=a.width+y,a.outerHeight=a.height+v,a}}var s,a="undefined"==typeof console?e:function(t){console.error(t)},h=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],u=h.length,d=!1;return r}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("desandro-matches-selector/matches-selector",e):"object"==typeof module&&module.exports?module.exports=e():t.matchesSelector=e()}(window,function(){"use strict";var t=function(){var t=Element.prototype;if(t.matches)return"matches";if(t.matchesSelector)return"matchesSelector";for(var e=["webkit","moz","ms","o"],i=0;is?"round":"floor";r=Math[a](r),this.cols=Math.max(r,1)},i.prototype.getContainerWidth=function(){var t=this._getOption("fitWidth"),i=t?this.element.parentNode:this.element,n=e(i);this.containerWidth=n&&n.innerWidth},i.prototype._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,i=e&&1>e?"round":"ceil",n=Math[i](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var o=this._getColGroup(n),r=Math.min.apply(Math,o),s=o.indexOf(r),a={x:this.columnWidth*s,y:r},h=r+t.size.outerHeight,u=this.cols+1-o.length,d=0;u>d;d++)this.colYs[s+d]=h;return a},i.prototype._getColGroup=function(t){if(2>t)return this.colYs;for(var e=[],i=this.cols+1-t,n=0;i>n;n++){var o=this.colYs.slice(n,n+t);e[n]=Math.max.apply(Math,o)}return e},i.prototype._manageStamp=function(t){var i=e(t),n=this._getElementOffset(t),o=this._getOption("originLeft"),r=o?n.left:n.right,s=r+i.outerWidth,a=Math.floor(r/this.columnWidth);a=Math.max(0,a);var h=Math.floor(s/this.columnWidth);h-=s%this.columnWidth?0:1,h=Math.min(this.cols-1,h);for(var u=this._getOption("originTop"),d=(u?n.top:n.bottom)+i.outerHeight,l=a;h>=l;l++)this.colYs[l]=Math.max(d,this.colYs[l])},i.prototype._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this._getOption("fitWidth")&&(t.width=this._getContainerFitWidth()),t},i.prototype._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},i.prototype.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!=this.containerWidth},i}); -------------------------------------------------------------------------------- /sponsor/FullStory.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeMyUI/GridLoadingAnimations/fa2b283504590e92ef25c717ba989870ada7217c/sponsor/FullStory.jpg -------------------------------------------------------------------------------- /sponsor/pater.css: -------------------------------------------------------------------------------- 1 | .pater { 2 | position: relative; 3 | display: block; 4 | overflow: hidden; 5 | width: 100%; 6 | padding: 0 0 1em; 7 | background: #fff; 8 | } 9 | 10 | .pater, 11 | .pater:focus, 12 | .pater:hover { 13 | color: #2c2d31; 14 | } 15 | 16 | .pater::after { 17 | content: 'Sponsor'; 18 | font-size: 0.765em; 19 | position: absolute; 20 | z-index: 20; 21 | bottom: 0; 22 | left: 0; 23 | padding: 1em; 24 | color: #f1bed4; 25 | } 26 | 27 | .pater__img { 28 | width: 100%; 29 | height: 120px; 30 | background: url(../sponsor/FullStory.jpg) no-repeat center center; 31 | background-size: cover; 32 | } 33 | 34 | .pater__content { 35 | font-size: 0.85em; 36 | z-index: 9; 37 | padding: 1.5em 1em; 38 | text-align: center; 39 | } 40 | 41 | .pater__title { 42 | font-size: 1em; 43 | margin: 0; 44 | color: #ca6694; 45 | } 46 | 47 | .pater__call { 48 | font-weight: bold; 49 | } 50 | 51 | @media screen and (min-width: 50em) { 52 | .pater { 53 | height: 240px; 54 | background: #1f2125; 55 | } 56 | .pater--small { 57 | height: 200px; 58 | } 59 | .pater, 60 | .pater:focus, 61 | .pater:hover { 62 | color: #82888a; 63 | } 64 | .pater__img { 65 | position: absolute; 66 | z-index: 10; 67 | top: 0; 68 | left: 0; 69 | height: 100%; 70 | } 71 | .pater__call { 72 | color: #fff; 73 | } 74 | /* Hover Animation */ 75 | .pater__img, 76 | .pater__content, 77 | .pater::after { 78 | transition: transform 0.3s, opacity 0.3s; 79 | } 80 | 81 | .pater:hover::after { 82 | opacity: 0; 83 | transform: translate3d(0,20px,0); 84 | } 85 | 86 | .pater:hover .pater__img { 87 | transform: translate3d(0,100px,0) scale3d(0.7,0.7,1); 88 | } 89 | 90 | .pater--small:hover .pater__img { 91 | transform: translate3d(0,100%,0); 92 | } 93 | 94 | .pater__content { 95 | position: absolute; 96 | top: 50px; 97 | left: 0; 98 | width: 100%; 99 | height: 100%; 100 | } 101 | 102 | .pater--small .pater__content { 103 | display: flex; 104 | flex-direction: column; 105 | justify-content: center; 106 | } 107 | 108 | .pater:hover .pater__content { 109 | transform: translate3d(0,-50px,0); 110 | } 111 | } 112 | --------------------------------------------------------------------------------