├── .gitattributes ├── .gitignore ├── .htmlnanorc ├── LICENSE ├── README.md ├── dist ├── 1.1770e3b3.jpg ├── 10.f7990335.jpg ├── 11.ef4a18eb.jpg ├── 12.1c611c29.jpg ├── 13.20baef1e.jpg ├── 14.73a4162c.jpg ├── 15.fdc25495.jpg ├── 16.fce8daf8.jpg ├── 17.acd308fd.jpg ├── 18.ab0e512b.jpg ├── 19.c66c7e95.jpg ├── 2.07ca36b5.jpg ├── 20.cae33766.jpg ├── 3.f6f48295.jpg ├── 4.516b9c03.jpg ├── 5.95d97ae8.jpg ├── 6.56a5d53b.jpg ├── 7.87dc6e8b.jpg ├── 8.0bda5054.jpg ├── 9.27ccf354.jpg ├── favicon.a64e97b2.ico ├── index.49c46c74.js ├── index.6d147055.js ├── index.d73f7ad5.css ├── index.html ├── index2.228f0f6b.js ├── index2.2bf911ad.js ├── index2.html ├── index3.567ae035.js ├── index3.cc40078a.js ├── index3.html ├── index4.4ae4db92.js ├── index4.ea1c40c1.js ├── index4.html ├── index5.69124e8c.js ├── index5.df9dd68a.js ├── index5.html ├── index6.9166408f.js ├── index6.d0674181.js ├── index6.html ├── index7.b94885ad.js ├── index7.cf927c7c.js ├── index7.html ├── index8.69142190.js ├── index8.b97a2212.js └── index8.html ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 16.jpg ├── 17.jpg ├── 18.jpg ├── 19.jpg ├── 2.jpg ├── 20.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg ├── index.html ├── index2.html ├── index3.html ├── index4.html ├── index5.html ├── index6.html ├── index7.html ├── index8.html └── js ├── demo1 └── index.js ├── demo2 └── index.js ├── demo3 └── index.js ├── demo4 └── index.js ├── demo5 └── index.js ├── demo6 └── index.js ├── demo7 └── index.js ├── demo8 └── index.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .parcel-cache 4 | package-lock.json -------------------------------------------------------------------------------- /.htmlnanorc: -------------------------------------------------------------------------------- 1 | { 2 | "minifySvg": false 3 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Grid Scroll Animations 2 | 3 | Various effects for images when scrolling a page with a grid. 4 | 5 | ![Image Title](https://tympanus.net/codrops/wp-content/uploads/2022/05/scrollanimations_feat.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=63672) 8 | 9 | [Demo](http://tympanus.net/Development/ScrollAnimationsGrid/) 10 | 11 | 12 | ## Installation 13 | 14 | Install dependencies: 15 | 16 | ``` 17 | npm install 18 | ``` 19 | 20 | Compile the code for development and start a local server: 21 | 22 | ``` 23 | npm start 24 | ``` 25 | 26 | Create the build: 27 | 28 | ``` 29 | npm run build 30 | ``` 31 | 32 | ## Credits 33 | 34 | - Images from [Unsplash](https://unsplash.com/) 35 | 36 | ## Misc 37 | 38 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 39 | 40 | ## License 41 | [MIT](LICENSE) 42 | 43 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /dist/1.1770e3b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/1.1770e3b3.jpg -------------------------------------------------------------------------------- /dist/10.f7990335.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/10.f7990335.jpg -------------------------------------------------------------------------------- /dist/11.ef4a18eb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/11.ef4a18eb.jpg -------------------------------------------------------------------------------- /dist/12.1c611c29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/12.1c611c29.jpg -------------------------------------------------------------------------------- /dist/13.20baef1e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/13.20baef1e.jpg -------------------------------------------------------------------------------- /dist/14.73a4162c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/14.73a4162c.jpg -------------------------------------------------------------------------------- /dist/15.fdc25495.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/15.fdc25495.jpg -------------------------------------------------------------------------------- /dist/16.fce8daf8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/16.fce8daf8.jpg -------------------------------------------------------------------------------- /dist/17.acd308fd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/17.acd308fd.jpg -------------------------------------------------------------------------------- /dist/18.ab0e512b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/18.ab0e512b.jpg -------------------------------------------------------------------------------- /dist/19.c66c7e95.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/19.c66c7e95.jpg -------------------------------------------------------------------------------- /dist/2.07ca36b5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/2.07ca36b5.jpg -------------------------------------------------------------------------------- /dist/20.cae33766.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/20.cae33766.jpg -------------------------------------------------------------------------------- /dist/3.f6f48295.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/3.f6f48295.jpg -------------------------------------------------------------------------------- /dist/4.516b9c03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/4.516b9c03.jpg -------------------------------------------------------------------------------- /dist/5.95d97ae8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/5.95d97ae8.jpg -------------------------------------------------------------------------------- /dist/6.56a5d53b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/6.56a5d53b.jpg -------------------------------------------------------------------------------- /dist/7.87dc6e8b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/7.87dc6e8b.jpg -------------------------------------------------------------------------------- /dist/8.0bda5054.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/8.0bda5054.jpg -------------------------------------------------------------------------------- /dist/9.27ccf354.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/9.27ccf354.jpg -------------------------------------------------------------------------------- /dist/favicon.a64e97b2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/dist/favicon.a64e97b2.ico -------------------------------------------------------------------------------- /dist/index.d73f7ad5.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:18px}body{--color-text:#111;--color-bg:#d8d2cd;--color-link:#b41717;--color-link-hover:#000;--color-bg-alt:#c3bcbc;--color-text-alt:#111;color:var(--color-text);background-color:var(--color-bg);text-transform:uppercase;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:roc-grotesk,sans-serif;overflow-x:hidden}.demo-2{--color-text:#b41717;--color-text-alt:#b41717;--color-bg:#000;--color-bg-alt:#9c9191;--color-link-hover:#fff}.demo-3{--color-text:#000;--color-text-alt:#000;--color-bg:#846c64;--color-bg-alt:#d1d1d1;--color-link-hover:#000;--color-link:#fff}.demo-4{--color-text:#fff;--color-text-alt:#78757e;--color-bg:#ccc3cf;--color-bg-alt:#000;--color-link-hover:#fff;--color-link:#d6238c}.demo-5{--color-text:#000;--color-text-alt:#000;--color-bg:#6c7059;--color-bg-alt:#fff;--color-link-hover:#fff}.demo-6{--color-text:#fff;--color-text-alt:#000;--color-bg:#0f0e0e;--color-bg-alt:#a2a2a2;--color-link-hover:#fff;--color-link:#eb3c0c}.demo-7{--color-text:#b4176e;--color-text-alt:#000;--color-bg:#101010;--color-bg-alt:#988797;--color-link-hover:#b4176e;--color-link:#4c34eb}.demo-8{--color-text:#000;--color-bg:#606c62;--color-link:#a0ba81;--color-link-hover:#000;--color-bg-alt:#dadada;--color-text-alt:#111}.js .loading:before,.js .loading:after{content:"";z-index:1000;position:fixed}.js .loading:before{width:100%;height:100%;background:var(--color-bg);top:0;left:0}.js .loading:after{width:60px;height:60px;opacity:.4;background:var(--color-link);border-radius:50%;margin:-30px 0 0 -30px;animation:loaderAnim .7s linear infinite alternate forwards;top:50%;left:50%}@keyframes loaderAnim{to{opacity:1;transform:scale(.5)}}a{color:var(--color-link);outline:none;text-decoration:none}a:hover{color:var(--color-link-hover);outline:none}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:0 0}a:focus-visible{background:0 0;outline:2px solid red}.unbutton{font:inherit;background:0 0;border:0;margin:0;padding:0}.unbutton:focus{outline:none}.frame{z-index:1000;width:100%;max-width:none;pointer-events:none;grid-template-rows:repeat(4,auto);grid-template-columns:1fr;grid-template-areas:"title""prev""sponsor""demos";align-content:space-between;padding:1rem;display:grid;position:fixed;top:0;left:0}.frame a,.frame button{pointer-events:auto}.frame__title{grid-area:title;justify-content:flex-start;align-items:center;margin-bottom:.5rem;display:flex}.frame__title-main{margin:0;font-size:1rem;font-weight:400}.frame__title-back{align-items:flex-end;display:flex;position:relative}.frame__title-back span{display:none}.frame__title-back svg{fill:var(--color-link)}.frame__title-back:hover svg,.frame__title-back:focus svg{fill:var(--color-link-hover)}.frame__demos{grid-area:demos}.frame__demos a{margin-left:2rem;position:relative}.frame__demo--current,.frame__demo--current:hover{color:var(--color-text)}.frame__prev{grid-area:prev;justify-self:start}.frame__demos-title{display:block}.grid{width:100%;grid-template-columns:repeat(8,1fr);display:grid;position:relative}.grid__item{will-change:transform;grid-column:var(--c);grid-row:var(--r);position:relative}.grid__item-img{width:100%;height:auto;aspect-ratio:1;will-change:transform,opacity;background-position:50%;background-size:cover;position:relative}.demo-1 .grid__item-img{filter:contrast(70%)}.cover{width:100%;height:100vh;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.cover__title{margin:0;font-family:novecento-sans-wide,sans-serif;font-size:8vw;font-weight:600}.cover__title sup{vertical-align:75%;font-size:4vw;font-weight:700}.cover__subtitle{margin:0;font-size:1.5rem;font-weight:400}.footer{color:var(--color-text-alt);background:var(--color-bg-alt);height:100vh;z-index:200;text-transform:none;justify-content:center;align-items:center;font-size:5vh;line-height:1.2;display:flex;position:relative}.footer p{max-width:40ch}@media screen and (min-width:53em){.frame{height:100vh;grid-template:"prev sponsor"". ."1fr"title demos"/auto 1fr}.frame__demos{white-space:nowrap;justify-self:end;margin:0 1rem}.frame__demo--current:after{content:"";height:120%;width:1px;background:currentColor;position:absolute;top:100%;left:50%}.frame__demos-title{display:inline}} -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Grid Scroll Animations | Demo 1 | Codrops

Grid Scroll Animations

Back to the article
Previous demo

Thomas Vance®

並外れたファッション

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

-------------------------------------------------------------------------------- /dist/index2.html: -------------------------------------------------------------------------------- 1 | Grid Scroll Animations | Demo 2 | Codrops

Grid Scroll Animations

Back to the article
Previous demo

Thomas Vance®

並外れたファッション

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

-------------------------------------------------------------------------------- /dist/index3.html: -------------------------------------------------------------------------------- 1 | Grid Scroll Animations | Demo 3 | Codrops

Grid Scroll Animations

Back to the article
Previous demo

Thomas Vance®

並外れたファッション

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

-------------------------------------------------------------------------------- /dist/index4.html: -------------------------------------------------------------------------------- 1 | Grid Scroll Animations | Demo 4 | Codrops

Grid Scroll Animations

Back to the article
Previous demo

Thomas Vance®

並外れたファッション

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

-------------------------------------------------------------------------------- /dist/index5.html: -------------------------------------------------------------------------------- 1 | Grid Scroll Animations | Demo 5 | Codrops

Grid Scroll Animations

Back to the article
Previous demo

Thomas Vance®

並外れたファッション

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

-------------------------------------------------------------------------------- /dist/index6.html: -------------------------------------------------------------------------------- 1 | Grid Scroll Animations | Demo 6 | Codrops

Grid Scroll Animations

Back to the article
Previous demo

Thomas Vance®

並外れたファッション

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

-------------------------------------------------------------------------------- /dist/index7.html: -------------------------------------------------------------------------------- 1 | Grid Scroll Animations | Demo 7 | Codrops

Grid Scroll Animations

Back to the article
Previous demo

Thomas Vance®

並外れたファッション

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

-------------------------------------------------------------------------------- /dist/index8.html: -------------------------------------------------------------------------------- 1 | Grid Scroll Animations | Demo 8 | Codrops

Grid Scroll Animations

Back to the article
Previous demo

Thomas Vance®

並外れたファッション

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ScrollAnimationsGrid", 3 | "version": "1.0.0", 4 | "browserslist": "> 0.5%, last 2 versions, not dead", 5 | "description": "Scroll animations for images when they enter/leave the viewport", 6 | "scripts": { 7 | "start": "parcel src/index.html --open", 8 | "clean": "rm -rf dist/*", 9 | "build:parcel": "parcel build src/index.html --no-content-hash --no-source-maps --public-url ./", 10 | "build": "npm run clean && npm run build:parcel" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git://github.com/codrops/ScrollAnimationsGrid.git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "https://tympanus.net/codrops", 20 | "bugs": { 21 | "url": "https://github.com/codrops/ScrollAnimationsGrid/issues" 22 | }, 23 | "devDependencies": { 24 | "parcel": "^2.5.0" 25 | }, 26 | "dependencies": { 27 | "@studio-freight/lenis": "^0.1.2", 28 | "gsap": "^3.10.4", 29 | "imagesloaded": "^5.0.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 18px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #111; 14 | --color-bg: #d8d2cd; 15 | --color-link: #b41717; 16 | --color-link-hover: #000; 17 | --color-bg-alt: #c3bcbc; 18 | --color-text-alt: #111; 19 | color: var(--color-text); 20 | background-color: var(--color-bg); 21 | font-family: roc-grotesk, sans-serif; 22 | text-transform: uppercase; 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | overflow-x: hidden; 26 | } 27 | 28 | .demo-2 { 29 | --color-text: #b41717; 30 | --color-text-alt: #b41717; 31 | --color-bg: #000000; 32 | --color-bg-alt: #9c9191; 33 | --color-link-hover: #fff; 34 | } 35 | 36 | .demo-3 { 37 | --color-text: #000000; 38 | --color-text-alt: #000000; 39 | --color-bg: #846c64; 40 | --color-bg-alt: #d1d1d1; 41 | --color-link-hover: #000; 42 | --color-link: #fff; 43 | } 44 | 45 | .demo-4 { 46 | --color-text: #ffffff; 47 | --color-text-alt: #78757e; 48 | --color-bg: #ccc3cf; 49 | --color-bg-alt: #000000; 50 | --color-link-hover: #fff; 51 | --color-link: #d6238c; 52 | } 53 | 54 | .demo-5 { 55 | --color-text: #000000; 56 | --color-text-alt: #000000; 57 | --color-bg: #6c7059; 58 | --color-bg-alt: #ffffff; 59 | --color-link-hover: #fff; 60 | } 61 | 62 | .demo-6 { 63 | --color-text: #ffffff; 64 | --color-text-alt: #000000; 65 | --color-bg: #0f0e0e; 66 | --color-bg-alt: #a2a2a2; 67 | --color-link-hover: #fff; 68 | --color-link: #eb3c0c; 69 | } 70 | 71 | .demo-7 { 72 | --color-text: #b4176e; 73 | --color-text-alt: #000000; 74 | --color-bg: #101010; 75 | --color-bg-alt: #988797; 76 | --color-link-hover: #b4176e; 77 | --color-link: #4c34eb; 78 | } 79 | 80 | .demo-8 { 81 | --color-text: #000000; 82 | --color-bg: #606c62; 83 | --color-link: #a0ba81; 84 | --color-link-hover: #000; 85 | --color-bg-alt: #dadada; 86 | --color-text-alt: #111; 87 | } 88 | 89 | /* Page Loader */ 90 | .js .loading::before, 91 | .js .loading::after { 92 | content: ''; 93 | position: fixed; 94 | z-index: 1000; 95 | } 96 | 97 | .js .loading::before { 98 | top: 0; 99 | left: 0; 100 | width: 100%; 101 | height: 100%; 102 | background: var(--color-bg); 103 | } 104 | 105 | .js .loading::after { 106 | top: 50%; 107 | left: 50%; 108 | width: 60px; 109 | height: 60px; 110 | margin: -30px 0 0 -30px; 111 | border-radius: 50%; 112 | opacity: 0.4; 113 | background: var(--color-link); 114 | animation: loaderAnim 0.7s linear infinite alternate forwards; 115 | 116 | } 117 | 118 | @keyframes loaderAnim { 119 | to { 120 | opacity: 1; 121 | transform: scale3d(0.5,0.5,1); 122 | } 123 | } 124 | 125 | a { 126 | text-decoration: none; 127 | color: var(--color-link); 128 | outline: none; 129 | } 130 | 131 | a:hover { 132 | color: var(--color-link-hover); 133 | outline: none; 134 | } 135 | 136 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 137 | a:focus { 138 | /* Provide a fallback style for browsers 139 | that don't support :focus-visible */ 140 | outline: none; 141 | background: lightgrey; 142 | } 143 | 144 | a:focus:not(:focus-visible) { 145 | /* Remove the focus indicator on mouse-focus for browsers 146 | that do support :focus-visible */ 147 | background: transparent; 148 | } 149 | 150 | a:focus-visible { 151 | /* Draw a very noticeable focus style for 152 | keyboard-focus on browsers that do support 153 | :focus-visible */ 154 | outline: 2px solid red; 155 | background: transparent; 156 | } 157 | 158 | .unbutton { 159 | background: none; 160 | border: 0; 161 | padding: 0; 162 | margin: 0; 163 | font: inherit; 164 | } 165 | 166 | .unbutton:focus { 167 | outline: none; 168 | } 169 | 170 | .frame { 171 | position: fixed; 172 | z-index: 1000; 173 | top: 0; 174 | left: 0; 175 | display: grid; 176 | align-content: space-between; 177 | width: 100%; 178 | max-width: none; 179 | padding: 1rem; 180 | pointer-events: none; 181 | grid-template-columns: 1fr; 182 | grid-template-rows: repeat(4,auto); 183 | grid-template-areas: 'title' 'prev' 'sponsor' 'demos' ; 184 | } 185 | 186 | .frame a, 187 | .frame button { 188 | pointer-events: auto; 189 | } 190 | 191 | .frame__title { 192 | grid-area: title; 193 | justify-content: flex-start; 194 | align-items: center; 195 | display: flex; 196 | margin-bottom: 0.5rem; 197 | } 198 | 199 | .frame__title-main { 200 | font-size: 1rem; 201 | margin: 0; 202 | font-weight: 400; 203 | } 204 | 205 | .frame__title-back { 206 | position: relative; 207 | display: flex; 208 | align-items: flex-end; 209 | } 210 | 211 | .frame__title-back span { 212 | display: none; 213 | } 214 | 215 | .frame__title-back svg { 216 | fill: var(--color-link); 217 | } 218 | 219 | .frame__title-back:hover svg, 220 | .frame__title-back:focus svg { 221 | fill: var(--color-link-hover); 222 | } 223 | 224 | .frame__demos { 225 | grid-area: demos; 226 | } 227 | 228 | .frame__demos a { 229 | margin-left: 2rem; 230 | position: relative; 231 | } 232 | 233 | .frame__demo--current, 234 | .frame__demo--current:hover { 235 | color: var(--color-text); 236 | } 237 | 238 | .frame__prev { 239 | grid-area: prev; 240 | justify-self: start; 241 | } 242 | 243 | .frame__demos-title { 244 | display: block; 245 | } 246 | 247 | .grid { 248 | position: relative; 249 | width: 100%; 250 | display: grid; 251 | grid-template-columns: repeat(8,1fr); 252 | } 253 | 254 | .grid__item { 255 | position: relative; 256 | will-change: transform; 257 | grid-column: var(--c); 258 | grid-row: var(--r); 259 | } 260 | 261 | .grid__item-img { 262 | position: relative; 263 | width: 100%; 264 | height: auto; 265 | aspect-ratio: 1; 266 | background-size: cover; 267 | background-position: 50% 50%; 268 | will-change: transform, opacity; 269 | } 270 | 271 | .demo-1 .grid__item-img { 272 | filter: contrast(70%); 273 | } 274 | 275 | .cover { 276 | position: fixed; 277 | width: 100%; 278 | height: 100vh; 279 | top: 0; 280 | left: 0; 281 | display: flex; 282 | flex-direction: column; 283 | align-items: center; 284 | justify-content: center; 285 | pointer-events: none; 286 | } 287 | 288 | .cover__title { 289 | font-family: novecento-sans-wide, sans-serif; 290 | font-size: 8vw; 291 | font-weight: 600; 292 | margin: 0; 293 | } 294 | 295 | .cover__title sup { 296 | font-size: 4vw; 297 | font-weight: bold; 298 | vertical-align: 75%; 299 | } 300 | 301 | .cover__subtitle { 302 | font-size: 1.5rem; 303 | font-weight: 400; 304 | margin: 0; 305 | } 306 | 307 | .footer { 308 | color: var(--color-text-alt); 309 | background: var(--color-bg-alt); 310 | height: 100vh; 311 | font-size: 5vh; 312 | line-height: 1.2; 313 | position: relative; 314 | z-index: 200; 315 | text-transform: none; 316 | display: flex; 317 | align-items: center; 318 | justify-content: center; 319 | } 320 | 321 | .footer p { 322 | max-width: 40ch; 323 | } 324 | 325 | @media screen and (min-width: 53em) { 326 | .frame { 327 | height: 100vh; 328 | grid-template-columns: auto 1fr; 329 | grid-template-rows: auto 1fr auto; 330 | grid-template-areas: 'prev sponsor' '... ...' 'title demos'; 331 | } 332 | .frame__demos { 333 | justify-self: end; 334 | margin: 0 1rem; 335 | white-space: nowrap; 336 | } 337 | .frame__demo--current::after { 338 | content: ''; 339 | position: absolute; 340 | top: 100%; 341 | height: 120%; 342 | width: 1px; 343 | left: 50%; 344 | background: currentColor; 345 | } 346 | .frame__demos-title { 347 | display: inline; 348 | } 349 | } -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/favicon.ico -------------------------------------------------------------------------------- /src/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/1.jpg -------------------------------------------------------------------------------- /src/img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/10.jpg -------------------------------------------------------------------------------- /src/img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/11.jpg -------------------------------------------------------------------------------- /src/img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/12.jpg -------------------------------------------------------------------------------- /src/img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/13.jpg -------------------------------------------------------------------------------- /src/img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/14.jpg -------------------------------------------------------------------------------- /src/img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/15.jpg -------------------------------------------------------------------------------- /src/img/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/16.jpg -------------------------------------------------------------------------------- /src/img/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/17.jpg -------------------------------------------------------------------------------- /src/img/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/18.jpg -------------------------------------------------------------------------------- /src/img/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/19.jpg -------------------------------------------------------------------------------- /src/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/2.jpg -------------------------------------------------------------------------------- /src/img/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/20.jpg -------------------------------------------------------------------------------- /src/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/3.jpg -------------------------------------------------------------------------------- /src/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/4.jpg -------------------------------------------------------------------------------- /src/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/5.jpg -------------------------------------------------------------------------------- /src/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/6.jpg -------------------------------------------------------------------------------- /src/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/7.jpg -------------------------------------------------------------------------------- /src/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/8.jpg -------------------------------------------------------------------------------- /src/img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollAnimationsGrid/45dd4d8016545ed25ea542046f85c513fef1501a/src/img/9.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Scroll Animations | Demo 1 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |

Grid Scroll Animations

27 | 28 | Back to the article 29 | 30 | 31 | 32 | 33 |
34 | Previous demo 35 | 46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | 119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |

Thomas Vance®

182 |

並外れたファッション

183 |
184 |
185 |

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

186 |
187 |
188 |
189 | 190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /src/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Scroll Animations | Demo 2 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |

Grid Scroll Animations

27 | 28 | Back to the article 29 | 30 | 31 | 32 | 33 |
34 | Previous demo 35 | 46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 | 137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |

Thomas Vance®

200 |

並外れたファッション

201 |
202 |
203 |

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

204 |
205 |
206 |
207 | 208 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /src/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Scroll Animations | Demo 3 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |

Grid Scroll Animations

27 | 28 | Back to the article 29 | 30 | 31 | 32 | 33 |
34 | Previous demo 35 | 46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | 119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |

Thomas Vance®

182 |

並外れたファッション

183 |
184 |
185 |

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

186 |
187 |
188 |
189 | 190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /src/index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Scroll Animations | Demo 4 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |

Grid Scroll Animations

27 | 28 | Back to the article 29 | 30 | 31 | 32 | 33 |
34 | Previous demo 35 | 46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | 119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |

Thomas Vance®

182 |

並外れたファッション

183 |
184 |
185 |

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

186 |
187 |
188 |
189 | 190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /src/index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Scroll Animations | Demo 5 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |

Grid Scroll Animations

27 | 28 | Back to the article 29 | 30 | 31 | 32 | 33 |
34 | Previous demo 35 | 46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | 119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |

Thomas Vance®

182 |

並外れたファッション

183 |
184 |
185 |

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

186 |
187 |
188 |
189 | 190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /src/index6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Scroll Animations | Demo 6 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |

Grid Scroll Animations

27 | 28 | Back to the article 29 | 30 | 31 | 32 | 33 |
34 | Previous demo 35 | 46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | 119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |

Thomas Vance®

182 |

並外れたファッション

183 |
184 |
185 |

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

186 |
187 |
188 |
189 | 190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /src/index7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Scroll Animations | Demo 7 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |

Grid Scroll Animations

27 | 28 | Back to the article 29 | 30 | 31 | 32 | 33 |
34 | Previous demo 35 | 46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 | 137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |

Thomas Vance®

200 |

並外れたファッション

201 |
202 |
203 |

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

204 |
205 |
206 |
207 | 208 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /src/index8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Scroll Animations | Demo 8 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |

Grid Scroll Animations

27 | 28 | Back to the article 29 | 30 | 31 | 32 | 33 |
34 | Previous demo 35 | 46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 | 137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |

Thomas Vance®

200 |

並外れたファッション

201 |
202 |
203 |

From the dawn of civilisation onwards crowds have always undergone the influence of illusions. It is to the creators of illusions that they have raised more temples, statues, and altars than to any other class of men.

204 |
205 |
206 |
207 | 208 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /src/js/demo1/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils'; 2 | import Lenis from '@studio-freight/lenis' 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const gridItems = [...document.querySelectorAll('.grid > .grid__item')]; 8 | 9 | // Preload images 10 | preloadImages('.grid__item-img').then( _ => { 11 | document.body.classList.remove('loading'); 12 | 13 | // Smooth scrolling initialization (using Lenis https://github.com/studio-freight/lenis) 14 | const lenis = new Lenis({ 15 | lerp: 0.1, 16 | smooth: true, 17 | }); 18 | const scrollFn = () => { 19 | lenis.raf(); 20 | requestAnimationFrame(scrollFn); 21 | }; 22 | requestAnimationFrame(scrollFn); 23 | 24 | gridItems.forEach(item => { 25 | 26 | const image = item.querySelector('.grid__item-img'); 27 | 28 | gsap.timeline({ 29 | scrollTrigger: { 30 | trigger: item, 31 | start: "top top", 32 | end: "bottom top", 33 | scrub: true 34 | } 35 | }) 36 | .set(image, { 37 | transformOrigin: `${gsap.utils.random(0,1) > 0.5 ? 0 : 100}% 100%` 38 | }) 39 | .to(image, { 40 | ease: 'none', 41 | scale: 0 42 | }); 43 | 44 | }); 45 | }); 46 | 47 | -------------------------------------------------------------------------------- /src/js/demo2/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils'; 2 | import Lenis from '@studio-freight/lenis' 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const gridItems = [...document.querySelectorAll('.grid > .grid__item')]; 8 | 9 | // Preload images 10 | preloadImages('.grid__item-img').then( _ => { 11 | document.body.classList.remove('loading'); 12 | 13 | // Smooth scrolling initialization (using Lenis https://github.com/studio-freight/lenis) 14 | const lenis = new Lenis({ 15 | lerp: 0.1, 16 | smooth: true, 17 | }); 18 | const scrollFn = () => { 19 | lenis.raf(); 20 | requestAnimationFrame(scrollFn); 21 | }; 22 | requestAnimationFrame(scrollFn); 23 | 24 | gridItems.forEach(item => { 25 | 26 | const image = item.querySelector('.grid__item-img'); 27 | 28 | gsap.timeline({ 29 | scrollTrigger: { 30 | trigger: item, 31 | start: "top 40%", 32 | end: "top top", 33 | scrub: true 34 | } 35 | }) 36 | .set(image, { 37 | transformOrigin: `50% 200%` 38 | }) 39 | .to(image, { 40 | ease: 'none', 41 | scale: 0.5, 42 | borderRadius: '50%' 43 | }); 44 | 45 | }); 46 | }); 47 | 48 | -------------------------------------------------------------------------------- /src/js/demo3/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils'; 2 | import Lenis from '@studio-freight/lenis' 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const gridItems = [...document.querySelectorAll('.grid > .grid__item')]; 8 | 9 | // Preload images 10 | preloadImages('.grid__item-img').then( _ => { 11 | document.body.classList.remove('loading'); 12 | 13 | // Smooth scrolling initialization (using Lenis https://github.com/studio-freight/lenis) 14 | const lenis = new Lenis({ 15 | lerp: 0.1, 16 | smooth: true, 17 | }); 18 | const scrollFn = () => { 19 | lenis.raf(); 20 | requestAnimationFrame(scrollFn); 21 | }; 22 | requestAnimationFrame(scrollFn); 23 | 24 | gridItems.forEach(item => { 25 | 26 | const image = item.querySelector('.grid__item-img'); 27 | 28 | const xPercentRandomVal = gsap.utils.random(-100,100); 29 | 30 | gsap.timeline() 31 | .addLabel('start', 0) 32 | .set(image, { 33 | transformOrigin: `${xPercentRandomVal < 0 ? 0 : 100}% 100%` 34 | }, 'start') 35 | .to(image, { 36 | ease: 'none', 37 | scale: 0, 38 | scrollTrigger: { 39 | trigger: item, 40 | start: "top top", 41 | end: "bottom top", 42 | scrub: true, 43 | } 44 | }, 'start') 45 | .to(item, { 46 | ease: 'none', 47 | xPercent: xPercentRandomVal, 48 | scrollTrigger: { 49 | trigger: item, 50 | start: "top bottom", 51 | end: "top top", 52 | scrub: true 53 | } 54 | }, 'start'); 55 | 56 | }); 57 | }); 58 | 59 | -------------------------------------------------------------------------------- /src/js/demo4/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils'; 2 | import Lenis from '@studio-freight/lenis' 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const gridItems = [...document.querySelectorAll('.grid > .grid__item')]; 8 | 9 | // Preload images 10 | preloadImages('.grid__item-img').then( _ => { 11 | document.body.classList.remove('loading'); 12 | 13 | // Smooth scrolling initialization (using Lenis https://github.com/studio-freight/lenis) 14 | const lenis = new Lenis({ 15 | lerp: 0.1, 16 | smooth: true, 17 | }); 18 | const scrollFn = () => { 19 | lenis.raf(); 20 | requestAnimationFrame(scrollFn); 21 | }; 22 | requestAnimationFrame(scrollFn); 23 | 24 | gridItems.forEach(item => { 25 | 26 | const image = item.querySelector('.grid__item-img'); 27 | 28 | const yPercentRandomVal = gsap.utils.random(-100,100); 29 | 30 | gsap.timeline() 31 | .addLabel('start', 0) 32 | .to(image, { 33 | ease: 'none', 34 | borderRadius: '50%', 35 | scrollTrigger: { 36 | trigger: item, 37 | start: "top 80%", 38 | end: "top top", 39 | scrub: true, 40 | } 41 | }, 'start') 42 | .to(item, { 43 | ease: 'none', 44 | yPercent: yPercentRandomVal, 45 | scrollTrigger: { 46 | trigger: item, 47 | start: "top bottom", 48 | end: "top top", 49 | scrub: true 50 | } 51 | }, 'start'); 52 | 53 | }); 54 | }); 55 | 56 | -------------------------------------------------------------------------------- /src/js/demo5/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils'; 2 | import Lenis from '@studio-freight/lenis' 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const gridItems = [...document.querySelectorAll('.grid > .grid__item')]; 8 | 9 | // Preload images 10 | preloadImages('.grid__item-img').then( _ => { 11 | document.body.classList.remove('loading'); 12 | 13 | // Smooth scrolling initialization (using Lenis https://github.com/studio-freight/lenis) 14 | const lenis = new Lenis({ 15 | lerp: 0.1, 16 | smooth: true, 17 | }); 18 | const scrollFn = () => { 19 | lenis.raf(); 20 | requestAnimationFrame(scrollFn); 21 | }; 22 | requestAnimationFrame(scrollFn); 23 | 24 | gridItems.forEach(item => { 25 | 26 | const image = item.querySelector('.grid__item-img'); 27 | 28 | gsap.set(image, { 29 | transformOrigin: `50% 100%` 30 | }); 31 | 32 | gsap.to(image, { 33 | ease: 'none', 34 | scaleX: .5, 35 | scaleY: 3, 36 | scrollTrigger: { 37 | trigger: item, 38 | start: 'top 30%', 39 | end: 'bottom top', 40 | scrub: true, 41 | } 42 | }); 43 | 44 | gsap.to(item, { 45 | ease: 'none', 46 | opacity: 0, 47 | scrollTrigger: { 48 | trigger: item, 49 | start: "top top", 50 | end: "bottom top", 51 | scrub: true 52 | } 53 | }); 54 | 55 | }); 56 | }); 57 | 58 | -------------------------------------------------------------------------------- /src/js/demo6/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils'; 2 | import Lenis from '@studio-freight/lenis' 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const gridItems = [...document.querySelectorAll('.grid > .grid__item')]; 8 | 9 | // Preload images 10 | preloadImages('.grid__item-img').then( _ => { 11 | document.body.classList.remove('loading'); 12 | 13 | // Smooth scrolling initialization (using Lenis https://github.com/studio-freight/lenis) 14 | const lenis = new Lenis({ 15 | lerp: 0.1, 16 | smooth: true, 17 | }); 18 | const scrollFn = () => { 19 | lenis.raf(); 20 | requestAnimationFrame(scrollFn); 21 | }; 22 | requestAnimationFrame(scrollFn); 23 | 24 | gridItems.forEach(item => { 25 | 26 | const image = item.querySelector('.grid__item-img'); 27 | 28 | gsap.timeline() 29 | .set(image, { 30 | transformOrigin: `0% 100%` 31 | }) 32 | .to(image, { 33 | ease: 'back.in(2)', 34 | scaleX: 0, 35 | scaleY: 2.5, 36 | skewY: gsap.utils.random(-5,5), 37 | scrollTrigger: { 38 | trigger: item, 39 | start: "top 70%", 40 | end: "bottom top", 41 | scrub: 0.1, 42 | } 43 | }); 44 | 45 | }); 46 | }); 47 | 48 | -------------------------------------------------------------------------------- /src/js/demo7/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils'; 2 | import Lenis from '@studio-freight/lenis' 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const grid = document.querySelector('.grid'); 8 | const gridItems = [...grid.querySelectorAll('.grid__item')]; 9 | 10 | // Preload images 11 | preloadImages('.grid__item-img').then( _ => { 12 | document.body.classList.remove('loading'); 13 | 14 | // Smooth scrolling initialization (using Lenis https://github.com/studio-freight/lenis) 15 | const lenis = new Lenis({ 16 | lerp: 0.1, 17 | smooth: true, 18 | }); 19 | const scrollFn = () => { 20 | lenis.raf(); 21 | requestAnimationFrame(scrollFn); 22 | }; 23 | requestAnimationFrame(scrollFn); 24 | 25 | let winsize; 26 | const calcWindowSize = () => { 27 | winsize = {width: window.innerWidth, height: window.innerHeight}; 28 | }; 29 | calcWindowSize(); 30 | window.addEventListener('resize', calcWindowSize); 31 | 32 | gridItems.forEach(item => { 33 | 34 | gsap.timeline() 35 | .set(grid, { 36 | perspective: 1000, 37 | perspectiveOrigin: `50% ${winsize.height/2 + lenis.scroll}px` 38 | }) 39 | .to(item, { 40 | ease: 'none', 41 | startAt: {rotationX: 70, scale: 0.7}, 42 | scale: 1, 43 | rotationX: -70, 44 | scrollTrigger: { 45 | trigger: item, 46 | start: 'top bottom', 47 | end: 'bottom top', 48 | scrub: true, 49 | onUpdate: self => gsap.set(grid, { 50 | perspectiveOrigin: () => `50% ${winsize.height/2 + lenis.scroll}px` 51 | }) 52 | } 53 | }); 54 | 55 | }); 56 | }); 57 | 58 | -------------------------------------------------------------------------------- /src/js/demo8/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils'; 2 | import Lenis from '@studio-freight/lenis' 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const gridItems = [...document.querySelectorAll('.grid > .grid__item')]; 8 | 9 | // Preload images 10 | preloadImages('.grid__item-img').then( _ => { 11 | document.body.classList.remove('loading'); 12 | 13 | // Smooth scrolling initialization (using Lenis https://github.com/studio-freight/lenis) 14 | const lenis = new Lenis({ 15 | lerp: 0.1, 16 | smooth: true, 17 | }); 18 | const scrollFn = () => { 19 | lenis.raf(); 20 | requestAnimationFrame(scrollFn); 21 | }; 22 | requestAnimationFrame(scrollFn); 23 | 24 | gridItems.forEach(item => { 25 | 26 | const image = item.querySelector('.grid__item-img'); 27 | 28 | const yPercentRandomVal = gsap.utils.random(-200,200); 29 | 30 | gsap.timeline() 31 | .addLabel('start', 0) 32 | .set(image, { 33 | transformOrigin: `300% 50%` 34 | }, 'start') 35 | .to(image, { 36 | ease: 'none', 37 | startAt: {rotationZ: -30}, 38 | rotationZ: 30, 39 | scrollTrigger: { 40 | trigger: item, 41 | start: "top bottom", 42 | end: "bottom top", 43 | scrub: true, 44 | } 45 | }, 'start') 46 | .to(item, { 47 | ease: 'none', 48 | yPercent: yPercentRandomVal, 49 | scrollTrigger: { 50 | trigger: item, 51 | start: "top bottom", 52 | end: "top top", 53 | scrub: true 54 | } 55 | }, 'start'); 56 | 57 | }); 58 | }); 59 | 60 | -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | const lerp = (a, b, n) => (1 - n) * a + n * b; 4 | 5 | /** 6 | * Preload images 7 | * @param {String} selector - Selector/scope from where images need to be preloaded. Default is 'img' 8 | */ 9 | const preloadImages = (selector = 'img') => { 10 | return new Promise((resolve) => { 11 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 12 | }); 13 | }; 14 | 15 | export { 16 | lerp, 17 | preloadImages 18 | }; --------------------------------------------------------------------------------