├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── 1.abdece96.jpg ├── 1.b2dd7476.jpg ├── 1.e7864b95.jpg ├── 10.4f66b9bf.jpg ├── 10.ba0c70ca.jpg ├── 10.e7aba2b1.jpg ├── 11.bc61a1e3.jpg ├── 11.e51eb489.jpg ├── 11.e75a941d.jpg ├── 12.4061d1aa.jpg ├── 12.aac53079.jpg ├── 12.d01438d5.jpg ├── 13.1bbeab4e.jpg ├── 13.a8b9e252.jpg ├── 14.e53accbf.jpg ├── 14.fab38393.jpg ├── 15.73adc2fc.jpg ├── 15.cfb90561.jpg ├── 16.a7efd02b.jpg ├── 16.bf2e6aed.jpg ├── 17.71510293.jpg ├── 17.79dee7e7.jpg ├── 18.8ad6a6a5.jpg ├── 18.c5d0ab34.jpg ├── 19.70099d5f.jpg ├── 19.8091b01d.jpg ├── 2.40f30460.jpg ├── 2.c629256c.jpg ├── 2.dd89043e.jpg ├── 20.5528d5b7.jpg ├── 20.79785ea9.jpg ├── 21.5ac924ec.jpg ├── 22.699471d5.jpg ├── 23.dbfd7b5e.jpg ├── 24.ec1a04ff.jpg ├── 25.31fbca33.jpg ├── 26.20dd68bc.jpg ├── 27.8a0dc9c0.jpg ├── 28.ed5abea3.jpg ├── 29.31146de1.jpg ├── 3.1e79277a.jpg ├── 3.449799ca.jpg ├── 3.ecfa820e.jpg ├── 30.1e685d15.jpg ├── 4.00c00e57.jpg ├── 4.500b54f2.jpg ├── 4.8ed29d64.jpg ├── 5.208189fa.jpg ├── 5.2667ae3b.jpg ├── 5.7795c51e.jpg ├── 6.3ade7d4e.jpg ├── 6.aa64fc47.jpg ├── 6.ac3cd742.jpg ├── 7.0a1756e3.jpg ├── 7.4183a781.jpg ├── 7.5ac05771.jpg ├── 8.2c69e487.jpg ├── 8.698e0dbd.jpg ├── 8.94720f30.jpg ├── 9.022cbb30.jpg ├── 9.16738e2f.jpg ├── 9.a23c1629.jpg ├── base.98fd6c19.css ├── base.98fd6c19.css.map ├── base.98fd6c19.js ├── base.98fd6c19.js.map ├── favicon.26242483.ico ├── index.html ├── index.html.map ├── index.js ├── index.js.map ├── index2.html ├── index3.html ├── js.00a46daa.js └── js.00a46daa.js.map ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── demo1 │ ├── 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 │ ├── 21.jpg │ ├── 22.jpg │ ├── 23.jpg │ ├── 24.jpg │ ├── 25.jpg │ ├── 26.jpg │ ├── 27.jpg │ ├── 28.jpg │ ├── 29.jpg │ ├── 3.jpg │ ├── 30.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── demo2 │ ├── 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 └── demo3 │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── index.html ├── index2.html ├── index3.html └── js ├── 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 | package-lock.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2020 [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 | # Image Tiles Scroll Animation 2 | 3 | Scroll animations for image grids using [Locomotive Scroll](https://locomotivemtl.github.io/locomotive-scroll/). 4 | 5 | ![Tile Scroll](https://tympanus.net/codrops/wp-content/uploads/2020/10/ScrollAnimationLocomotive.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=51396) 8 | 9 | [Demo](http://tympanus.net/Development/TileScroll/) 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 | - [Locomotive Scroll](https://locomotivemtl.github.io/locomotive-scroll/) 35 | - Images from [Unsplash](http://unsplash.com/) 36 | 37 | ## Misc 38 | 39 | 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/) 40 | 41 | ## License 42 | [MIT](LICENSE) 43 | 44 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /dist/1.abdece96.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/1.abdece96.jpg -------------------------------------------------------------------------------- /dist/1.b2dd7476.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/1.b2dd7476.jpg -------------------------------------------------------------------------------- /dist/1.e7864b95.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/1.e7864b95.jpg -------------------------------------------------------------------------------- /dist/10.4f66b9bf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/10.4f66b9bf.jpg -------------------------------------------------------------------------------- /dist/10.ba0c70ca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/10.ba0c70ca.jpg -------------------------------------------------------------------------------- /dist/10.e7aba2b1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/10.e7aba2b1.jpg -------------------------------------------------------------------------------- /dist/11.bc61a1e3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/11.bc61a1e3.jpg -------------------------------------------------------------------------------- /dist/11.e51eb489.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/11.e51eb489.jpg -------------------------------------------------------------------------------- /dist/11.e75a941d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/11.e75a941d.jpg -------------------------------------------------------------------------------- /dist/12.4061d1aa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/12.4061d1aa.jpg -------------------------------------------------------------------------------- /dist/12.aac53079.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/12.aac53079.jpg -------------------------------------------------------------------------------- /dist/12.d01438d5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/12.d01438d5.jpg -------------------------------------------------------------------------------- /dist/13.1bbeab4e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/13.1bbeab4e.jpg -------------------------------------------------------------------------------- /dist/13.a8b9e252.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/13.a8b9e252.jpg -------------------------------------------------------------------------------- /dist/14.e53accbf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/14.e53accbf.jpg -------------------------------------------------------------------------------- /dist/14.fab38393.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/14.fab38393.jpg -------------------------------------------------------------------------------- /dist/15.73adc2fc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/15.73adc2fc.jpg -------------------------------------------------------------------------------- /dist/15.cfb90561.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/15.cfb90561.jpg -------------------------------------------------------------------------------- /dist/16.a7efd02b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/16.a7efd02b.jpg -------------------------------------------------------------------------------- /dist/16.bf2e6aed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/16.bf2e6aed.jpg -------------------------------------------------------------------------------- /dist/17.71510293.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/17.71510293.jpg -------------------------------------------------------------------------------- /dist/17.79dee7e7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/17.79dee7e7.jpg -------------------------------------------------------------------------------- /dist/18.8ad6a6a5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/18.8ad6a6a5.jpg -------------------------------------------------------------------------------- /dist/18.c5d0ab34.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/18.c5d0ab34.jpg -------------------------------------------------------------------------------- /dist/19.70099d5f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/19.70099d5f.jpg -------------------------------------------------------------------------------- /dist/19.8091b01d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/19.8091b01d.jpg -------------------------------------------------------------------------------- /dist/2.40f30460.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/2.40f30460.jpg -------------------------------------------------------------------------------- /dist/2.c629256c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/2.c629256c.jpg -------------------------------------------------------------------------------- /dist/2.dd89043e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/2.dd89043e.jpg -------------------------------------------------------------------------------- /dist/20.5528d5b7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/20.5528d5b7.jpg -------------------------------------------------------------------------------- /dist/20.79785ea9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/20.79785ea9.jpg -------------------------------------------------------------------------------- /dist/21.5ac924ec.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/21.5ac924ec.jpg -------------------------------------------------------------------------------- /dist/22.699471d5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/22.699471d5.jpg -------------------------------------------------------------------------------- /dist/23.dbfd7b5e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/23.dbfd7b5e.jpg -------------------------------------------------------------------------------- /dist/24.ec1a04ff.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/24.ec1a04ff.jpg -------------------------------------------------------------------------------- /dist/25.31fbca33.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/25.31fbca33.jpg -------------------------------------------------------------------------------- /dist/26.20dd68bc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/26.20dd68bc.jpg -------------------------------------------------------------------------------- /dist/27.8a0dc9c0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/27.8a0dc9c0.jpg -------------------------------------------------------------------------------- /dist/28.ed5abea3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/28.ed5abea3.jpg -------------------------------------------------------------------------------- /dist/29.31146de1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/29.31146de1.jpg -------------------------------------------------------------------------------- /dist/3.1e79277a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/3.1e79277a.jpg -------------------------------------------------------------------------------- /dist/3.449799ca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/3.449799ca.jpg -------------------------------------------------------------------------------- /dist/3.ecfa820e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/3.ecfa820e.jpg -------------------------------------------------------------------------------- /dist/30.1e685d15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/30.1e685d15.jpg -------------------------------------------------------------------------------- /dist/4.00c00e57.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/4.00c00e57.jpg -------------------------------------------------------------------------------- /dist/4.500b54f2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/4.500b54f2.jpg -------------------------------------------------------------------------------- /dist/4.8ed29d64.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/4.8ed29d64.jpg -------------------------------------------------------------------------------- /dist/5.208189fa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/5.208189fa.jpg -------------------------------------------------------------------------------- /dist/5.2667ae3b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/5.2667ae3b.jpg -------------------------------------------------------------------------------- /dist/5.7795c51e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/5.7795c51e.jpg -------------------------------------------------------------------------------- /dist/6.3ade7d4e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/6.3ade7d4e.jpg -------------------------------------------------------------------------------- /dist/6.aa64fc47.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/6.aa64fc47.jpg -------------------------------------------------------------------------------- /dist/6.ac3cd742.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/6.ac3cd742.jpg -------------------------------------------------------------------------------- /dist/7.0a1756e3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/7.0a1756e3.jpg -------------------------------------------------------------------------------- /dist/7.4183a781.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/7.4183a781.jpg -------------------------------------------------------------------------------- /dist/7.5ac05771.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/7.5ac05771.jpg -------------------------------------------------------------------------------- /dist/8.2c69e487.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/8.2c69e487.jpg -------------------------------------------------------------------------------- /dist/8.698e0dbd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/8.698e0dbd.jpg -------------------------------------------------------------------------------- /dist/8.94720f30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/8.94720f30.jpg -------------------------------------------------------------------------------- /dist/9.022cbb30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/9.022cbb30.jpg -------------------------------------------------------------------------------- /dist/9.16738e2f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/9.16738e2f.jpg -------------------------------------------------------------------------------- /dist/9.a23c1629.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/dist/9.a23c1629.jpg -------------------------------------------------------------------------------- /dist/base.98fd6c19.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 16px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #fff; 14 | --color-bg: #111; 15 | --color-link: #aaa; 16 | --color-link-hover: #fff; 17 | --color-alt: #7f6a57; 18 | color: var(--color-text); 19 | background-color: var(--color-bg); 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-font-smoothing: grayscale; 22 | counter-reset: contentSection; 23 | font-family: neuzeit-grotesk, sans-serif; 24 | } 25 | 26 | /* Page Loader */ 27 | .js .loading::before, 28 | .js .loading::after { 29 | content: ''; 30 | position: fixed; 31 | z-index: 1000; 32 | } 33 | 34 | .js .loading::before { 35 | top: 0; 36 | left: 0; 37 | width: 100%; 38 | height: 100%; 39 | background: var(--color-bg); 40 | } 41 | 42 | .js .loading::after { 43 | top: 50%; 44 | left: 50%; 45 | width: 60px; 46 | height: 60px; 47 | margin: -30px 0 0 -30px; 48 | border-radius: 50%; 49 | opacity: 0.4; 50 | background: var(--color-link); 51 | animation: loaderAnim 0.7s linear infinite alternate forwards; 52 | 53 | } 54 | 55 | @keyframes loaderAnim { 56 | to { 57 | opacity: 1; 58 | transform: scale3d(0.5,0.5,1); 59 | } 60 | } 61 | 62 | a { 63 | text-decoration: underline; 64 | color: var(--color-link); 65 | outline: none; 66 | } 67 | 68 | a:hover, 69 | a:focus { 70 | color: var(--color-link-hover); 71 | outline: none; 72 | text-decoration: none; 73 | } 74 | 75 | main { 76 | overflow: hidden; 77 | position: relative; 78 | } 79 | 80 | .frame { 81 | text-align: center; 82 | position: relative; 83 | z-index: 900; 84 | } 85 | 86 | .frame__author { 87 | text-decoration: none; 88 | color: var(--color-alt); 89 | } 90 | 91 | .frame__title { 92 | font-size: 1rem; 93 | margin: 0 0 1rem; 94 | font-weight: normal; 95 | } 96 | 97 | .frame__links { 98 | display: inline; 99 | } 100 | 101 | .frame__links a:not(:last-child), 102 | .frame__demos a:not(:last-child) { 103 | margin-right: 1rem; 104 | } 105 | 106 | .frame__demos { 107 | margin: 1rem 0; 108 | } 109 | 110 | .frame__demo--current, 111 | .frame__demo--current:hover { 112 | text-decoration: none; 113 | color: var(--color-alt); 114 | } 115 | 116 | .content { 117 | padding: 3rem; 118 | min-height: 90vh; 119 | display: flex; 120 | position: relative; 121 | flex-direction: column; 122 | align-content: center; 123 | justify-content: space-between; 124 | } 125 | 126 | .content--auto { 127 | min-height: 0; 128 | } 129 | 130 | .content--feature { 131 | justify-content: flex-start; 132 | min-height: 0; 133 | } 134 | 135 | .content--fixed { 136 | position: fixed; 137 | z-index: 1000; 138 | width: 100%; 139 | top: 0; 140 | } 141 | 142 | .content__pretitle { 143 | margin-top: auto; 144 | font-size: 1.85rem; 145 | color: var(--color-alt); 146 | } 147 | 148 | .content__pretitle::before { 149 | content: "\2015"; 150 | margin-right: 0.25rem; 151 | } 152 | 153 | .content__title { 154 | font-size: 9vw; 155 | line-height: 0.8; 156 | margin: 0 0 3rem 0; 157 | font-weight: 400; 158 | max-width: 800px; 159 | will-change: transform; 160 | } 161 | 162 | .content__text { 163 | font-size: 2.25rem; 164 | font-size: clamp(1rem, 4vw, 2.25rem); 165 | } 166 | 167 | .content__text--right { 168 | align-self: flex-end; 169 | } 170 | 171 | .content__text--centered { 172 | margin: auto; 173 | } 174 | 175 | .content__breakout { 176 | margin: 0 -3rem; 177 | white-space: nowrap; 178 | text-transform: uppercase; 179 | font-family: span, serif; 180 | font-weight: 200; 181 | font-style: italic; 182 | color: #211f1b; 183 | } 184 | 185 | .content__breakout--big { 186 | font-size: 13vw; 187 | font-weight: 200; 188 | } 189 | 190 | .content__breakout--medium { 191 | font-size: 5vw; 192 | } 193 | 194 | .tiles { 195 | --tiles-height: 52vw; 196 | height: var(--tiles-height); 197 | position: relative; 198 | overflow: hidden; 199 | } 200 | 201 | .tiles--columns-rotated { 202 | --tiles-height: 180vmax; 203 | } 204 | 205 | .tiles--columns { 206 | --tiles-height: 140vh; 207 | } 208 | 209 | .tiles--oneline { 210 | --tiles-height: 50vh; 211 | min-height: 400px; 212 | margin: 10vh 0; 213 | } 214 | 215 | .tiles--small { 216 | --tiles-height: 100px; 217 | margin: 10vh 0 0; 218 | } 219 | 220 | .tiles--fixed { 221 | --tiles-height: 65vw; 222 | margin-top: 25vh; 223 | } 224 | 225 | .tiles--perspective { 226 | overflow: visible; 227 | perspective: 1000px; 228 | --tiles-height: 500px; 229 | } 230 | 231 | .tiles__wrap { 232 | width: 150%; 233 | --tileswrap-height: var(--tiles-height); 234 | height: var(--tileswrap-height); 235 | position: absolute; 236 | left: 50%; 237 | top: 50%; 238 | transform: translate3d(-50%,-50%, 0); 239 | } 240 | 241 | .tiles--rotated .tiles__wrap { 242 | --tileswrap-height: calc(var(--tiles-height) * 1.8); 243 | transform: translate3d(-50%,-50%, 0) rotate(22.5deg); 244 | } 245 | 246 | .tiles--columns-rotated .tiles__wrap { 247 | width: 150%; 248 | display: flex; 249 | transform: translate3d(-50%,-50%,0) rotate(-22.5deg); 250 | left: 50%; 251 | top: 50%; 252 | align-items: center; 253 | justify-content: center; 254 | } 255 | 256 | .tiles--columns .tiles__wrap { 257 | width: 100%; 258 | display: flex; 259 | --tileswrap-height: calc(var(--tiles-height) * 1.4); 260 | transform: translate3d(0,-50%,0); 261 | left: 0; 262 | top: 50%; 263 | } 264 | 265 | .tiles--perspective .tiles__wrap { 266 | width: 200%; 267 | transform: translate3d(-50%,-50%,0) translateX(-25%) translateZ(-1200px) rotateX(75.5deg) rotateZ(12deg); 268 | } 269 | 270 | .tiles--fixed .tiles__wrap { 271 | width: 100%; 272 | } 273 | 274 | .tiles__line { 275 | display: flex; 276 | } 277 | 278 | .tiles--columns .tiles__line { 279 | width: 25%; 280 | padding: 0 1rem; 281 | display: block; 282 | } 283 | 284 | .tiles--columns-rotated .tiles__line { 285 | width: 320px; 286 | flex: none; 287 | padding: 0 1.5vw; 288 | display: block; 289 | } 290 | 291 | .tiles--columns-rotated .tiles__line:nth-child(even) { 292 | margin-top: -160px; 293 | } 294 | 295 | .tiles--oneline .tiles__line { 296 | height: 100%; 297 | } 298 | 299 | .tiles--small .tiles__line { 300 | height: 100%; 301 | } 302 | 303 | .tiles__line-img { 304 | --tile-margin: 2vw; 305 | flex: none; 306 | width: calc(16.6666% - var(--tile-margin) * 2); 307 | height: calc( var(--tileswrap-height) / 3 - (3 * var(--tile-margin) / 2)); 308 | margin: var(--tile-margin); 309 | background-size: cover; 310 | background-position: 50% 50%; 311 | } 312 | 313 | .tiles--perspective .tiles__line-img { 314 | backface-visibility: hidden; 315 | outline: 1px solid transparent; 316 | --tile-margin: 1vw; 317 | width: calc(16.6666% - var(--tile-margin) * 2); 318 | height: calc(16.666vw * 1.3); 319 | } 320 | 321 | .tiles--oneline .tiles__line-img { 322 | --tile-margin: 1vw; 323 | margin: 0 var(--tile-margin); 324 | width: calc(25% - var(--tile-margin) * 2); 325 | height: 100%; 326 | } 327 | 328 | .tiles--small .tiles__line-img { 329 | --tile-margin: 5px; 330 | margin: 0 var(--tile-margin); 331 | width: calc(12.5% - var(--tile-margin) * 2); 332 | height: 100%; 333 | } 334 | 335 | .tiles--rotated .tiles__line-img { 336 | --tile-margin: 1vw; 337 | width: calc(16.6666% - var(--tile-margin) * 2); 338 | height: calc( var(--tileswrap-height) / 5 - (4 * var(--tile-margin) / 2)); 339 | } 340 | 341 | .tiles--columns-rotated .tiles__line-img { 342 | --tile-margin: 3vw 0; 343 | width: 100%; 344 | height: 400px; 345 | } 346 | 347 | .tiles--columns .tiles__line-img { 348 | --tile-margin: 2rem 0; 349 | width: 100%; 350 | height: calc(25vw * 1.3); 351 | } 352 | 353 | .tiles--fixed .tiles__line-img { 354 | --tile-margin: 10px; 355 | -webkit-filter: brightness(0.8); 356 | width: calc(16.6666% - var(--tile-margin) * 2); 357 | height: calc( var(--tileswrap-height) / 3 - (3 * var(--tile-margin) / 2)); 358 | } 359 | 360 | .tiles--darker .tiles__line-img { 361 | opacity: 0.7; 362 | } 363 | 364 | .tiles__title { 365 | position: absolute; 366 | height: 100vh; 367 | width: 100%; 368 | display: flex; 369 | justify-content: center; 370 | align-items: center; 371 | font-size: 10vw; 372 | padding: 3rem; 373 | margin: 0; 374 | line-height: 0.8; 375 | font-family: span, serif; 376 | font-weight: 700; 377 | font-style: normal; 378 | } 379 | 380 | .tiles__title--alt { 381 | font-size: 9vw; 382 | font-size: clamp(2rem, 9vw, 7.25rem); 383 | } 384 | 385 | .tiles__title--intro { 386 | padding-top: 10vh; 387 | align-items: flex-start; 388 | justify-content: flex-start; 389 | } 390 | 391 | .tiles__title--right { 392 | justify-content: flex-end; 393 | } 394 | 395 | .tiles__title--left { 396 | justify-content: flex-start; 397 | } 398 | 399 | .tiles__title--full { 400 | height: 100%; 401 | } 402 | 403 | .backtop { 404 | align-self: center; 405 | margin: auto 0; 406 | font-size: 6vw; 407 | cursor: pointer; 408 | text-decoration: none; 409 | } 410 | 411 | .backtop::after { 412 | content: "\2934"; 413 | font-size: 3vw; 414 | vertical-align: top; 415 | margin-left: 1rem; 416 | } 417 | 418 | /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 419 | html.has-scroll-smooth { 420 | overflow: hidden; 421 | } 422 | 423 | html.has-scroll-dragging { 424 | -webkit-user-select: none; 425 | -moz-user-select: none; 426 | -ms-user-select: none; 427 | user-select: none; 428 | } 429 | 430 | .has-scroll-smooth body { 431 | overflow: hidden; 432 | } 433 | 434 | .has-scroll-smooth [data-scroll-container] { 435 | min-height: 100vh; 436 | } 437 | 438 | .c-scrollbar { 439 | position: absolute; 440 | right: 0; 441 | top: 0; 442 | width: 11px; 443 | height: 100vh; 444 | transform-origin: center right; 445 | transition: transform 0.3s, opacity 0.3s; 446 | opacity: 0; 447 | } 448 | .c-scrollbar:hover { 449 | transform: scaleX(1.45); 450 | } 451 | .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { 452 | opacity: 1; 453 | } 454 | 455 | .c-scrollbar_thumb { 456 | position: absolute; 457 | top: 0; 458 | right: 0; 459 | background-color: black; 460 | opacity: 0.5; 461 | width: 7px; 462 | border-radius: 10px; 463 | margin: 2px; 464 | cursor: -webkit-grab; 465 | cursor: grab; 466 | } 467 | .has-scroll-dragging .c-scrollbar_thumb { 468 | cursor: -webkit-grabbing; 469 | cursor: grabbing; 470 | } 471 | 472 | @media screen and (min-width: 53em) { 473 | .frame { 474 | display: grid; 475 | align-content: space-between; 476 | width: 100%; 477 | grid-gap: 5vw; 478 | grid-template-columns: auto auto auto 1fr; 479 | grid-template-areas: 'title title links demos'; 480 | } 481 | .frame__title { 482 | margin: 0; 483 | grid-area: title; 484 | } 485 | .frame__demos { 486 | margin: 0; 487 | grid-area: demos; 488 | justify-self: end; 489 | } 490 | .frame__links { 491 | grid-area: links; 492 | padding: 0; 493 | justify-self: end; 494 | } 495 | .tiles--columns-rotated .tiles__line { 496 | width: 33vmax; 497 | } 498 | .tiles--columns-rotated .tiles__line:nth-child(even) { 499 | margin-top: -20vmax; 500 | } 501 | .tiles--columns-rotated .tiles__line-img { 502 | height: 40vmax; 503 | } 504 | .content--numbered::after { 505 | counter-increment: contentSection; 506 | content: counter(contentSection,decimal-leading-zero); 507 | position: absolute; 508 | top: 50%; 509 | right: 3rem; 510 | border: 1px solid; 511 | color: var(--color-alt); 512 | width: 4rem; 513 | height: 4rem; 514 | margin-top: -2rem; 515 | display: flex; 516 | align-items: center; 517 | justify-content: center; 518 | border-radius: 50%; 519 | } 520 | .content__text { 521 | max-width: 800px; 522 | width: 50vw; 523 | min-width: calc(300px - 6rem); 524 | } 525 | .content__text--wide { 526 | max-width: 1000px; 527 | width: 65vw; 528 | } 529 | .tiles--small { 530 | --tiles-height: 240px; 531 | } 532 | } 533 | 534 | 535 | /*# sourceMappingURL=/base.98fd6c19.css.map */ -------------------------------------------------------------------------------- /dist/base.98fd6c19.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["css/base.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"base.98fd6c19.css","sourceRoot":"../src","sourcesContent":["*,\r\n*::after,\r\n*::before {\r\n\tbox-sizing: border-box;\r\n}\r\n\r\n:root {\r\n\tfont-size: 16px;\r\n}\r\n\r\nbody {\r\n\tmargin: 0;\r\n\t--color-text: #fff;\r\n\t--color-bg: #111;\r\n\t--color-link: #aaa;\r\n\t--color-link-hover: #fff;\r\n\t--color-alt: #7f6a57;\r\n\tcolor: var(--color-text);\r\n\tbackground-color: var(--color-bg);\r\n\t-webkit-font-smoothing: antialiased;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n\tcounter-reset: contentSection;\r\n\tfont-family: neuzeit-grotesk, sans-serif;\r\n}\r\n\r\n/* Page Loader */\r\n.js .loading::before,\r\n.js .loading::after {\r\n\tcontent: '';\r\n\tposition: fixed;\r\n\tz-index: 1000;\r\n}\r\n\r\n.js .loading::before {\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tbackground: var(--color-bg);\r\n}\r\n\r\n.js .loading::after {\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\twidth: 60px;\r\n\theight: 60px;\r\n\tmargin: -30px 0 0 -30px;\r\n\tborder-radius: 50%;\r\n\topacity: 0.4;\r\n\tbackground: var(--color-link);\r\n\tanimation: loaderAnim 0.7s linear infinite alternate forwards;\r\n\r\n}\r\n\r\n@keyframes loaderAnim {\r\n\tto {\r\n\t\topacity: 1;\r\n\t\ttransform: scale3d(0.5,0.5,1);\r\n\t}\r\n}\r\n\r\na {\r\n\ttext-decoration: underline;\r\n\tcolor: var(--color-link);\r\n\toutline: none;\r\n}\r\n\r\na:hover,\r\na:focus {\r\n\tcolor: var(--color-link-hover);\r\n\toutline: none;\r\n\ttext-decoration: none;\r\n}\r\n\r\nmain {\r\n\toverflow: hidden;\r\n\tposition: relative;\r\n}\r\n\r\n.frame {\r\n\ttext-align: center;\r\n\tposition: relative;\r\n\tz-index: 900;\r\n}\r\n\r\n.frame__author {\r\n\ttext-decoration: none;\r\n\tcolor: var(--color-alt);\r\n}\r\n\r\n.frame__title {\r\n\tfont-size: 1rem;\r\n\tmargin: 0 0 1rem;\r\n\tfont-weight: normal;\r\n}\r\n\r\n.frame__links {\r\n\tdisplay: inline;\r\n}\r\n\r\n.frame__links a:not(:last-child),\r\n.frame__demos a:not(:last-child) {\r\n\tmargin-right: 1rem;\r\n}\r\n\r\n.frame__demos {\r\n\tmargin: 1rem 0;\r\n}\r\n\r\n.frame__demo--current,\r\n.frame__demo--current:hover {\r\n\ttext-decoration: none;\r\n\tcolor: var(--color-alt);\r\n}\r\n\r\n.content {\r\n\tpadding: 3rem;\r\n\tmin-height: 90vh;\r\n\tdisplay: flex;\r\n\tposition: relative;\r\n\tflex-direction: column;\r\n\talign-content: center;\r\n\tjustify-content: space-between;\r\n}\r\n\r\n.content--auto {\r\n\tmin-height: 0;\r\n}\r\n\r\n.content--feature {\r\n\tjustify-content: flex-start;\r\n\tmin-height: 0;\r\n}\r\n\r\n.content--fixed {\r\n\tposition: fixed;\r\n\tz-index: 1000;\r\n\twidth: 100%;\r\n\ttop: 0;\r\n}\r\n\r\n.content__pretitle {\r\n\tmargin-top: auto;\r\n\tfont-size: 1.85rem;\r\n\tcolor: var(--color-alt);\r\n}\r\n\r\n.content__pretitle::before {\r\n\tcontent: \"\\2015\";\r\n\tmargin-right: 0.25rem;\r\n}\r\n\r\n.content__title {\r\n\tfont-size: 9vw;\r\n\tline-height: 0.8;\r\n\tmargin: 0 0 3rem 0;\r\n\tfont-weight: 400;\r\n\tmax-width: 800px;\r\n\twill-change: transform;\r\n}\r\n\r\n.content__text {\r\n\tfont-size: 2.25rem;\r\n\tfont-size: clamp(1rem, 4vw, 2.25rem);\r\n}\r\n\r\n.content__text--right {\r\n\talign-self: flex-end;\r\n}\r\n\r\n.content__text--centered {\r\n\tmargin: auto;\r\n}\r\n\r\n.content__breakout {\r\n\tmargin: 0 -3rem;\r\n\twhite-space: nowrap;\r\n\ttext-transform: uppercase;\r\n\tfont-family: span, serif;\r\n\tfont-weight: 200;\r\n\tfont-style: italic;\r\n\tcolor: #211f1b;\r\n}\r\n\r\n.content__breakout--big {\r\n\tfont-size: 13vw;\r\n\tfont-weight: 200;\r\n}\r\n\r\n.content__breakout--medium {\r\n\tfont-size: 5vw;\r\n}\r\n\r\n.tiles {\r\n\t--tiles-height: 52vw;\r\n\theight: var(--tiles-height);\r\n\tposition: relative;\r\n\toverflow: hidden;\r\n}\r\n\r\n.tiles--columns-rotated {\r\n\t--tiles-height: 180vmax;\r\n}\r\n\r\n.tiles--columns {\r\n\t--tiles-height: 140vh;\r\n}\r\n\r\n.tiles--oneline {\r\n\t--tiles-height: 50vh;\r\n\tmin-height: 400px;\r\n\tmargin: 10vh 0;\r\n}\r\n\r\n.tiles--small {\r\n\t--tiles-height: 100px;\r\n\tmargin: 10vh 0 0;\r\n}\r\n\r\n.tiles--fixed {\r\n\t--tiles-height: 65vw;\r\n\tmargin-top: 25vh;\r\n}\r\n\r\n.tiles--perspective {\r\n\toverflow: visible;\r\n\tperspective: 1000px;\r\n\t--tiles-height: 500px;\r\n}\r\n\r\n.tiles__wrap {\r\n\twidth: 150%;\r\n\t--tileswrap-height: var(--tiles-height);\r\n\theight: var(--tileswrap-height);\r\n\tposition: absolute;\r\n\tleft: 50%;\r\n\ttop: 50%;\r\n\ttransform: translate3d(-50%,-50%, 0);\r\n}\r\n\r\n.tiles--rotated .tiles__wrap {\r\n\t--tileswrap-height: calc(var(--tiles-height) * 1.8);\r\n\ttransform: translate3d(-50%,-50%, 0) rotate(22.5deg);\r\n}\r\n\r\n.tiles--columns-rotated .tiles__wrap {\r\n\twidth: 150%;\r\n\tdisplay: flex;\r\n\ttransform: translate3d(-50%,-50%,0) rotate(-22.5deg);\r\n\tleft: 50%;\r\n\ttop: 50%;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n}\r\n\r\n.tiles--columns .tiles__wrap {\r\n\twidth: 100%;\r\n\tdisplay: flex;\r\n\t--tileswrap-height: calc(var(--tiles-height) * 1.4);\r\n\ttransform: translate3d(0,-50%,0);\r\n\tleft: 0;\r\n\ttop: 50%;\r\n}\r\n\r\n.tiles--perspective .tiles__wrap {\r\n\twidth: 200%;\r\n transform: translate3d(-50%,-50%,0) translateX(-25%) translateZ(-1200px) rotateX(75.5deg) rotateZ(12deg);\r\n}\r\n\r\n.tiles--fixed .tiles__wrap {\r\n\twidth: 100%;\r\n}\r\n\r\n.tiles__line {\r\n\tdisplay: flex;\r\n}\r\n\r\n.tiles--columns .tiles__line {\r\n\twidth: 25%;\r\n\tpadding: 0 1rem;\r\n\tdisplay: block;\r\n}\r\n\r\n.tiles--columns-rotated .tiles__line {\r\n\twidth: 320px;\r\n\tflex: none;\r\n\tpadding: 0 1.5vw;\r\n\tdisplay: block;\r\n}\r\n\r\n.tiles--columns-rotated .tiles__line:nth-child(even) {\r\n\tmargin-top: -160px;\r\n}\r\n\r\n.tiles--oneline .tiles__line {\r\n\theight: 100%;\r\n}\r\n\r\n.tiles--small .tiles__line {\r\n\theight: 100%;\r\n}\r\n\r\n.tiles__line-img {\r\n\t--tile-margin: 2vw;\r\n\tflex: none;\r\n\twidth: calc(16.6666% - var(--tile-margin) * 2);\r\n\theight: calc( var(--tileswrap-height) / 3 - (3 * var(--tile-margin) / 2));\r\n\tmargin: var(--tile-margin);\r\n\tbackground-size: cover;\r\n\tbackground-position: 50% 50%;\r\n}\r\n\r\n.tiles--perspective .tiles__line-img {\r\n\tbackface-visibility: hidden;\r\n\toutline: 1px solid transparent;\r\n\t--tile-margin: 1vw;\r\n\twidth: calc(16.6666% - var(--tile-margin) * 2);\r\n\theight: calc(16.666vw * 1.3);\r\n}\r\n\r\n.tiles--oneline .tiles__line-img {\r\n\t--tile-margin: 1vw;\r\n\tmargin: 0 var(--tile-margin);\r\n\twidth: calc(25% - var(--tile-margin) * 2);\r\n\theight: 100%;\r\n}\r\n\r\n.tiles--small .tiles__line-img {\r\n\t--tile-margin: 5px;\r\n\tmargin: 0 var(--tile-margin);\r\n\twidth: calc(12.5% - var(--tile-margin) * 2);\r\n\theight: 100%;\r\n}\r\n\r\n.tiles--rotated .tiles__line-img {\r\n\t--tile-margin: 1vw;\r\n\twidth: calc(16.6666% - var(--tile-margin) * 2);\r\n\theight: calc( var(--tileswrap-height) / 5 - (4 * var(--tile-margin) / 2));\r\n}\r\n\r\n.tiles--columns-rotated .tiles__line-img {\r\n\t--tile-margin: 3vw 0;\r\n\twidth: 100%;\r\n\theight: 400px;\r\n}\r\n\r\n.tiles--columns .tiles__line-img {\r\n\t--tile-margin: 2rem 0;\r\n\twidth: 100%;\r\n\theight: calc(25vw * 1.3);\r\n}\r\n\r\n.tiles--fixed .tiles__line-img {\r\n\t--tile-margin: 10px;\r\n\t-webkit-filter: brightness(0.8);\r\n\twidth: calc(16.6666% - var(--tile-margin) * 2);\r\n\theight: calc( var(--tileswrap-height) / 3 - (3 * var(--tile-margin) / 2));\r\n}\r\n\r\n.tiles--darker .tiles__line-img {\r\n\topacity: 0.7;\r\n}\r\n\r\n.tiles__title {\r\n\tposition: absolute;\r\n\theight: 100vh;\r\n\twidth: 100%;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tfont-size: 10vw;\r\n\tpadding: 3rem;\r\n\tmargin: 0;\r\n\tline-height: 0.8;\r\n\tfont-family: span, serif;\r\n\tfont-weight: 700;\r\n\tfont-style: normal;\r\n}\r\n\r\n.tiles__title--alt {\r\n\tfont-size: 9vw;\r\n\tfont-size: clamp(2rem, 9vw, 7.25rem);\r\n}\r\n\r\n.tiles__title--intro {\r\n\tpadding-top: 10vh;\r\n\talign-items: flex-start;\r\n\tjustify-content: flex-start;\r\n}\r\n\r\n.tiles__title--right {\r\n\tjustify-content: flex-end;\r\n}\r\n\r\n.tiles__title--left {\r\n\tjustify-content: flex-start;\r\n}\r\n\r\n.tiles__title--full {\r\n\theight: 100%;\r\n}\r\n\r\n.backtop {\r\n\talign-self: center;\r\n\tmargin: auto 0;\r\n\tfont-size: 6vw;\r\n\tcursor: pointer;\r\n\ttext-decoration: none;\r\n}\r\n\r\n.backtop::after {\r\n\tcontent: \"\\2934\";\r\n\tfont-size: 3vw;\r\n\tvertical-align: top;\r\n\tmargin-left: 1rem;\r\n}\r\n\r\n/*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */\r\nhtml.has-scroll-smooth {\r\n\toverflow: hidden; \r\n}\r\n \r\nhtml.has-scroll-dragging {\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none; \r\n}\r\n \r\n.has-scroll-smooth body {\r\n\toverflow: hidden; \r\n}\r\n \r\n.has-scroll-smooth [data-scroll-container] {\r\n\tmin-height: 100vh; \r\n}\r\n \r\n.c-scrollbar {\r\n\tposition: absolute;\r\n\tright: 0;\r\n\ttop: 0;\r\n\twidth: 11px;\r\n\theight: 100vh;\r\n\ttransform-origin: center right;\r\n\ttransition: transform 0.3s, opacity 0.3s;\r\n\topacity: 0; \r\n}\r\n.c-scrollbar:hover {\r\n\ttransform: scaleX(1.45); \r\n}\r\n.c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {\r\n\topacity: 1; \r\n}\r\n \r\n.c-scrollbar_thumb {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbackground-color: black;\r\n\topacity: 0.5;\r\n\twidth: 7px;\r\n\tborder-radius: 10px;\r\n\tmargin: 2px;\r\n\tcursor: -webkit-grab;\r\n\tcursor: grab; \r\n}\r\n.has-scroll-dragging .c-scrollbar_thumb {\r\n\tcursor: -webkit-grabbing;\r\n\tcursor: grabbing; \r\n}\r\n\r\n@media screen and (min-width: 53em) {\r\n\t.frame {\r\n\t\tdisplay: grid;\r\n\t\talign-content: space-between;\r\n\t\twidth: 100%;\r\n\t\tgrid-gap: 5vw;\r\n\t\tgrid-template-columns: auto auto auto 1fr;\r\n\t\tgrid-template-areas: 'title title links demos';\r\n\t}\r\n\t.frame__title {\r\n\t\tmargin: 0;\r\n\t\tgrid-area: title;\r\n\t}\r\n\t.frame__demos {\r\n\t\tmargin: 0;\r\n\t\tgrid-area: demos;\r\n\t\tjustify-self: end;\r\n\t}\r\n\t.frame__links {\r\n\t\tgrid-area: links;\r\n\t\tpadding: 0;\r\n\t\tjustify-self: end;\r\n\t}\r\n\t.tiles--columns-rotated .tiles__line {\r\n\t\twidth: 33vmax;\r\n\t}\r\n\t.tiles--columns-rotated .tiles__line:nth-child(even) {\r\n\t\tmargin-top: -20vmax;\r\n\t}\r\n\t.tiles--columns-rotated .tiles__line-img {\r\n\t\theight: 40vmax;\r\n\t}\r\n\t.content--numbered::after {\r\n\t\tcounter-increment: contentSection; \r\n\t\tcontent: counter(contentSection,decimal-leading-zero);\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tright: 3rem;\r\n\t\tborder: 1px solid;\r\n\t\tcolor: var(--color-alt);\r\n\t\twidth: 4rem;\r\n\t\theight: 4rem;\r\n\t\tmargin-top: -2rem;\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tborder-radius: 50%;\r\n\t}\r\n\t.content__text {\r\n\t\tmax-width: 800px;\r\n\t\twidth: 50vw;\r\n\t\tmin-width: calc(300px - 6rem);\r\n\t}\r\n\t.content__text--wide {\r\n\t\tmax-width: 1000px;\r\n\t\twidth: 65vw;\r\n\t}\r\n\t.tiles--small {\r\n\t\t--tiles-height: 240px;\r\n\t}\r\n}\r\n"]} -------------------------------------------------------------------------------- /dist/base.98fd6c19.js: -------------------------------------------------------------------------------- 1 | // modules are defined as an array 2 | // [ module function, map of requires ] 3 | // 4 | // map of requires is short require name -> numeric require 5 | // 6 | // anything defined in a previous bundle is accessed via the 7 | // orig method which is the require for previous bundles 8 | parcelRequire = (function (modules, cache, entry, globalName) { 9 | // Save the require from previous bundle to this closure if any 10 | var previousRequire = typeof parcelRequire === 'function' && parcelRequire; 11 | var nodeRequire = typeof require === 'function' && require; 12 | 13 | function newRequire(name, jumped) { 14 | if (!cache[name]) { 15 | if (!modules[name]) { 16 | // if we cannot find the module within our internal map or 17 | // cache jump to the current global require ie. the last bundle 18 | // that was added to the page. 19 | var currentRequire = typeof parcelRequire === 'function' && parcelRequire; 20 | if (!jumped && currentRequire) { 21 | return currentRequire(name, true); 22 | } 23 | 24 | // If there are other bundles on this page the require from the 25 | // previous one is saved to 'previousRequire'. Repeat this as 26 | // many times as there are bundles until the module is found or 27 | // we exhaust the require chain. 28 | if (previousRequire) { 29 | return previousRequire(name, true); 30 | } 31 | 32 | // Try the node require function if it exists. 33 | if (nodeRequire && typeof name === 'string') { 34 | return nodeRequire(name); 35 | } 36 | 37 | var err = new Error('Cannot find module \'' + name + '\''); 38 | err.code = 'MODULE_NOT_FOUND'; 39 | throw err; 40 | } 41 | 42 | localRequire.resolve = resolve; 43 | localRequire.cache = {}; 44 | 45 | var module = cache[name] = new newRequire.Module(name); 46 | 47 | modules[name][0].call(module.exports, localRequire, module, module.exports, this); 48 | } 49 | 50 | return cache[name].exports; 51 | 52 | function localRequire(x){ 53 | return newRequire(localRequire.resolve(x)); 54 | } 55 | 56 | function resolve(x){ 57 | return modules[name][1][x] || x; 58 | } 59 | } 60 | 61 | function Module(moduleName) { 62 | this.id = moduleName; 63 | this.bundle = newRequire; 64 | this.exports = {}; 65 | } 66 | 67 | newRequire.isParcelRequire = true; 68 | newRequire.Module = Module; 69 | newRequire.modules = modules; 70 | newRequire.cache = cache; 71 | newRequire.parent = previousRequire; 72 | newRequire.register = function (id, exports) { 73 | modules[id] = [function (require, module) { 74 | module.exports = exports; 75 | }, {}]; 76 | }; 77 | 78 | var error; 79 | for (var i = 0; i < entry.length; i++) { 80 | try { 81 | newRequire(entry[i]); 82 | } catch (e) { 83 | // Save first error but execute all entries 84 | if (!error) { 85 | error = e; 86 | } 87 | } 88 | } 89 | 90 | if (entry.length) { 91 | // Expose entry point to Node, AMD or browser globals 92 | // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js 93 | var mainExports = newRequire(entry[entry.length - 1]); 94 | 95 | // CommonJS 96 | if (typeof exports === "object" && typeof module !== "undefined") { 97 | module.exports = mainExports; 98 | 99 | // RequireJS 100 | } else if (typeof define === "function" && define.amd) { 101 | define(function () { 102 | return mainExports; 103 | }); 104 | 105 | // 14 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |

Image Tiles Scroll Animation with Locomotive Scroll

30 |
31 |
32 | Previous demo 33 | Article 34 | GitHub 35 |
36 |
37 | Demo 1 38 | Demo 2 39 | Demo 3 40 |
41 |
42 |

Unseeing the seen

43 |

decondition yourself

44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |

The human world is exploding at the seams. Human creativity and the implementation of human inventions and technology is now at an accelerated fever pitch like nothing ever before seen in the history of the world. Well, where is it leading, and how does one integrate this stuff into one’s own life? What does it mean about the experience of being human? I have proposed the existence of an invisible, permeating Something that is throughout all being, all time, all space, all bodies, all thought, which I call Novelty; and the interesting thing about novelty is that it’s increasing constantly.

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 |

endless acceleration toward infinity

122 |

the greatest barrier to your enlightenment

123 |
124 |
125 |

The conservation of novelty is simply that, over time, the universe has become more complicated. New levels of complexity become the foundations for yet deeper levels of complexity. And this phenomenon of the production and conservation of what I call novelty is not something which goes on only in the biological domain or only in the cultural domain or only in the domain of physics. It is a trans-categorical impulse in reality, meaning: it’s everywhere. Everywhere!

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 | Back to the top 153 |
154 | @codrops 155 |
156 | Demo 1 157 | Demo 2 158 | Demo 3 159 |
160 |
161 |
162 |
163 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /dist/index.html.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../node_modules/parcel-bundler/src/builtins/bundle-url.js","../node_modules/parcel-bundler/src/builtins/css-loader.js"],"names":["bundleURL","getBundleURLCached","getBundleURL","Error","err","matches","stack","match","getBaseURL","url","replace","exports","bundle","require","updateLink","link","newLink","cloneNode","onload","remove","href","split","Date","now","parentNode","insertBefore","nextSibling","cssTimeout","reloadCSS","setTimeout","links","document","querySelectorAll","i","length","module"],"mappings":"AAAA,ACAA,IDAIA,ACAAY,MAAM,GDAG,ACAAC,GDAG,IAAhB,ACAoB,CAAC,cAAD,CAApB;;ADCA,ACCA,SDDSZ,ACCAa,UAAT,CAAoBC,IAApB,EAA0B,CDD1B,GAA8B;AAC5B,ACCA,MDDI,ACCAC,CDDChB,MCCM,GDDX,ACCce,EDDE,ECCE,CAACE,SAAL,EAAd;ADAEjB,IAAAA,SAAS,GAAGE,YAAY,EAAxB;AACD,ACADc,EAAAA,OAAO,CAACE,MAAR,GAAiB,YAAY;AAC3BH,IAAAA,IAAI,CAACI,MAAL;ADCF,ACAC,GAFD,MDEOnB,SAAP;AACD;ACACgB,EAAAA,OAAO,CAACI,IAAR,GAAeL,IAAI,CAACK,IAAL,CAAUC,KAAV,CAAgB,GAAhB,EAAqB,CAArB,IAA0B,GAA1B,GAAgCC,IAAI,CAACC,GAAL,EAA/C;ADEF,ACDER,EAAAA,IAAI,CAACS,EDCEtB,QCDP,CAAgBuB,GDClB,GAAwB,MCDtB,CAA6BT,OAA7B,EAAsCD,IAAI,CAACW,WAA3C;ADEA,ACDD;ADEC,MAAI;AACF,ACDJ,IAAIC,MDCM,IAAIxB,ACDA,GAAG,EDCP,EAAN,ACDJ;ADEG,GAFD,CAEE,OAAOC,GAAP,EAAY;AACZ,ACFJ,QDEQC,CCFCuB,MDEM,GAAG,ACFlB,CDEmB,ECFE,GDEGxB,GAAG,CAACE,KAAV,EAAiBC,KAAjB,CAAuB,+DAAvB,CAAd;ACDF,MAAIoB,UAAJ,EAAgB;ADEd,ACDA,QDCItB,OAAJ,EAAa;AACX,ACDH,aDCUG,UAAU,CAACH,OAAO,CAAC,CAAD,CAAR,CAAjB;AACD;AACF,ACDDsB,EAAAA,UAAU,GAAGE,UAAU,CAAC,YAAY;AAClC,QAAIC,KAAK,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,wBAA1B,CAAZ;ADEF,SAAO,GAAP;AACD,ACFG,SAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGH,KAAK,CAACI,MAA1B,EAAkCD,CAAC,EAAnC,EAAuC;AACrC,UAAIrB,MAAM,CAACJ,UAAP,CAAkBsB,KAAK,CAACG,CAAD,CAAL,CAASb,IAA3B,MAAqCR,MAAM,CAACV,YAAP,EAAzC,EAAgE;ADGtE,ACFQY,QAAAA,CDECN,SCFS,CDElB,ACFmBsB,CDECrB,GAApB,CCFwB,CDEC,ACFAwB,CAAD,CAAN,CAAV;ADGN,ACFK,SDEE,CAAC,KAAKxB,GAAN,EAAWC,OAAX,CAAmB,sEAAnB,EAA2F,IAA3F,IAAmG,GAA1G;AACD,ACFI;;ADILC,ACFIgB,IAAAA,GDEG,CAACzB,MCFM,GAAG,GDEjB,CCFI,EDEmBD,kBAAvB;AACAU,ACFG,GATsB,EASpB,EDEE,ACXkB,CDWjBH,ACXN,UDWF,GAAqBA,UAArB;ACDC;;AAED2B,MAAM,CAACxB,OAAP,GAAiBiB,SAAjB","file":"index.html","sourceRoot":"../src","sourcesContent":["var bundleURL = null;\nfunction getBundleURLCached() {\n if (!bundleURL) {\n bundleURL = getBundleURL();\n }\n\n return bundleURL;\n}\n\nfunction getBundleURL() {\n // Attempt to find the URL of the current script and use that as the base URL\n try {\n throw new Error;\n } catch (err) {\n var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\\/\\/[^)\\n]+/g);\n if (matches) {\n return getBaseURL(matches[0]);\n }\n }\n\n return '/';\n}\n\nfunction getBaseURL(url) {\n return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\\/\\/.+)\\/[^/]+$/, '$1') + '/';\n}\n\nexports.getBundleURL = getBundleURLCached;\nexports.getBaseURL = getBaseURL;\n","var bundle = require('./bundle-url');\n\nfunction updateLink(link) {\n var newLink = link.cloneNode();\n newLink.onload = function () {\n link.remove();\n };\n newLink.href = link.href.split('?')[0] + '?' + Date.now();\n link.parentNode.insertBefore(newLink, link.nextSibling);\n}\n\nvar cssTimeout = null;\nfunction reloadCSS() {\n if (cssTimeout) {\n return;\n }\n\n cssTimeout = setTimeout(function () {\n var links = document.querySelectorAll('link[rel=\"stylesheet\"]');\n for (var i = 0; i < links.length; i++) {\n if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {\n updateLink(links[i]);\n }\n }\n\n cssTimeout = null;\n }, 50);\n}\n\nmodule.exports = reloadCSS;\n"]} -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | // modules are defined as an array 2 | // [ module function, map of requires ] 3 | // 4 | // map of requires is short require name -> numeric require 5 | // 6 | // anything defined in a previous bundle is accessed via the 7 | // orig method which is the require for previous bundles 8 | parcelRequire = (function (modules, cache, entry, globalName) { 9 | // Save the require from previous bundle to this closure if any 10 | var previousRequire = typeof parcelRequire === 'function' && parcelRequire; 11 | var nodeRequire = typeof require === 'function' && require; 12 | 13 | function newRequire(name, jumped) { 14 | if (!cache[name]) { 15 | if (!modules[name]) { 16 | // if we cannot find the module within our internal map or 17 | // cache jump to the current global require ie. the last bundle 18 | // that was added to the page. 19 | var currentRequire = typeof parcelRequire === 'function' && parcelRequire; 20 | if (!jumped && currentRequire) { 21 | return currentRequire(name, true); 22 | } 23 | 24 | // If there are other bundles on this page the require from the 25 | // previous one is saved to 'previousRequire'. Repeat this as 26 | // many times as there are bundles until the module is found or 27 | // we exhaust the require chain. 28 | if (previousRequire) { 29 | return previousRequire(name, true); 30 | } 31 | 32 | // Try the node require function if it exists. 33 | if (nodeRequire && typeof name === 'string') { 34 | return nodeRequire(name); 35 | } 36 | 37 | var err = new Error('Cannot find module \'' + name + '\''); 38 | err.code = 'MODULE_NOT_FOUND'; 39 | throw err; 40 | } 41 | 42 | localRequire.resolve = resolve; 43 | localRequire.cache = {}; 44 | 45 | var module = cache[name] = new newRequire.Module(name); 46 | 47 | modules[name][0].call(module.exports, localRequire, module, module.exports, this); 48 | } 49 | 50 | return cache[name].exports; 51 | 52 | function localRequire(x){ 53 | return newRequire(localRequire.resolve(x)); 54 | } 55 | 56 | function resolve(x){ 57 | return modules[name][1][x] || x; 58 | } 59 | } 60 | 61 | function Module(moduleName) { 62 | this.id = moduleName; 63 | this.bundle = newRequire; 64 | this.exports = {}; 65 | } 66 | 67 | newRequire.isParcelRequire = true; 68 | newRequire.Module = Module; 69 | newRequire.modules = modules; 70 | newRequire.cache = cache; 71 | newRequire.parent = previousRequire; 72 | newRequire.register = function (id, exports) { 73 | modules[id] = [function (require, module) { 74 | module.exports = exports; 75 | }, {}]; 76 | }; 77 | 78 | var error; 79 | for (var i = 0; i < entry.length; i++) { 80 | try { 81 | newRequire(entry[i]); 82 | } catch (e) { 83 | // Save first error but execute all entries 84 | if (!error) { 85 | error = e; 86 | } 87 | } 88 | } 89 | 90 | if (entry.length) { 91 | // Expose entry point to Node, AMD or browser globals 92 | // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js 93 | var mainExports = newRequire(entry[entry.length - 1]); 94 | 95 | // CommonJS 96 | if (typeof exports === "object" && typeof module !== "undefined") { 97 | module.exports = mainExports; 98 | 99 | // RequireJS 100 | } else if (typeof define === "function" && define.amd) { 101 | define(function () { 102 | return mainExports; 103 | }); 104 | 105 | // 14 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |

Image Tiles Scroll Animation with Locomotive Scroll

30 |
31 |
32 | Previous demo 33 | Article 34 | GitHub 35 |
36 |
37 | Demo 1 38 | Demo 2 39 | Demo 3 40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |

Constrasts

82 |
83 |
84 |

Psychedelics are illegal not because a loving government is concerned that you may jump out of a third story window. Psychedelics are illegal because they dissolve opinion structures and culturally laid down models of behaviour and information processing. They open you up to the possibility that everything you know is wrong.

85 |
86 |
87 |

pursuit of happiness

88 |

the right to experiment with your own consciousnes

89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 | 103 |
104 |
105 | Back to the top 106 |
107 | @codrops 108 |
109 | Previous demo 110 | Article 111 | GitHub 112 |
113 |
114 | Demo 1 115 | Demo 2 116 | Demo 3 117 |
118 |
119 |
120 |
121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /dist/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Tiles Scroll Animation | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |

Image Tiles Scroll Animation with Locomotive Scroll

30 |
31 |
32 | Previous demo 33 | Article 34 | GitHub 35 |
36 |
37 | Demo 1 38 | Demo 2 39 | Demo 3 40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |

Neurotic
culture

87 |
88 |
89 |

We have the money, the power, the medical understanding, the scientific know-how, the love and the community to produce a kind of human paradise. But we are led by the least among us – the least intelligent, the least noble, the least visionary. We are led by the least among us and we do not fight back against the dehumanizing values that are handed down as control icons.

90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |

Civilization

101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |

Empowerment

112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |

Apocalypse

123 |
124 |
125 |

We have to create culture, don’t watch TV, don’t read magazines, don’t even listen to NPR. Create your own roadshow. The nexus of space and time where you are now is the most immediate sector of your universe, and if you’re worrying about Michael Jackson or Bill Clinton or somebody else, then you are disempowered, you’re giving it all away to icons, icons which are maintained by an electronic media so that you want to dress like X or have lips like Y.

126 |
127 |
128 |

Culture is not your friend

129 |

express ourselves through creative activity

130 |
131 |
132 |

This is shit-brained, this kind of thinking. That is all cultural diversion, and what is real is you and your friends and your associations, your highs, your orgasms, your hopes, your plans, your fears. And we are told ‘no’, we’re unimportant, we’re peripheral. ‘Get a degree, get a job, get a this, get a that.’ And then you’re a player, you don’t want to even play in that game. You want to reclaim your mind and get it out of the hands of the cultural engineers who want to turn you into a half-baked moron consuming all this trash that’s being manufactured out of the bones of a dying world.

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 | Back to the top 164 |
165 | @codrops 166 |
167 | Demo 1 168 | Demo 2 169 | Demo 3 170 |
171 |
172 |
173 |
174 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "TileScroll", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 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-minify --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/[NAME].git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "[HOMEPAGE]", 20 | "bugs": { 21 | "url": "https://github.com/codrops/[NAME]/issues" 22 | }, 23 | "dependencies": { 24 | "imagesloaded": "^4.1.4", 25 | "locomotive-scroll": "^3.6.1", 26 | "parcel-bundler": "^1.12.4" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 16px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #fff; 14 | --color-bg: #111; 15 | --color-link: #aaa; 16 | --color-link-hover: #fff; 17 | --color-alt: #7f6a57; 18 | color: var(--color-text); 19 | background-color: var(--color-bg); 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-font-smoothing: grayscale; 22 | counter-reset: contentSection; 23 | font-family: neuzeit-grotesk, sans-serif; 24 | } 25 | 26 | /* Page Loader */ 27 | .js .loading::before, 28 | .js .loading::after { 29 | content: ''; 30 | position: fixed; 31 | z-index: 1000; 32 | } 33 | 34 | .js .loading::before { 35 | top: 0; 36 | left: 0; 37 | width: 100%; 38 | height: 100%; 39 | background: var(--color-bg); 40 | } 41 | 42 | .js .loading::after { 43 | top: 50%; 44 | left: 50%; 45 | width: 60px; 46 | height: 60px; 47 | margin: -30px 0 0 -30px; 48 | border-radius: 50%; 49 | opacity: 0.4; 50 | background: var(--color-link); 51 | animation: loaderAnim 0.7s linear infinite alternate forwards; 52 | 53 | } 54 | 55 | @keyframes loaderAnim { 56 | to { 57 | opacity: 1; 58 | transform: scale3d(0.5,0.5,1); 59 | } 60 | } 61 | 62 | a { 63 | text-decoration: underline; 64 | color: var(--color-link); 65 | outline: none; 66 | } 67 | 68 | a:hover, 69 | a:focus { 70 | color: var(--color-link-hover); 71 | outline: none; 72 | text-decoration: none; 73 | } 74 | 75 | main { 76 | overflow: hidden; 77 | position: relative; 78 | } 79 | 80 | .frame { 81 | text-align: center; 82 | position: relative; 83 | z-index: 900; 84 | } 85 | 86 | .frame__author { 87 | text-decoration: none; 88 | color: var(--color-alt); 89 | } 90 | 91 | .frame__title { 92 | font-size: 1rem; 93 | margin: 0 0 1rem; 94 | font-weight: normal; 95 | } 96 | 97 | .frame__links { 98 | display: inline; 99 | } 100 | 101 | .frame__links a:not(:last-child), 102 | .frame__demos a:not(:last-child) { 103 | margin-right: 1rem; 104 | } 105 | 106 | .frame__demos { 107 | margin: 1rem 0; 108 | } 109 | 110 | .frame__demo--current, 111 | .frame__demo--current:hover { 112 | text-decoration: none; 113 | color: var(--color-alt); 114 | } 115 | 116 | .content { 117 | padding: 3rem; 118 | min-height: 90vh; 119 | display: flex; 120 | position: relative; 121 | flex-direction: column; 122 | align-content: center; 123 | justify-content: space-between; 124 | } 125 | 126 | .content--auto { 127 | min-height: 0; 128 | } 129 | 130 | .content--feature { 131 | justify-content: flex-start; 132 | min-height: 0; 133 | } 134 | 135 | .content--fixed { 136 | position: fixed; 137 | z-index: 1000; 138 | width: 100%; 139 | top: 0; 140 | } 141 | 142 | .content__pretitle { 143 | margin-top: auto; 144 | font-size: 1.85rem; 145 | color: var(--color-alt); 146 | } 147 | 148 | .content__pretitle::before { 149 | content: "\2015"; 150 | margin-right: 0.25rem; 151 | } 152 | 153 | .content__title { 154 | font-size: 9vw; 155 | line-height: 0.8; 156 | margin: 0 0 3rem 0; 157 | font-weight: 400; 158 | max-width: 800px; 159 | will-change: transform; 160 | } 161 | 162 | .content__text { 163 | font-size: 2.25rem; 164 | font-size: clamp(1rem, 4vw, 2.25rem); 165 | } 166 | 167 | .content__text--right { 168 | align-self: flex-end; 169 | } 170 | 171 | .content__text--centered { 172 | margin: auto; 173 | } 174 | 175 | .content__breakout { 176 | margin: 0 -3rem; 177 | white-space: nowrap; 178 | text-transform: uppercase; 179 | font-family: span, serif; 180 | font-weight: 200; 181 | font-style: italic; 182 | color: #211f1b; 183 | } 184 | 185 | .content__breakout--big { 186 | font-size: 13vw; 187 | font-weight: 200; 188 | } 189 | 190 | .content__breakout--medium { 191 | font-size: 5vw; 192 | } 193 | 194 | .tiles { 195 | --tiles-height: 52vw; 196 | height: var(--tiles-height); 197 | position: relative; 198 | overflow: hidden; 199 | } 200 | 201 | .tiles--columns-rotated { 202 | --tiles-height: 180vmax; 203 | } 204 | 205 | .tiles--columns { 206 | --tiles-height: 140vh; 207 | } 208 | 209 | .tiles--oneline { 210 | --tiles-height: 50vh; 211 | min-height: 400px; 212 | margin: 10vh 0; 213 | } 214 | 215 | .tiles--small { 216 | --tiles-height: 100px; 217 | margin: 10vh 0 0; 218 | } 219 | 220 | .tiles--fixed { 221 | --tiles-height: 65vw; 222 | margin-top: 25vh; 223 | } 224 | 225 | .tiles--perspective { 226 | overflow: visible; 227 | perspective: 1000px; 228 | --tiles-height: 500px; 229 | } 230 | 231 | .tiles__wrap { 232 | width: 150%; 233 | --tileswrap-height: var(--tiles-height); 234 | height: var(--tileswrap-height); 235 | position: absolute; 236 | left: 50%; 237 | top: 50%; 238 | transform: translate3d(-50%,-50%, 0); 239 | } 240 | 241 | .tiles--rotated .tiles__wrap { 242 | --tileswrap-height: calc(var(--tiles-height) * 1.8); 243 | transform: translate3d(-50%,-50%, 0) rotate(22.5deg); 244 | } 245 | 246 | .tiles--columns-rotated .tiles__wrap { 247 | width: 150%; 248 | display: flex; 249 | transform: translate3d(-50%,-50%,0) rotate(-22.5deg); 250 | left: 50%; 251 | top: 50%; 252 | align-items: center; 253 | justify-content: center; 254 | } 255 | 256 | .tiles--columns .tiles__wrap { 257 | width: 100%; 258 | display: flex; 259 | --tileswrap-height: calc(var(--tiles-height) * 1.4); 260 | transform: translate3d(0,-50%,0); 261 | left: 0; 262 | top: 50%; 263 | } 264 | 265 | .tiles--perspective .tiles__wrap { 266 | width: 200%; 267 | transform: translate3d(-50%,-50%,0) translateX(-25%) translateZ(-1200px) rotateX(75.5deg) rotateZ(12deg); 268 | } 269 | 270 | .tiles--fixed .tiles__wrap { 271 | width: 100%; 272 | } 273 | 274 | .tiles__line { 275 | display: flex; 276 | } 277 | 278 | .tiles--columns .tiles__line { 279 | width: 25%; 280 | padding: 0 1rem; 281 | display: block; 282 | } 283 | 284 | .tiles--columns-rotated .tiles__line { 285 | width: 320px; 286 | flex: none; 287 | padding: 0 1.5vw; 288 | display: block; 289 | } 290 | 291 | .tiles--columns-rotated .tiles__line:nth-child(even) { 292 | margin-top: -160px; 293 | } 294 | 295 | .tiles--oneline .tiles__line { 296 | height: 100%; 297 | } 298 | 299 | .tiles--small .tiles__line { 300 | height: 100%; 301 | } 302 | 303 | .tiles__line-img { 304 | --tile-margin: 2vw; 305 | flex: none; 306 | width: calc(16.6666% - var(--tile-margin) * 2); 307 | height: calc( var(--tileswrap-height) / 3 - (3 * var(--tile-margin) / 2)); 308 | margin: var(--tile-margin); 309 | background-size: cover; 310 | background-position: 50% 50%; 311 | } 312 | 313 | .tiles--perspective .tiles__line-img { 314 | backface-visibility: hidden; 315 | outline: 1px solid transparent; 316 | --tile-margin: 1vw; 317 | width: calc(16.6666% - var(--tile-margin) * 2); 318 | height: calc(16.666vw * 1.3); 319 | } 320 | 321 | .tiles--oneline .tiles__line-img { 322 | --tile-margin: 1vw; 323 | margin: 0 var(--tile-margin); 324 | width: calc(25% - var(--tile-margin) * 2); 325 | height: 100%; 326 | } 327 | 328 | .tiles--small .tiles__line-img { 329 | --tile-margin: 5px; 330 | margin: 0 var(--tile-margin); 331 | width: calc(12.5% - var(--tile-margin) * 2); 332 | height: 100%; 333 | } 334 | 335 | .tiles--rotated .tiles__line-img { 336 | --tile-margin: 1vw; 337 | width: calc(16.6666% - var(--tile-margin) * 2); 338 | height: calc( var(--tileswrap-height) / 5 - (4 * var(--tile-margin) / 2)); 339 | } 340 | 341 | .tiles--columns-rotated .tiles__line-img { 342 | --tile-margin: 3vw 0; 343 | width: 100%; 344 | height: 400px; 345 | } 346 | 347 | .tiles--columns .tiles__line-img { 348 | --tile-margin: 2rem 0; 349 | width: 100%; 350 | height: calc(25vw * 1.3); 351 | } 352 | 353 | .tiles--fixed .tiles__line-img { 354 | --tile-margin: 10px; 355 | -webkit-filter: brightness(0.8); 356 | width: calc(16.6666% - var(--tile-margin) * 2); 357 | height: calc( var(--tileswrap-height) / 3 - (3 * var(--tile-margin) / 2)); 358 | } 359 | 360 | .tiles--darker .tiles__line-img { 361 | opacity: 0.7; 362 | } 363 | 364 | .tiles__title { 365 | position: absolute; 366 | height: 100vh; 367 | width: 100%; 368 | display: flex; 369 | justify-content: center; 370 | align-items: center; 371 | font-size: 10vw; 372 | padding: 3rem; 373 | margin: 0; 374 | line-height: 0.8; 375 | font-family: span, serif; 376 | font-weight: 700; 377 | font-style: normal; 378 | } 379 | 380 | .tiles__title--alt { 381 | font-size: 9vw; 382 | font-size: clamp(2rem, 9vw, 7.25rem); 383 | } 384 | 385 | .tiles__title--intro { 386 | padding-top: 10vh; 387 | align-items: flex-start; 388 | justify-content: flex-start; 389 | } 390 | 391 | .tiles__title--right { 392 | justify-content: flex-end; 393 | } 394 | 395 | .tiles__title--left { 396 | justify-content: flex-start; 397 | } 398 | 399 | .tiles__title--full { 400 | height: 100%; 401 | } 402 | 403 | .backtop { 404 | align-self: center; 405 | margin: auto 0; 406 | font-size: 6vw; 407 | cursor: pointer; 408 | text-decoration: none; 409 | } 410 | 411 | .backtop::after { 412 | content: "\2934"; 413 | font-size: 3vw; 414 | vertical-align: top; 415 | margin-left: 1rem; 416 | } 417 | 418 | /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 419 | html.has-scroll-smooth { 420 | overflow: hidden; 421 | } 422 | 423 | html.has-scroll-dragging { 424 | -webkit-user-select: none; 425 | -moz-user-select: none; 426 | -ms-user-select: none; 427 | user-select: none; 428 | } 429 | 430 | .has-scroll-smooth body { 431 | overflow: hidden; 432 | } 433 | 434 | .has-scroll-smooth [data-scroll-container] { 435 | min-height: 100vh; 436 | } 437 | 438 | .c-scrollbar { 439 | position: absolute; 440 | right: 0; 441 | top: 0; 442 | width: 11px; 443 | height: 100vh; 444 | transform-origin: center right; 445 | transition: transform 0.3s, opacity 0.3s; 446 | opacity: 0; 447 | } 448 | .c-scrollbar:hover { 449 | transform: scaleX(1.45); 450 | } 451 | .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { 452 | opacity: 1; 453 | } 454 | 455 | .c-scrollbar_thumb { 456 | position: absolute; 457 | top: 0; 458 | right: 0; 459 | background-color: black; 460 | opacity: 0.5; 461 | width: 7px; 462 | border-radius: 10px; 463 | margin: 2px; 464 | cursor: -webkit-grab; 465 | cursor: grab; 466 | } 467 | .has-scroll-dragging .c-scrollbar_thumb { 468 | cursor: -webkit-grabbing; 469 | cursor: grabbing; 470 | } 471 | 472 | @media screen and (min-width: 53em) { 473 | .frame { 474 | display: grid; 475 | align-content: space-between; 476 | width: 100%; 477 | grid-gap: 5vw; 478 | grid-template-columns: auto auto auto 1fr; 479 | grid-template-areas: 'title title links demos'; 480 | } 481 | .frame__title { 482 | margin: 0; 483 | grid-area: title; 484 | } 485 | .frame__demos { 486 | margin: 0; 487 | grid-area: demos; 488 | justify-self: end; 489 | } 490 | .frame__links { 491 | grid-area: links; 492 | padding: 0; 493 | justify-self: end; 494 | } 495 | .tiles--columns-rotated .tiles__line { 496 | width: 33vmax; 497 | } 498 | .tiles--columns-rotated .tiles__line:nth-child(even) { 499 | margin-top: -20vmax; 500 | } 501 | .tiles--columns-rotated .tiles__line-img { 502 | height: 40vmax; 503 | } 504 | .content--numbered::after { 505 | counter-increment: contentSection; 506 | content: counter(contentSection,decimal-leading-zero); 507 | position: absolute; 508 | top: 50%; 509 | right: 3rem; 510 | border: 1px solid; 511 | color: var(--color-alt); 512 | width: 4rem; 513 | height: 4rem; 514 | margin-top: -2rem; 515 | display: flex; 516 | align-items: center; 517 | justify-content: center; 518 | border-radius: 50%; 519 | } 520 | .content__text { 521 | max-width: 800px; 522 | width: 50vw; 523 | min-width: calc(300px - 6rem); 524 | } 525 | .content__text--wide { 526 | max-width: 1000px; 527 | width: 65vw; 528 | } 529 | .tiles--small { 530 | --tiles-height: 240px; 531 | } 532 | } 533 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/favicon.ico -------------------------------------------------------------------------------- /src/img/demo1/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/1.jpg -------------------------------------------------------------------------------- /src/img/demo1/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/10.jpg -------------------------------------------------------------------------------- /src/img/demo1/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/11.jpg -------------------------------------------------------------------------------- /src/img/demo1/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/12.jpg -------------------------------------------------------------------------------- /src/img/demo1/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/13.jpg -------------------------------------------------------------------------------- /src/img/demo1/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/14.jpg -------------------------------------------------------------------------------- /src/img/demo1/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/15.jpg -------------------------------------------------------------------------------- /src/img/demo1/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/16.jpg -------------------------------------------------------------------------------- /src/img/demo1/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/17.jpg -------------------------------------------------------------------------------- /src/img/demo1/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/18.jpg -------------------------------------------------------------------------------- /src/img/demo1/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/19.jpg -------------------------------------------------------------------------------- /src/img/demo1/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/2.jpg -------------------------------------------------------------------------------- /src/img/demo1/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/20.jpg -------------------------------------------------------------------------------- /src/img/demo1/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/21.jpg -------------------------------------------------------------------------------- /src/img/demo1/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/22.jpg -------------------------------------------------------------------------------- /src/img/demo1/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/23.jpg -------------------------------------------------------------------------------- /src/img/demo1/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/24.jpg -------------------------------------------------------------------------------- /src/img/demo1/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/25.jpg -------------------------------------------------------------------------------- /src/img/demo1/26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/26.jpg -------------------------------------------------------------------------------- /src/img/demo1/27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/27.jpg -------------------------------------------------------------------------------- /src/img/demo1/28.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/28.jpg -------------------------------------------------------------------------------- /src/img/demo1/29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/29.jpg -------------------------------------------------------------------------------- /src/img/demo1/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/3.jpg -------------------------------------------------------------------------------- /src/img/demo1/30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/30.jpg -------------------------------------------------------------------------------- /src/img/demo1/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/4.jpg -------------------------------------------------------------------------------- /src/img/demo1/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/5.jpg -------------------------------------------------------------------------------- /src/img/demo1/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/6.jpg -------------------------------------------------------------------------------- /src/img/demo1/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/7.jpg -------------------------------------------------------------------------------- /src/img/demo1/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/8.jpg -------------------------------------------------------------------------------- /src/img/demo1/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo1/9.jpg -------------------------------------------------------------------------------- /src/img/demo2/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/1.jpg -------------------------------------------------------------------------------- /src/img/demo2/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/10.jpg -------------------------------------------------------------------------------- /src/img/demo2/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/11.jpg -------------------------------------------------------------------------------- /src/img/demo2/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/12.jpg -------------------------------------------------------------------------------- /src/img/demo2/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/13.jpg -------------------------------------------------------------------------------- /src/img/demo2/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/14.jpg -------------------------------------------------------------------------------- /src/img/demo2/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/15.jpg -------------------------------------------------------------------------------- /src/img/demo2/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/16.jpg -------------------------------------------------------------------------------- /src/img/demo2/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/17.jpg -------------------------------------------------------------------------------- /src/img/demo2/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/18.jpg -------------------------------------------------------------------------------- /src/img/demo2/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/19.jpg -------------------------------------------------------------------------------- /src/img/demo2/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/2.jpg -------------------------------------------------------------------------------- /src/img/demo2/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/20.jpg -------------------------------------------------------------------------------- /src/img/demo2/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/3.jpg -------------------------------------------------------------------------------- /src/img/demo2/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/4.jpg -------------------------------------------------------------------------------- /src/img/demo2/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/5.jpg -------------------------------------------------------------------------------- /src/img/demo2/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/6.jpg -------------------------------------------------------------------------------- /src/img/demo2/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/7.jpg -------------------------------------------------------------------------------- /src/img/demo2/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/8.jpg -------------------------------------------------------------------------------- /src/img/demo2/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo2/9.jpg -------------------------------------------------------------------------------- /src/img/demo3/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo3/1.jpg -------------------------------------------------------------------------------- /src/img/demo3/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo3/10.jpg -------------------------------------------------------------------------------- /src/img/demo3/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo3/11.jpg -------------------------------------------------------------------------------- /src/img/demo3/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo3/12.jpg -------------------------------------------------------------------------------- /src/img/demo3/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo3/2.jpg -------------------------------------------------------------------------------- /src/img/demo3/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo3/3.jpg -------------------------------------------------------------------------------- /src/img/demo3/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo3/4.jpg -------------------------------------------------------------------------------- /src/img/demo3/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo3/5.jpg -------------------------------------------------------------------------------- /src/img/demo3/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo3/6.jpg -------------------------------------------------------------------------------- /src/img/demo3/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo3/7.jpg -------------------------------------------------------------------------------- /src/img/demo3/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo3/8.jpg -------------------------------------------------------------------------------- /src/img/demo3/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TileScroll/5b65daea2c25e4ddb09052af58c55548a56cce3c/src/img/demo3/9.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Tiles Scroll Animation | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |

Image Tiles Scroll Animation with Locomotive Scroll

22 |
23 |
24 | Previous demo 25 | Article 26 | GitHub 27 |
28 |
29 | Demo 1 30 | Demo 2 31 | Demo 3 32 |
33 |
34 |

Unseeing the seen

35 |

decondition yourself

36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |

The human world is exploding at the seams. Human creativity and the implementation of human inventions and technology is now at an accelerated fever pitch like nothing ever before seen in the history of the world. Well, where is it leading, and how does one integrate this stuff into one’s own life? What does it mean about the experience of being human? I have proposed the existence of an invisible, permeating Something that is throughout all being, all time, all space, all bodies, all thought, which I call Novelty; and the interesting thing about novelty is that it’s increasing constantly.

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 |

endless acceleration toward infinity

114 |

the greatest barrier to your enlightenment

115 |
116 |
117 |

The conservation of novelty is simply that, over time, the universe has become more complicated. New levels of complexity become the foundations for yet deeper levels of complexity. And this phenomenon of the production and conservation of what I call novelty is not something which goes on only in the biological domain or only in the cultural domain or only in the domain of physics. It is a trans-categorical impulse in reality, meaning: it’s everywhere. Everywhere!

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 | Back to the top 145 |
146 | @codrops 147 |
148 | Demo 1 149 | Demo 2 150 | Demo 3 151 |
152 |
153 |
154 |
155 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /src/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Tiles Scroll Animation | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |

Image Tiles Scroll Animation with Locomotive Scroll

22 |
23 |
24 | Previous demo 25 | Article 26 | GitHub 27 |
28 |
29 | Demo 1 30 | Demo 2 31 | Demo 3 32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |

Constrasts

74 |
75 |
76 |

Psychedelics are illegal not because a loving government is concerned that you may jump out of a third story window. Psychedelics are illegal because they dissolve opinion structures and culturally laid down models of behaviour and information processing. They open you up to the possibility that everything you know is wrong.

77 |
78 |
79 |

pursuit of happiness

80 |

the right to experiment with your own consciousnes

81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 |
96 |
97 | Back to the top 98 |
99 | @codrops 100 |
101 | Previous demo 102 | Article 103 | GitHub 104 |
105 |
106 | Demo 1 107 | Demo 2 108 | Demo 3 109 |
110 |
111 |
112 |
113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /src/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Tiles Scroll Animation | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |

Image Tiles Scroll Animation with Locomotive Scroll

22 |
23 |
24 | Previous demo 25 | Article 26 | GitHub 27 |
28 |
29 | Demo 1 30 | Demo 2 31 | Demo 3 32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |

Neurotic
culture

79 |
80 |
81 |

We have the money, the power, the medical understanding, the scientific know-how, the love and the community to produce a kind of human paradise. But we are led by the least among us – the least intelligent, the least noble, the least visionary. We are led by the least among us and we do not fight back against the dehumanizing values that are handed down as control icons.

82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |

Civilization

93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |

Empowerment

104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |

Apocalypse

115 |
116 |
117 |

We have to create culture, don’t watch TV, don’t read magazines, don’t even listen to NPR. Create your own roadshow. The nexus of space and time where you are now is the most immediate sector of your universe, and if you’re worrying about Michael Jackson or Bill Clinton or somebody else, then you are disempowered, you’re giving it all away to icons, icons which are maintained by an electronic media so that you want to dress like X or have lips like Y.

118 |
119 |
120 |

Culture is not your friend

121 |

express ourselves through creative activity

122 |
123 |
124 |

This is shit-brained, this kind of thinking. That is all cultural diversion, and what is real is you and your friends and your associations, your highs, your orgasms, your hopes, your plans, your fears. And we are told ‘no’, we’re unimportant, we’re peripheral. ‘Get a degree, get a job, get a this, get a that.’ And then you’re a player, you don’t want to even play in that game. You want to reclaim your mind and get it out of the hands of the cultural engineers who want to turn you into a half-baked moron consuming all this trash that’s being manufactured out of the bones of a dying world.

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 | Back to the top 156 |
157 | @codrops 158 |
159 | Demo 1 160 | Demo 2 161 | Demo 3 162 |
163 |
164 |
165 |
166 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages, preloadFonts } from './utils'; 2 | import LocomotiveScroll from 'locomotive-scroll'; 3 | 4 | const backtopEl = document.querySelector('.backtop'); 5 | const headerEl = document.querySelector('#header'); 6 | 7 | // Preload images and fonts 8 | Promise.all([preloadImages('.tiles__line-img'), preloadFonts('rmd7deq')]).then(() => { 9 | // Remove loader (loading class) 10 | document.body.classList.remove('loading'); 11 | 12 | // Initialize the Locomotive scroll 13 | const scroll = new LocomotiveScroll({ 14 | el: document.querySelector('[data-scroll-container]'), 15 | smooth: true 16 | }); 17 | 18 | backtopEl.addEventListener('click', () => scroll.scrollTo(headerEl)); 19 | }); -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | // Preload images 4 | const preloadImages = (selector = 'img') => { 5 | return new Promise((resolve) => { 6 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 7 | }); 8 | }; 9 | 10 | // Preload images 11 | const preloadFonts = (id) => { 12 | return new Promise((resolve) => { 13 | WebFont.load({ 14 | typekit: { 15 | id: id 16 | }, 17 | active: resolve 18 | }); 19 | }); 20 | }; 21 | 22 | export { 23 | preloadImages, 24 | preloadFonts 25 | }; --------------------------------------------------------------------------------