├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── 1.376b664e.jpg ├── 1.abdece96.jpg ├── 1.b2dd7476.jpg ├── 1.e7864b95.jpg ├── 10.4f66b9bf.jpg ├── 10.821b07c9.jpg ├── 10.ba0c70ca.jpg ├── 10.e7aba2b1.jpg ├── 11.1201dde3.jpg ├── 11.bc61a1e3.jpg ├── 11.e51eb489.jpg ├── 11.e75a941d.jpg ├── 12.0aa60765.jpg ├── 12.4061d1aa.jpg ├── 12.aac53079.jpg ├── 12.d01438d5.jpg ├── 2.40f30460.jpg ├── 2.c629256c.jpg ├── 2.c8c223d9.jpg ├── 2.dd89043e.jpg ├── 3.1e79277a.jpg ├── 3.449799ca.jpg ├── 3.4b150b5c.jpg ├── 3.ecfa820e.jpg ├── 4.00c00e57.jpg ├── 4.206ad742.jpg ├── 4.500b54f2.jpg ├── 4.8ed29d64.jpg ├── 5.208189fa.jpg ├── 5.2667ae3b.jpg ├── 5.72557cf0.jpg ├── 5.7795c51e.jpg ├── 6.3ade7d4e.jpg ├── 6.aa64fc47.jpg ├── 6.ac3cd742.jpg ├── 6.dae49e4f.jpg ├── 7.0a1756e3.jpg ├── 7.4183a781.jpg ├── 7.5ac05771.jpg ├── 7.92c49dce.jpg ├── 8.029c7dba.jpg ├── 8.2c69e487.jpg ├── 8.698e0dbd.jpg ├── 8.94720f30.jpg ├── 9.022cbb30.jpg ├── 9.16738e2f.jpg ├── 9.a23c1629.jpg ├── 9.c1ab683f.jpg ├── base.98fd6c19.css ├── demo1.151408fb.js ├── demo1.ea7e4db3.css ├── demo2.06b37b5f.css ├── demo2.44794d1a.js ├── demo3.b516845c.js ├── demo3.f904c581.css ├── demo4.7fb5a017.css ├── demo4.e22d7780.js ├── demo5.5199082f.css ├── demo5.c1b42ce3.js ├── favicon.26242483.ico ├── index.html ├── index2.html ├── index3.html ├── index4.html └── index5.html ├── package.json └── src ├── css ├── base.css ├── demo1.css ├── demo2.css ├── demo3.css ├── demo4.css └── demo5.css ├── favicon.ico ├── img ├── demo1 │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── demo2 │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 2.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 └── demo4 │ ├── 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 ├── index4.html ├── index5.html └── js ├── cursor.js ├── demo1 └── index.js ├── demo2 └── index.js ├── demo3 └── index.js ├── demo4 └── index.js ├── demo5 └── 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 | # Horizontal Smooth Scroll Layouts 2 | 3 | Some ideas for horizontal smooth scroll layouts and animations powered by [Locomotive Scroll](https://locomotivemtl.github.io/locomotive-scroll/). 4 | 5 | ![Horizontal Smooth Scroll Layouts](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/HorizontalScroll_featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=52157) 8 | 9 | [Demo](http://tympanus.net/Development/HorizontalSmoothScrollLayout/) 10 | 11 | 12 | ## Installation 13 | 14 | Install dependencies: 15 | 16 | ``` 17 | npm install 18 | ``` 19 | 20 | Compile the code for development and start a local server: 21 | 22 | ``` 23 | npm start 24 | ``` 25 | 26 | Create the build: 27 | 28 | ``` 29 | npm run build 30 | ``` 31 | 32 | ## Credits 33 | 34 | - Images from [Unsplash](https://unsplash.com) 35 | - Demo 2 images by [Nicole De Khors](https://burst.shopify.com/@ndekhors) 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.376b664e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/1.376b664e.jpg -------------------------------------------------------------------------------- /dist/1.abdece96.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/1.abdece96.jpg -------------------------------------------------------------------------------- /dist/1.b2dd7476.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/1.b2dd7476.jpg -------------------------------------------------------------------------------- /dist/1.e7864b95.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/1.e7864b95.jpg -------------------------------------------------------------------------------- /dist/10.4f66b9bf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/10.4f66b9bf.jpg -------------------------------------------------------------------------------- /dist/10.821b07c9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/10.821b07c9.jpg -------------------------------------------------------------------------------- /dist/10.ba0c70ca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/10.ba0c70ca.jpg -------------------------------------------------------------------------------- /dist/10.e7aba2b1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/10.e7aba2b1.jpg -------------------------------------------------------------------------------- /dist/11.1201dde3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/11.1201dde3.jpg -------------------------------------------------------------------------------- /dist/11.bc61a1e3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/11.bc61a1e3.jpg -------------------------------------------------------------------------------- /dist/11.e51eb489.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/11.e51eb489.jpg -------------------------------------------------------------------------------- /dist/11.e75a941d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/11.e75a941d.jpg -------------------------------------------------------------------------------- /dist/12.0aa60765.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/12.0aa60765.jpg -------------------------------------------------------------------------------- /dist/12.4061d1aa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/12.4061d1aa.jpg -------------------------------------------------------------------------------- /dist/12.aac53079.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/12.aac53079.jpg -------------------------------------------------------------------------------- /dist/12.d01438d5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/12.d01438d5.jpg -------------------------------------------------------------------------------- /dist/2.40f30460.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/2.40f30460.jpg -------------------------------------------------------------------------------- /dist/2.c629256c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/2.c629256c.jpg -------------------------------------------------------------------------------- /dist/2.c8c223d9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/2.c8c223d9.jpg -------------------------------------------------------------------------------- /dist/2.dd89043e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/2.dd89043e.jpg -------------------------------------------------------------------------------- /dist/3.1e79277a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/3.1e79277a.jpg -------------------------------------------------------------------------------- /dist/3.449799ca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/3.449799ca.jpg -------------------------------------------------------------------------------- /dist/3.4b150b5c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/3.4b150b5c.jpg -------------------------------------------------------------------------------- /dist/3.ecfa820e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/3.ecfa820e.jpg -------------------------------------------------------------------------------- /dist/4.00c00e57.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/4.00c00e57.jpg -------------------------------------------------------------------------------- /dist/4.206ad742.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/4.206ad742.jpg -------------------------------------------------------------------------------- /dist/4.500b54f2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/4.500b54f2.jpg -------------------------------------------------------------------------------- /dist/4.8ed29d64.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/4.8ed29d64.jpg -------------------------------------------------------------------------------- /dist/5.208189fa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/5.208189fa.jpg -------------------------------------------------------------------------------- /dist/5.2667ae3b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/5.2667ae3b.jpg -------------------------------------------------------------------------------- /dist/5.72557cf0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/5.72557cf0.jpg -------------------------------------------------------------------------------- /dist/5.7795c51e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/5.7795c51e.jpg -------------------------------------------------------------------------------- /dist/6.3ade7d4e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/6.3ade7d4e.jpg -------------------------------------------------------------------------------- /dist/6.aa64fc47.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/6.aa64fc47.jpg -------------------------------------------------------------------------------- /dist/6.ac3cd742.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/6.ac3cd742.jpg -------------------------------------------------------------------------------- /dist/6.dae49e4f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/6.dae49e4f.jpg -------------------------------------------------------------------------------- /dist/7.0a1756e3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/7.0a1756e3.jpg -------------------------------------------------------------------------------- /dist/7.4183a781.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/7.4183a781.jpg -------------------------------------------------------------------------------- /dist/7.5ac05771.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/7.5ac05771.jpg -------------------------------------------------------------------------------- /dist/7.92c49dce.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/7.92c49dce.jpg -------------------------------------------------------------------------------- /dist/8.029c7dba.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/8.029c7dba.jpg -------------------------------------------------------------------------------- /dist/8.2c69e487.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/8.2c69e487.jpg -------------------------------------------------------------------------------- /dist/8.698e0dbd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/8.698e0dbd.jpg -------------------------------------------------------------------------------- /dist/8.94720f30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/8.94720f30.jpg -------------------------------------------------------------------------------- /dist/9.022cbb30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/9.022cbb30.jpg -------------------------------------------------------------------------------- /dist/9.16738e2f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/9.16738e2f.jpg -------------------------------------------------------------------------------- /dist/9.a23c1629.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/9.a23c1629.jpg -------------------------------------------------------------------------------- /dist/9.c1ab683f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/9.c1ab683f.jpg -------------------------------------------------------------------------------- /dist/base.98fd6c19.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 12px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #000100; 14 | --color-bg: #e2d9c7; 15 | --color-link: #395bb5; 16 | --color-link-hover: #000100; 17 | --color-gallery-title: #2c2724; 18 | --color-gallery-number: #d9d0be; 19 | --color-gallery-link: #fff; 20 | --color-gallery-link-bg: #2858d7; 21 | --color-gallery-link-hover: #fff; 22 | --color-gallery-link-bg-hover: #d4b77d; 23 | color: var(--color-text); 24 | background-color: var(--color-bg); 25 | --cursor-stroke: none; 26 | --cursor-fill: #c5681c; 27 | --cursor-stroke-width: 1px; 28 | font-family: halyard-display, sans-serif; 29 | font-weight: 300; 30 | -webkit-font-smoothing: antialiased; 31 | -moz-osx-font-smoothing: grayscale; 32 | } 33 | 34 | /* Page Loader */ 35 | .js .loading::before, 36 | .js .loading::after { 37 | content: ''; 38 | position: fixed; 39 | z-index: 1000; 40 | } 41 | 42 | .js .loading::before { 43 | top: 0; 44 | left: 0; 45 | width: 100%; 46 | height: 100%; 47 | background: var(--color-bg); 48 | } 49 | 50 | .js .loading::after { 51 | top: 50%; 52 | left: 50%; 53 | width: 60px; 54 | height: 60px; 55 | margin: -30px 0 0 -30px; 56 | border-radius: 50%; 57 | opacity: 0.4; 58 | background: var(--color-link); 59 | animation: loaderAnim 0.7s linear infinite alternate forwards; 60 | 61 | } 62 | 63 | @keyframes loaderAnim { 64 | to { 65 | opacity: 1; 66 | transform: scale3d(0.5,0.5,1); 67 | } 68 | } 69 | 70 | a { 71 | text-decoration: none; 72 | color: var(--color-link); 73 | outline: none; 74 | } 75 | 76 | a:hover, 77 | a:focus { 78 | color: var(--color-link-hover); 79 | outline: none; 80 | } 81 | 82 | .frame { 83 | padding: 3rem 5vw; 84 | text-align: center; 85 | position: relative; 86 | z-index: 1000; 87 | text-transform: uppercase; 88 | } 89 | 90 | .frame__title { 91 | font-size: 1rem; 92 | margin: 0 0 1rem; 93 | font-weight: 300; 94 | } 95 | 96 | .frame__links { 97 | display: inline; 98 | } 99 | 100 | .frame__links a:not(:last-child) { 101 | margin-right: 1rem; 102 | } 103 | 104 | .frame__demo { 105 | margin: 0 1rem; 106 | } 107 | 108 | .frame__demo--current, 109 | .frame__demo--current:hover { 110 | color: var(--color-text); 111 | cursor: default; 112 | } 113 | 114 | .content { 115 | display: flex; 116 | flex-direction: column; 117 | height: calc(100vh - 13rem); 118 | position: relative; 119 | justify-content: flex-start; 120 | } 121 | 122 | .cursor { 123 | display: none; 124 | } 125 | 126 | @media screen and (min-width: 53em) { 127 | .frame { 128 | position: fixed; 129 | text-align: left; 130 | z-index: 100; 131 | top: 0; 132 | left: 0; 133 | display: grid; 134 | align-content: space-between; 135 | width: 100%; 136 | max-width: none; 137 | padding: 1.75rem; 138 | pointer-events: none; 139 | grid-template-columns: auto 1fr 1fr auto; 140 | grid-template-rows: auto; 141 | grid-template-areas: 'title demos demos links'; 142 | } 143 | .frame__title { 144 | margin: 0 4rem 0 0; 145 | grid-area: title; 146 | } 147 | .frame__info { 148 | grid-area: info; 149 | } 150 | .frame__demos { 151 | grid-area: demos; 152 | } 153 | .frame__links { 154 | grid-area: links; 155 | padding: 0; 156 | justify-self: end; 157 | } 158 | .frame a { 159 | pointer-events: auto; 160 | } 161 | .content { 162 | height: 100vh; 163 | justify-content: center; 164 | } 165 | } 166 | 167 | @media (any-pointer:fine) { 168 | .cursor { 169 | position: fixed; 170 | top: 0; 171 | left: 0; 172 | display: block; 173 | pointer-events: none; 174 | } 175 | 176 | .cursor__inner { 177 | fill: var(--cursor-fill); 178 | stroke: var(--cursor-stroke); 179 | stroke-width: var(--cursor-stroke-width); 180 | opacity: 0.7; 181 | } 182 | 183 | .no-js .cursor { 184 | display: none; 185 | } 186 | 187 | } 188 | 189 | /*! locomotive-scroll v4.0.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 190 | html.has-scroll-smooth { 191 | overflow: hidden; } 192 | 193 | html.has-scroll-dragging { 194 | -webkit-user-select: none; 195 | -moz-user-select: none; 196 | -ms-user-select: none; 197 | user-select: none; } 198 | 199 | .has-scroll-smooth body { 200 | overflow: hidden; } 201 | 202 | .has-scroll-smooth [data-scroll-container] { 203 | min-height: 100vh; } 204 | 205 | [data-scroll-direction="horizontal"] [data-scroll-container] { 206 | white-space: nowrap; 207 | height: 100vh; 208 | display: inline-block; 209 | white-space: nowrap; } 210 | 211 | [data-scroll-direction="horizontal"] [data-scroll-section] { 212 | display: inline-block; 213 | vertical-align: top; 214 | white-space: nowrap; 215 | height: 100%; } 216 | 217 | .c-scrollbar { 218 | position: absolute; 219 | right: 0; 220 | top: 0; 221 | width: 11px; 222 | height: 100%; 223 | transform-origin: center right; 224 | transition: transform 0.3s, opacity 0.3s; 225 | opacity: 0; } 226 | .c-scrollbar:hover { 227 | transform: scaleX(1.45); } 228 | .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { 229 | opacity: 1; } 230 | [data-scroll-direction="horizontal"] .c-scrollbar { 231 | width: 100%; 232 | height: 10px; 233 | top: auto; 234 | bottom: 0; 235 | transform: scaleY(1); } 236 | [data-scroll-direction="horizontal"] .c-scrollbar:hover { 237 | transform: scaleY(1.3); } 238 | 239 | .c-scrollbar_thumb { 240 | position: absolute; 241 | top: 0; 242 | right: 0; 243 | background-color: black; 244 | opacity: 0.5; 245 | width: 7px; 246 | border-radius: 10px; 247 | margin: 2px; 248 | cursor: -webkit-grab; 249 | cursor: grab; } 250 | .has-scroll-dragging .c-scrollbar_thumb { 251 | cursor: -webkit-grabbing; 252 | cursor: grabbing; } 253 | [data-scroll-direction="horizontal"] .c-scrollbar_thumb { 254 | right: auto; 255 | bottom: 0; } -------------------------------------------------------------------------------- /dist/demo1.ea7e4db3.css: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: flex; 3 | margin-left: 12vw; 4 | padding-right: 12vw; 5 | } 6 | 7 | .gallery__item { 8 | margin: 0 3vw; 9 | display: grid; 10 | grid-template-areas: '... ...' 11 | '... gallery-image' 12 | '... ...' ; 13 | grid-template-columns: 8rem 21vmax; 14 | grid-template-rows: 8rem 28vmax 3rem; 15 | } 16 | 17 | .gallery__item:nth-child(even) { 18 | padding-top: 10vh; 19 | } 20 | 21 | .gallery__item-img { 22 | grid-area: gallery-image; 23 | width: 100%; 24 | height: 100%; 25 | overflow: hidden; 26 | position: relative; 27 | transform-origin: 50% 100%; 28 | } 29 | 30 | .gallery__item-imginner { 31 | background-size: cover; 32 | background-position: 50% 0; 33 | width: 100%; 34 | height: 100%; 35 | } 36 | 37 | .gallery__item-caption { 38 | grid-area: 1 / 1 / 4 / 3; 39 | display: grid; 40 | grid-template-areas: 'gallery-number gallery-title' 41 | 'gallery-link ...' 42 | 'gallery-link gallery-tags' ; 43 | grid-template-columns: 8rem auto; 44 | grid-template-rows: 8rem auto 3rem; 45 | 46 | } 47 | 48 | .gallery__item-number { 49 | grid-area: gallery-number; 50 | font-size: 6rem; 51 | font-size: clamp(2.5rem,9vw,6.5rem); 52 | justify-self: end; 53 | padding-right: 2rem; 54 | color: var(--color-gallery-number); 55 | } 56 | 57 | .gallery__item-title { 58 | grid-area: gallery-title; 59 | margin: 0; 60 | font-size: 4rem; 61 | font-size: clamp(2rem,5vw,4rem); 62 | color: var(--color-gallery-title); 63 | } 64 | 65 | .gallery__item-number, 66 | .gallery__item-title, 67 | .gallery__text { 68 | font-family: moret, serif; 69 | font-weight: 800; 70 | font-style: italic; 71 | align-self: center; 72 | } 73 | 74 | .gallery__item-link { 75 | grid-area: gallery-link; 76 | align-self: end; 77 | font-size: 1.5rem; 78 | background: var(--color-gallery-link-bg); 79 | color: var(--color-gallery-link); 80 | text-decoration: underline; 81 | width: 120px; 82 | height: 120px; 83 | border-radius: 50%; 84 | position: relative; 85 | display: flex; 86 | justify-content: center; 87 | align-items: center; 88 | cursor: pointer; 89 | } 90 | 91 | .gallery__item-link:focus, 92 | .gallery__item-link:hover { 93 | background: var(--color-gallery-link-bg-hover); 94 | color: var(--color-gallery-link-hover); 95 | text-decoration: none; 96 | } 97 | 98 | .gallery__item-tags { 99 | grid-area: gallery-tags; 100 | justify-self: end; 101 | font-size: 1.5rem; 102 | display: grid; 103 | grid-auto-flow: column; 104 | grid-gap: 1rem; 105 | cursor: pointer; 106 | } 107 | 108 | .gallery__text { 109 | font-size: 20vw; 110 | line-height: 0.8; 111 | margin: 0 10vw 0 14vw; 112 | text-transform: lowercase; 113 | color: var(--color-gallery-title); 114 | color: transparent; 115 | -webkit-text-stroke: 1px #978c77; 116 | text-stroke: 1px #978c77; 117 | -webkit-text-fill-color: transparent; 118 | text-fill-color: transparent; 119 | } 120 | 121 | .gallery__text-inner { 122 | display: block; 123 | } -------------------------------------------------------------------------------- /dist/demo2.06b37b5f.css: -------------------------------------------------------------------------------- 1 | body { 2 | --color-text: #66665d; 3 | --color-bg: #0e0e0d; 4 | --color-link: #cc0000; 5 | --color-link-hover: #fff; 6 | --color-gallery-title: #d9d0be; 7 | --color-gallery-number: #181817; 8 | --color-gallery-link: #fff; 9 | --color-gallery-link-bg: #cc0000; 10 | --color-gallery-link-hover: #0e0e0d; 11 | --color-gallery-link-bg-hover: #d9d0be; 12 | --cursor-stroke: none; 13 | --cursor-fill: #cc0000; 14 | --cursor-stroke-width: 1px; 15 | } 16 | 17 | .rotate { 18 | transform: rotate(-4deg); 19 | } 20 | 21 | .gallery { 22 | display: flex; 23 | padding-right: 12vw; 24 | margin-left: 5vw; 25 | } 26 | 27 | .gallery__item { 28 | margin: 0 3vw; 29 | display: grid; 30 | grid-template-areas: '... ...' 31 | '... gallery-image' 32 | '... ...' ; 33 | grid-template-columns: 8rem 21vmax; 34 | grid-template-rows: 8rem 28vmax 3rem; 35 | } 36 | 37 | .gallery__item-img { 38 | grid-area: gallery-image; 39 | width: 100%; 40 | height: 100%; 41 | overflow: hidden; 42 | position: relative; 43 | will-change: transform; 44 | } 45 | 46 | .gallery__item-imginner { 47 | background-size: cover; 48 | background-position: 50% 0; 49 | width: calc(100% + 10vw); 50 | margin-left: -5vw; 51 | height: 100%; 52 | will-change: transform; 53 | } 54 | 55 | .gallery__item-caption { 56 | grid-area: 1 / 1 / 4 / 3; 57 | display: grid; 58 | grid-template-areas: 'gallery-number gallery-title' 59 | 'gallery-link ...' 60 | 'gallery-link gallery-tags' ; 61 | grid-template-columns: 8rem auto; 62 | grid-template-rows: 8rem auto 3rem; 63 | 64 | } 65 | 66 | .gallery__item-number { 67 | grid-area: gallery-number; 68 | font-size: 6rem; 69 | font-size: clamp(2.5rem,9vw,6.5rem); 70 | justify-self: end; 71 | padding-right: 2rem; 72 | color: var(--color-gallery-number); 73 | } 74 | 75 | .gallery__item-title { 76 | grid-area: gallery-title; 77 | margin: 0; 78 | font-size: 4rem; 79 | font-size: clamp(2rem,5vw,4rem); 80 | color: var(--color-gallery-title); 81 | } 82 | 83 | .gallery__item-number, 84 | .gallery__item-title, 85 | .gallery__text { 86 | font-family: moret, serif; 87 | font-weight: 800; 88 | font-style: italic; 89 | align-self: center; 90 | } 91 | 92 | .gallery__item-link { 93 | grid-area: gallery-link; 94 | align-self: end; 95 | font-size: 1.5rem; 96 | background: var(--color-gallery-link-bg); 97 | color: var(--color-gallery-link); 98 | text-decoration: underline; 99 | width: 120px; 100 | height: 120px; 101 | border-radius: 50%; 102 | position: relative; 103 | display: flex; 104 | justify-content: center; 105 | align-items: center; 106 | cursor: pointer; 107 | } 108 | 109 | .gallery__item-link:focus, 110 | .gallery__item-link:hover { 111 | background: var(--color-gallery-link-bg-hover); 112 | color: var(--color-gallery-link-hover); 113 | text-decoration: none; 114 | } 115 | 116 | .gallery__item-tags { 117 | grid-area: gallery-tags; 118 | justify-self: end; 119 | font-size: 1.5rem; 120 | display: grid; 121 | grid-auto-flow: column; 122 | grid-gap: 1rem; 123 | cursor: pointer; 124 | } 125 | 126 | .gallery__text { 127 | font-size: 20vw; 128 | line-height: 0.8; 129 | margin: 0 12vw; 130 | text-transform: lowercase; 131 | color: transparent; 132 | -webkit-text-stroke: 1px #645c5b; 133 | text-stroke: 1px #645c5b; 134 | -webkit-text-fill-color: transparent; 135 | text-fill-color: transparent; 136 | } 137 | 138 | .gallery__text-inner { 139 | display: block; 140 | } 141 | 142 | @media screen and (min-width: 53em) { 143 | .frame { 144 | grid-template-areas: 'title demos demos links'; 145 | } 146 | .frame__info { 147 | justify-self: end; 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /dist/demo3.f904c581.css: -------------------------------------------------------------------------------- 1 | body { 2 | --color-text: #000; 3 | --color-bg: #dedede; 4 | --color-link: #828da1; 5 | --color-link-hover: #cc0000; 6 | --color-gallery-title: #d9d0be; 7 | --color-gallery-number: #000; 8 | --color-gallery-link: #fff; 9 | --color-gallery-link-bg: #cc0000; 10 | --color-gallery-link-hover: #0e0e0d; 11 | --color-gallery-link-bg-hover: #d9d0be; 12 | --color-frame-subtitle: #727272; 13 | --cursor-stroke: none; 14 | --cursor-fill: #cc0000; 15 | --cursor-stroke-width: 1px; 16 | } 17 | 18 | .frame__header { 19 | display: flex; 20 | flex-direction: column; 21 | justify-content: center; 22 | text-transform: none; 23 | padding: 2rem 0; 24 | } 25 | 26 | .frame__header-title { 27 | font-family: moret, serif; 28 | font-weight: 700; 29 | font-size: 6rem; 30 | font-size: clamp(2rem,8vw,7rem); 31 | margin: 0; 32 | } 33 | 34 | .frame__header-subtitle { 35 | font-size: 1.75rem; 36 | margin: 0.5rem 0; 37 | color: var(--color-frame-subtitle); 38 | } 39 | 40 | .gallery { 41 | display: flex; 42 | padding-right: calc(50vw - 7.5vmax - 1rem); 43 | padding-left: calc(50vw - 7.5vmax - 1rem); 44 | } 45 | 46 | .gallery__item { 47 | margin: 0; 48 | display: grid; 49 | grid-template-areas: '... ...' 50 | 'gallery-image gallery-image' 51 | 'gallery-image gallery-image' ; 52 | grid-template-columns: 8rem 25vh; 53 | grid-template-rows: 4rem 45vh 3rem; 54 | } 55 | 56 | .gallery__item-img { 57 | grid-area: gallery-image; 58 | width: 100%; 59 | height: 100%; 60 | overflow: hidden; 61 | position: relative; 62 | transform-origin: 50% 100%; 63 | will-change: transform; 64 | cursor: pointer; 65 | z-index: 2; 66 | } 67 | 68 | .gallery__item-imginner { 69 | background-size: cover; 70 | background-position: 50% 25%; 71 | width: calc(100% + 10vw); 72 | margin-left: -5vw; 73 | height: 100%; 74 | will-change: transform; 75 | } 76 | 77 | .gallery__item-caption { 78 | grid-area: 1 / 1 / 4 / 3; 79 | display: grid; 80 | grid-template-areas: 'gallery-number gallery-number' 81 | 'gallery-link ...' 82 | 'gallery-link gallery-tags' ; 83 | grid-template-columns: 8rem auto; 84 | grid-template-rows: 4rem auto 3rem; 85 | position: relative; 86 | z-index: 1; 87 | } 88 | 89 | .gallery__item-number { 90 | grid-area: gallery-number; 91 | font-size: 10vw; 92 | justify-self: center; 93 | color: var(--color-gallery-number); 94 | cursor: pointer; 95 | color: transparent; 96 | -webkit-text-stroke: 1px #645c5b; 97 | text-stroke: 1px #645c5b; 98 | -webkit-text-fill-color: transparent; 99 | text-fill-color: transparent; 100 | } 101 | 102 | .gallery__item-title { 103 | grid-area: gallery-title; 104 | margin: 0; 105 | font-size: 4rem; 106 | font-size: clamp(2rem,5vw,4rem); 107 | color: var(--color-gallery-title); 108 | display: none; 109 | } 110 | 111 | .gallery__item-number, 112 | .gallery__item-title, 113 | .gallery__text { 114 | font-family: moret, serif; 115 | font-weight: 700; 116 | align-self: center; 117 | } 118 | 119 | .gallery__item-link { 120 | grid-area: gallery-link; 121 | align-self: end; 122 | font-size: 1.5rem; 123 | background: var(--color-gallery-link-bg); 124 | color: var(--color-gallery-link); 125 | text-decoration: underline; 126 | width: 120px; 127 | height: 120px; 128 | border-radius: 50%; 129 | position: relative; 130 | display: flex; 131 | justify-content: center; 132 | align-items: center; 133 | cursor: pointer; 134 | display: none; 135 | } 136 | 137 | .gallery__item-link:focus, 138 | .gallery__item-link:hover { 139 | background: var(--color-gallery-link-bg-hover); 140 | color: var(--color-gallery-link-hover); 141 | text-decoration: none; 142 | } 143 | 144 | .gallery__item-tags { 145 | grid-area: gallery-tags; 146 | justify-self: end; 147 | font-size: 1.5rem; 148 | display: grid; 149 | grid-auto-flow: column; 150 | grid-gap: 1rem; 151 | cursor: pointer; 152 | display: none; 153 | } 154 | 155 | .gallery__text { 156 | font-size: 20vw; 157 | line-height: 0.8; 158 | text-transform: lowercase; 159 | color: transparent; 160 | -webkit-text-stroke: 1px #645c5b; 161 | text-stroke: 1px #645c5b; 162 | -webkit-text-fill-color: transparent; 163 | text-fill-color: transparent; 164 | position: absolute; 165 | right: 0; 166 | } 167 | 168 | .gallery__text:first-child { 169 | left: -1vw; 170 | right: auto; 171 | } 172 | 173 | .gallery__text span { 174 | display: block; 175 | } 176 | 177 | @media screen and (min-width: 53em) { 178 | .frame { 179 | grid-template-areas: 'title demos demos links' 180 | 'header header header header'; 181 | 182 | } 183 | .frame__header { 184 | grid-area: header; 185 | text-align: center; 186 | height: 40vh; 187 | } 188 | .content { 189 | height: 100vh; 190 | justify-content: flex-end; 191 | } 192 | } 193 | -------------------------------------------------------------------------------- /dist/demo4.7fb5a017.css: -------------------------------------------------------------------------------- 1 | body { 2 | --color-text: #4a525e; 3 | --color-bg: #121a27; 4 | --color-link: #b2366f; 5 | --color-link-hover: #fff; 6 | --color-gallery-title: #4a525e; 7 | --color-gallery-number: #54d7e4; 8 | --color-gallery-link: #fff; 9 | --color-gallery-link-bg: #e95499; 10 | --color-gallery-link-hover: #e95499; 11 | --color-gallery-link-bg-hover: #fff; 12 | --color-gallery-text: #e95499; 13 | --cursor-stroke: none; 14 | --cursor-fill: #79e2e6; 15 | --cursor-stroke-width: 1px; 16 | } 17 | 18 | .gallery { 19 | display: flex; 20 | margin-left: 12vw; 21 | padding-right: 12vw; 22 | } 23 | 24 | .gallery__item { 25 | margin: 0 3vw; 26 | display: grid; 27 | grid-template-areas: '... ...' 28 | '... gallery-image' 29 | '... ...' ; 30 | grid-template-columns: 8rem 21vmax; 31 | grid-template-rows: 8rem 28vmax 3rem; 32 | } 33 | 34 | .gallery__item-img { 35 | grid-area: gallery-image; 36 | width: 100%; 37 | height: 100%; 38 | overflow: hidden; 39 | position: relative; 40 | transform-origin: 50% 100%; 41 | } 42 | 43 | .gallery__item-imginner { 44 | background-size: cover; 45 | background-position: 50% 0; 46 | width: 100%; 47 | height: 100%; 48 | } 49 | 50 | .gallery__item-caption { 51 | grid-area: 1 / 1 / 4 / 3; 52 | display: grid; 53 | grid-template-areas: 'gallery-number gallery-title' 54 | 'gallery-link ...' 55 | 'gallery-link gallery-tags' ; 56 | grid-template-columns: 8rem auto; 57 | grid-template-rows: 8rem auto 3rem; 58 | 59 | } 60 | 61 | .gallery__item-number { 62 | grid-area: gallery-number; 63 | font-size: 6rem; 64 | font-size: clamp(2.5rem,9vw,6.5rem); 65 | justify-self: end; 66 | padding-right: 2rem; 67 | color: var(--color-gallery-number); 68 | } 69 | 70 | .gallery__item-title { 71 | grid-area: gallery-title; 72 | margin: 0; 73 | font-size: 4rem; 74 | font-size: clamp(2rem,5vw,4rem); 75 | color: var(--color-gallery-title); 76 | } 77 | 78 | .gallery__item-number, 79 | .gallery__item-title, 80 | .gallery__text { 81 | font-family: moret, serif; 82 | font-weight: 800; 83 | font-style: italic; 84 | align-self: center; 85 | } 86 | 87 | .gallery__item-link { 88 | grid-area: gallery-link; 89 | align-self: end; 90 | font-size: 1.5rem; 91 | background: var(--color-gallery-link-bg); 92 | color: var(--color-gallery-link); 93 | text-decoration: underline; 94 | width: 120px; 95 | height: 120px; 96 | border-radius: 50%; 97 | position: relative; 98 | display: flex; 99 | justify-content: center; 100 | align-items: center; 101 | cursor: pointer; 102 | } 103 | 104 | .gallery__item-link:focus, 105 | .gallery__item-link:hover { 106 | background: var(--color-gallery-link-bg-hover); 107 | color: var(--color-gallery-link-hover); 108 | text-decoration: none; 109 | } 110 | 111 | .gallery__item-tags { 112 | grid-area: gallery-tags; 113 | justify-self: end; 114 | font-size: 1.5rem; 115 | display: grid; 116 | grid-auto-flow: column; 117 | grid-gap: 1rem; 118 | cursor: pointer; 119 | } 120 | 121 | .gallery__text { 122 | font-size: 20vw; 123 | line-height: 0.8; 124 | margin: 0 10vw 0 14vw; 125 | text-transform: lowercase; 126 | color: transparent; 127 | -webkit-text-stroke: 1px var(--color-gallery-text); 128 | text-stroke: 1px var(--color-gallery-text); 129 | -webkit-text-fill-color: transparent; 130 | text-fill-color: transparent; 131 | } 132 | 133 | .gallery__text-inner { 134 | display: block; 135 | } -------------------------------------------------------------------------------- /dist/demo5.5199082f.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | --color-text: #fff; 4 | --color-bg: #131212; 5 | --color-link: #d75828; 6 | --color-link-hover: #fff; 7 | --color-gallery-title: #463832; 8 | --color-gallery-number: #ffffff; 9 | --color-gallery-link: #fff; 10 | --color-gallery-link-bg: #d75828; 11 | --color-gallery-link-hover: #fff; 12 | --color-gallery-link-bg-hover: #d4b77d; 13 | color: var(--color-text); 14 | background-color: var(--color-bg); 15 | --cursor-stroke: none; 16 | --cursor-fill: #ffffff; 17 | --cursor-stroke-width: 1px; 18 | } 19 | 20 | .gallery { 21 | display: flex; 22 | margin-left: 12vw; 23 | padding-right: 12vw; 24 | } 25 | 26 | .gallery__item { 27 | margin: 0 3vw; 28 | display: grid; 29 | grid-template-areas: '... ...' 30 | '... gallery-image' 31 | '... ...' ; 32 | grid-template-columns: 8rem 21vmax; 33 | grid-template-rows: 8rem 28vmax 3rem; 34 | will-change: transform; 35 | } 36 | 37 | .gallery__item:nth-child(even) { 38 | padding-top: 10vh; 39 | } 40 | 41 | .gallery__item-img { 42 | grid-area: gallery-image; 43 | width: 100%; 44 | height: 100%; 45 | overflow: hidden; 46 | position: relative; 47 | will-change: transform; 48 | } 49 | 50 | .gallery__item-imginner { 51 | background-size: cover; 52 | background-position: 50% 0; 53 | width: 100%; 54 | height: calc(100% + 14vh); 55 | margin-top: -7vh; 56 | will-change: transform; 57 | } 58 | 59 | .gallery__item-caption { 60 | grid-area: 1 / 1 / 4 / 3; 61 | display: grid; 62 | grid-template-areas: 'gallery-number gallery-title' 63 | 'gallery-link ...' 64 | 'gallery-link gallery-tags' ; 65 | grid-template-columns: 8rem auto; 66 | grid-template-rows: 8rem auto 3rem; 67 | 68 | } 69 | 70 | .gallery__item-number { 71 | grid-area: gallery-number; 72 | font-size: 6rem; 73 | font-size: clamp(2.5rem,9vw,6.5rem); 74 | justify-self: end; 75 | padding-right: 2rem; 76 | color: var(--color-gallery-number); 77 | } 78 | 79 | .gallery__item-title { 80 | grid-area: gallery-title; 81 | margin: 0; 82 | font-size: 4rem; 83 | font-size: clamp(2rem,5vw,4rem); 84 | color: var(--color-gallery-title); 85 | } 86 | 87 | .gallery__item-number, 88 | .gallery__item-title, 89 | .gallery__text { 90 | font-family: moret, serif; 91 | font-weight: 800; 92 | font-style: italic; 93 | align-self: center; 94 | } 95 | 96 | .gallery__item-link { 97 | grid-area: gallery-link; 98 | align-self: end; 99 | font-size: 1.5rem; 100 | background: var(--color-gallery-link-bg); 101 | color: var(--color-gallery-link); 102 | text-decoration: underline; 103 | width: 120px; 104 | height: 120px; 105 | border-radius: 50%; 106 | position: relative; 107 | display: flex; 108 | justify-content: center; 109 | align-items: center; 110 | cursor: pointer; 111 | } 112 | 113 | .gallery__item-link:focus, 114 | .gallery__item-link:hover { 115 | background: var(--color-gallery-link-bg-hover); 116 | color: var(--color-gallery-link-hover); 117 | text-decoration: none; 118 | } 119 | 120 | .gallery__item-tags { 121 | grid-area: gallery-tags; 122 | justify-self: end; 123 | font-size: 1.5rem; 124 | display: grid; 125 | grid-auto-flow: column; 126 | grid-gap: 1rem; 127 | cursor: pointer; 128 | } 129 | 130 | .gallery__text { 131 | font-size: 20vw; 132 | line-height: 0.8; 133 | margin: 0 10vw 0 14vw; 134 | text-transform: lowercase; 135 | color: var(--color-gallery-title); 136 | color: transparent; 137 | -webkit-text-stroke: 1px #463832; 138 | text-stroke: 1px #463832; 139 | -webkit-text-fill-color: transparent; 140 | text-fill-color: transparent; 141 | } 142 | 143 | .gallery__text-inner { 144 | display: block; 145 | } -------------------------------------------------------------------------------- /dist/favicon.26242483.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/dist/favicon.26242483.ico -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Horizontal Smooth Scroll Layout | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 24 | 25 | 26 |
27 |

Horizontal Smooth Scroll Layout
using Locomotive Scroll

28 |
29 | Demo__01 30 | Demo__02 31 | Demo__03 32 | Demo__04 33 | Demo__05 34 |
35 |
36 | Previous demo 37 | Article 38 | GitHub 39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |

Funambulist

48 | 01 49 |

50 | #house 51 | #green 52 | #chair 53 |

54 | explore 55 |
56 |
57 |
58 |
59 |
60 |

Omophagy

61 | 02 62 |

63 | #love 64 | #hug 65 | #people 66 |

67 | explore 68 |
69 |
70 |
71 |
72 |
73 |

Conniption

74 | 03 75 |

76 | #hike 77 | #nature 78 | #rain 79 |

80 | explore 81 |
82 |
83 |
84 |
85 |
86 |

Xenology

87 | 04 88 |

89 | #free 90 | #wood 91 | #fire 92 |

93 | explore 94 |
95 |
96 |
PollexMallam
97 |
98 |
99 |
100 |

Lycanthropy

101 | 05 102 |

103 | #cloud 104 | #lake 105 | #frog 106 |

107 | explore 108 |
109 |
110 |
111 |
112 |
113 |

Mudlark

114 | 06 115 |

116 | #tent 117 | #flower 118 | #love 119 |

120 | explore 121 |
122 |
123 |
124 |
125 |
126 |

Illywhacker

127 | 07 128 |

129 | #water 130 | #bottle 131 | #hand 132 |

133 | explore 134 |
135 |
136 |
137 |
138 |
139 |

Disenthral

140 | 08 141 |

142 | #night 143 | #stars 144 | #moon 145 |

146 | explore 147 |
148 |
149 |
CacoeDupis
150 |
151 |
152 |
153 |

Abaya

154 | 09 155 |

156 | #sun 157 | #light 158 | #air 159 |

160 | explore 161 |
162 |
163 |
164 |
165 |
166 |

Hallux

167 | 10 168 |

169 | #vital 170 | #fog 171 | #close 172 |

173 | explore 174 |
175 |
176 |
177 |
178 |
179 |

Lablab

180 | 11 181 |

182 | #cover 183 | #bed 184 | #window 185 |

186 | explore 187 |
188 |
189 |
190 |
191 |
192 |

Momisom

193 | 12 194 |

195 | #sad 196 | #mouth 197 | #tear 198 |

199 | explore 200 |
201 |
202 |
ChadChiliad
203 |
204 |
205 |
206 | 207 | 208 | 209 | 210 | 211 | 212 | -------------------------------------------------------------------------------- /dist/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Horizontal Smooth Scroll Layout | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 24 | 25 | 26 |
27 |

Horizontal Smooth Scroll Layout
using Locomotive Scroll

28 |
29 | Demo__01 30 | Demo__02 31 | Demo__03 32 | Demo__04 33 | Demo__05 34 |
35 |
36 | Previous demo 37 | Article 38 | GitHub 39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |

Moonraker

49 | 01 50 |

51 | #house 52 | #green 53 | #chair 54 |

55 | explore 56 |
57 |
58 |
59 |
60 |
61 |

Nacarat

62 | 02 63 |

64 | #love 65 | #hug 66 | #people 67 |

68 | explore 69 |
70 |
71 |
72 |
73 |
74 |

Selkie

75 | 03 76 |

77 | #hike 78 | #nature 79 | #rain 80 |

81 | explore 82 |
83 |
84 |
85 |
86 |
87 |

Thalassic

88 | 04 89 |

90 | #free 91 | #wood 92 | #fire 93 |

94 | explore 95 |
96 |
97 |
VerjuiceZyrian
98 |
99 |
100 |
101 |

Uroboros

102 | 05 103 |

104 | #cloud 105 | #lake 106 | #frog 107 |

108 | explore 109 |
110 |
111 |
112 |
113 |
114 |

Waitron

115 | 06 116 |

117 | #tent 118 | #flower 119 | #love 120 |

121 | explore 122 |
123 |
124 |
125 |
126 |
127 |

Soucouyant

128 | 07 129 |

130 | #water 131 | #bottle 132 | #hand 133 |

134 | explore 135 |
136 |
137 |
138 |
139 |
140 |

Periapt

141 | 08 142 |

143 | #night 144 | #stars 145 | #moon 146 |

147 | explore 148 |
149 |
150 |
TiffinSkanky
151 |
152 |
153 |
154 |

Cyanic

155 | 09 156 |

157 | #sun 158 | #light 159 | #air 160 |

161 | explore 162 |
163 |
164 |
165 |
166 |
167 |

Martlet

168 | 10 169 |

170 | #vital 171 | #fog 172 | #close 173 |

174 | explore 175 |
176 |
177 |
178 |
179 |
180 |

Eurhythmic

181 | 11 182 |

183 | #cover 184 | #bed 185 | #window 186 |

187 | explore 188 |
189 |
190 |
191 |
192 |
193 |

Dariole

194 | 12 195 |

196 | #sad 197 | #mouth 198 | #tear 199 |

200 | explore 201 |
202 |
203 |
DeasilZetetic
204 |
205 |
206 |
207 |
208 | 209 | 210 | 211 | 212 | 213 | 214 | -------------------------------------------------------------------------------- /dist/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Horizontal Smooth Scroll Layout | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 24 | 25 | 26 |
27 |

Horizontal Smooth Scroll Layout
using Locomotive Scroll

28 |
29 | Demo__01 30 | Demo__02 31 | Demo__03 32 | Demo__04 33 | Demo__05 34 |
35 |
36 | Previous demo 37 | Article 38 | GitHub 39 |
40 |
41 |

Mustache Cómplice

42 |

Fashionable garments since 1986

43 |
44 |
45 |
46 |
47 |
48 |
49 |
Mustache
50 |
51 |
52 |
53 |

Moonraker

54 | 01 55 |

56 | #house 57 | #green 58 | #chair 59 |

60 | explore 61 |
62 |
63 |
64 |
65 |
66 |

Nacarat

67 | 02 68 |

69 | #love 70 | #hug 71 | #people 72 |

73 | explore 74 |
75 |
76 |
77 |
78 |
79 |

Selkie

80 | 03 81 |

82 | #hike 83 | #nature 84 | #rain 85 |

86 | explore 87 |
88 |
89 |
90 |
91 |
92 |

Thalassic

93 | 04 94 |

95 | #free 96 | #wood 97 | #fire 98 |

99 | explore 100 |
101 |
102 |
103 |
104 |
105 |

Uroboros

106 | 05 107 |

108 | #cloud 109 | #lake 110 | #frog 111 |

112 | explore 113 |
114 |
115 |
116 |
117 |
118 |

Waitron

119 | 06 120 |

121 | #tent 122 | #flower 123 | #love 124 |

125 | explore 126 |
127 |
128 |
129 |
130 |
131 |

Soucouyant

132 | 07 133 |

134 | #water 135 | #bottle 136 | #hand 137 |

138 | explore 139 |
140 |
141 |
142 |
143 |
144 |

Periapt

145 | 08 146 |

147 | #night 148 | #stars 149 | #moon 150 |

151 | explore 152 |
153 |
154 |
155 |
156 |
157 |

Cyanic

158 | 09 159 |

160 | #sun 161 | #light 162 | #air 163 |

164 | explore 165 |
166 |
167 |
168 |
169 |
170 |

Martlet

171 | 10 172 |

173 | #vital 174 | #fog 175 | #close 176 |

177 | explore 178 |
179 |
180 |
181 |
182 |
183 |

Eurhythmic

184 | 11 185 |

186 | #cover 187 | #bed 188 | #window 189 |

190 | explore 191 |
192 |
193 |
194 |
195 |
196 |

Dariole

197 | 12 198 |

199 | #sad 200 | #mouth 201 | #tear 202 |

203 | explore 204 |
205 |
206 |
Cómplice
207 |
208 |
209 |
210 |
211 | 212 | 213 | 214 | 215 | 216 | 217 | -------------------------------------------------------------------------------- /dist/index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Horizontal Smooth Scroll Layout | Demo 4 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 24 | 25 | 26 |
27 |

Horizontal Smooth Scroll Layout
using Locomotive Scroll

28 |
29 | Demo__01 30 | Demo__02 31 | Demo__03 32 | Demo__04 33 | Demo__05 34 |
35 |
36 | Previous demo 37 | Article 38 | GitHub 39 |
40 |
41 |
42 |
43 | 203 |
204 |
205 | 206 | 207 | 208 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /dist/index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Horizontal Smooth Scroll Layout | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 24 | 25 | 26 |
27 |

Horizontal Smooth Scroll Layout
using Locomotive Scroll

28 |
29 | Demo__01 30 | Demo__02 31 | Demo__03 32 | Demo__04 33 | Demo__05 34 |
35 |
36 | Previous demo 37 | Article 38 | GitHub 39 |
40 |
41 |
42 |
43 |
44 |
ArielCroze
45 |
46 |
47 |
48 |

Funambulist

49 | 01 50 |

51 | #house 52 | #green 53 | #chair 54 |

55 | explore 56 |
57 |
58 |
59 |
60 |
61 |

Omophagy

62 | 02 63 |

64 | #love 65 | #hug 66 | #people 67 |

68 | explore 69 |
70 |
71 |
72 |
73 |
74 |

Conniption

75 | 03 76 |

77 | #hike 78 | #nature 79 | #rain 80 |

81 | explore 82 |
83 |
84 |
85 |
86 |
87 |

Xenology

88 | 04 89 |

90 | #free 91 | #wood 92 | #fire 93 |

94 | explore 95 |
96 |
97 |
98 |
99 |
100 |

Lycanthropy

101 | 05 102 |

103 | #cloud 104 | #lake 105 | #frog 106 |

107 | explore 108 |
109 |
110 |
111 |
112 |
113 |

Mudlark

114 | 06 115 |

116 | #tent 117 | #flower 118 | #love 119 |

120 | explore 121 |
122 |
123 |
124 |
125 |
126 |

Illywhacker

127 | 07 128 |

129 | #water 130 | #bottle 131 | #hand 132 |

133 | explore 134 |
135 |
136 |
137 |
138 |
139 |

Disenthral

140 | 08 141 |

142 | #night 143 | #stars 144 | #moon 145 |

146 | explore 147 |
148 |
149 |
150 |
151 |
152 |

Abaya

153 | 09 154 |

155 | #sun 156 | #light 157 | #air 158 |

159 | explore 160 |
161 |
162 |
163 |
164 |
165 |

Hallux

166 | 10 167 |

168 | #vital 169 | #fog 170 | #close 171 |

172 | explore 173 |
174 |
175 |
176 |
177 |
178 |

Lablab

179 | 11 180 |

181 | #cover 182 | #bed 183 | #window 184 |

185 | explore 186 |
187 |
188 |
189 |
190 |
191 |

Momisom

192 | 12 193 |

194 | #sad 195 | #mouth 196 | #tear 197 |

198 | explore 199 |
200 |
201 |
DariaGaita
202 |
203 |
204 |
205 | 206 | 207 | 208 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "HorizontalSmoothScrollLayout", 3 | "version": "1.0.0", 4 | "description": "*How to use this template:*", 5 | "main": "src/js/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/%5BNAME%5D.git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "http://[HOMEPAGE]", 20 | "bugs": { 21 | "url": "https://github.com/codrops/[NAME]/issues" 22 | }, 23 | "dependencies": { 24 | "gsap": "^3.5.1", 25 | "imagesloaded": "^4.1.4", 26 | "locomotive-scroll": "^4.0.6", 27 | "parcel-bundler": "^1.12.4" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 12px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #000100; 14 | --color-bg: #e2d9c7; 15 | --color-link: #395bb5; 16 | --color-link-hover: #000100; 17 | --color-gallery-title: #2c2724; 18 | --color-gallery-number: #d9d0be; 19 | --color-gallery-link: #fff; 20 | --color-gallery-link-bg: #2858d7; 21 | --color-gallery-link-hover: #fff; 22 | --color-gallery-link-bg-hover: #d4b77d; 23 | color: var(--color-text); 24 | background-color: var(--color-bg); 25 | --cursor-stroke: none; 26 | --cursor-fill: #c5681c; 27 | --cursor-stroke-width: 1px; 28 | font-family: halyard-display, sans-serif; 29 | font-weight: 300; 30 | -webkit-font-smoothing: antialiased; 31 | -moz-osx-font-smoothing: grayscale; 32 | } 33 | 34 | /* Page Loader */ 35 | .js .loading::before, 36 | .js .loading::after { 37 | content: ''; 38 | position: fixed; 39 | z-index: 1000; 40 | } 41 | 42 | .js .loading::before { 43 | top: 0; 44 | left: 0; 45 | width: 100%; 46 | height: 100%; 47 | background: var(--color-bg); 48 | } 49 | 50 | .js .loading::after { 51 | top: 50%; 52 | left: 50%; 53 | width: 60px; 54 | height: 60px; 55 | margin: -30px 0 0 -30px; 56 | border-radius: 50%; 57 | opacity: 0.4; 58 | background: var(--color-link); 59 | animation: loaderAnim 0.7s linear infinite alternate forwards; 60 | 61 | } 62 | 63 | @keyframes loaderAnim { 64 | to { 65 | opacity: 1; 66 | transform: scale3d(0.5,0.5,1); 67 | } 68 | } 69 | 70 | a { 71 | text-decoration: none; 72 | color: var(--color-link); 73 | outline: none; 74 | } 75 | 76 | a:hover, 77 | a:focus { 78 | color: var(--color-link-hover); 79 | outline: none; 80 | } 81 | 82 | .frame { 83 | padding: 3rem 5vw; 84 | text-align: center; 85 | position: relative; 86 | z-index: 1000; 87 | text-transform: uppercase; 88 | } 89 | 90 | .frame__title { 91 | font-size: 1rem; 92 | margin: 0 0 1rem; 93 | font-weight: 300; 94 | } 95 | 96 | .frame__links { 97 | display: inline; 98 | } 99 | 100 | .frame__links a:not(:last-child) { 101 | margin-right: 1rem; 102 | } 103 | 104 | .frame__demo { 105 | margin: 0 1rem; 106 | } 107 | 108 | .frame__demo--current, 109 | .frame__demo--current:hover { 110 | color: var(--color-text); 111 | cursor: default; 112 | } 113 | 114 | .content { 115 | display: flex; 116 | flex-direction: column; 117 | height: calc(100vh - 13rem); 118 | position: relative; 119 | justify-content: flex-start; 120 | } 121 | 122 | .cursor { 123 | display: none; 124 | } 125 | 126 | @media screen and (min-width: 53em) { 127 | .frame { 128 | position: fixed; 129 | text-align: left; 130 | z-index: 100; 131 | top: 0; 132 | left: 0; 133 | display: grid; 134 | align-content: space-between; 135 | width: 100%; 136 | max-width: none; 137 | padding: 1.75rem; 138 | pointer-events: none; 139 | grid-template-columns: auto 1fr 1fr auto; 140 | grid-template-rows: auto; 141 | grid-template-areas: 'title demos demos links'; 142 | } 143 | .frame__title { 144 | margin: 0 4rem 0 0; 145 | grid-area: title; 146 | } 147 | .frame__info { 148 | grid-area: info; 149 | } 150 | .frame__demos { 151 | grid-area: demos; 152 | } 153 | .frame__links { 154 | grid-area: links; 155 | padding: 0; 156 | justify-self: end; 157 | } 158 | .frame a { 159 | pointer-events: auto; 160 | } 161 | .content { 162 | height: 100vh; 163 | justify-content: center; 164 | } 165 | } 166 | 167 | @media (any-pointer:fine) { 168 | .cursor { 169 | position: fixed; 170 | top: 0; 171 | left: 0; 172 | display: block; 173 | pointer-events: none; 174 | } 175 | 176 | .cursor__inner { 177 | fill: var(--cursor-fill); 178 | stroke: var(--cursor-stroke); 179 | stroke-width: var(--cursor-stroke-width); 180 | opacity: 0.7; 181 | } 182 | 183 | .no-js .cursor { 184 | display: none; 185 | } 186 | 187 | } 188 | 189 | /*! locomotive-scroll v4.0.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 190 | html.has-scroll-smooth { 191 | overflow: hidden; } 192 | 193 | html.has-scroll-dragging { 194 | -webkit-user-select: none; 195 | -moz-user-select: none; 196 | -ms-user-select: none; 197 | user-select: none; } 198 | 199 | .has-scroll-smooth body { 200 | overflow: hidden; } 201 | 202 | .has-scroll-smooth [data-scroll-container] { 203 | min-height: 100vh; } 204 | 205 | [data-scroll-direction="horizontal"] [data-scroll-container] { 206 | white-space: nowrap; 207 | height: 100vh; 208 | display: inline-block; 209 | white-space: nowrap; } 210 | 211 | [data-scroll-direction="horizontal"] [data-scroll-section] { 212 | display: inline-block; 213 | vertical-align: top; 214 | white-space: nowrap; 215 | height: 100%; } 216 | 217 | .c-scrollbar { 218 | position: absolute; 219 | right: 0; 220 | top: 0; 221 | width: 11px; 222 | height: 100%; 223 | transform-origin: center right; 224 | transition: transform 0.3s, opacity 0.3s; 225 | opacity: 0; } 226 | .c-scrollbar:hover { 227 | transform: scaleX(1.45); } 228 | .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { 229 | opacity: 1; } 230 | [data-scroll-direction="horizontal"] .c-scrollbar { 231 | width: 100%; 232 | height: 10px; 233 | top: auto; 234 | bottom: 0; 235 | transform: scaleY(1); } 236 | [data-scroll-direction="horizontal"] .c-scrollbar:hover { 237 | transform: scaleY(1.3); } 238 | 239 | .c-scrollbar_thumb { 240 | position: absolute; 241 | top: 0; 242 | right: 0; 243 | background-color: black; 244 | opacity: 0.5; 245 | width: 7px; 246 | border-radius: 10px; 247 | margin: 2px; 248 | cursor: -webkit-grab; 249 | cursor: grab; } 250 | .has-scroll-dragging .c-scrollbar_thumb { 251 | cursor: -webkit-grabbing; 252 | cursor: grabbing; } 253 | [data-scroll-direction="horizontal"] .c-scrollbar_thumb { 254 | right: auto; 255 | bottom: 0; } -------------------------------------------------------------------------------- /src/css/demo1.css: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: flex; 3 | margin-left: 12vw; 4 | padding-right: 12vw; 5 | } 6 | 7 | .gallery__item { 8 | margin: 0 3vw; 9 | display: grid; 10 | grid-template-areas: '... ...' 11 | '... gallery-image' 12 | '... ...' ; 13 | grid-template-columns: 8rem 21vmax; 14 | grid-template-rows: 8rem 28vmax 3rem; 15 | } 16 | 17 | .gallery__item:nth-child(even) { 18 | padding-top: 10vh; 19 | } 20 | 21 | .gallery__item-img { 22 | grid-area: gallery-image; 23 | width: 100%; 24 | height: 100%; 25 | overflow: hidden; 26 | position: relative; 27 | transform-origin: 50% 100%; 28 | } 29 | 30 | .gallery__item-imginner { 31 | background-size: cover; 32 | background-position: 50% 0; 33 | width: 100%; 34 | height: 100%; 35 | } 36 | 37 | .gallery__item-caption { 38 | grid-area: 1 / 1 / 4 / 3; 39 | display: grid; 40 | grid-template-areas: 'gallery-number gallery-title' 41 | 'gallery-link ...' 42 | 'gallery-link gallery-tags' ; 43 | grid-template-columns: 8rem auto; 44 | grid-template-rows: 8rem auto 3rem; 45 | 46 | } 47 | 48 | .gallery__item-number { 49 | grid-area: gallery-number; 50 | font-size: 6rem; 51 | font-size: clamp(2.5rem,9vw,6.5rem); 52 | justify-self: end; 53 | padding-right: 2rem; 54 | color: var(--color-gallery-number); 55 | } 56 | 57 | .gallery__item-title { 58 | grid-area: gallery-title; 59 | margin: 0; 60 | font-size: 4rem; 61 | font-size: clamp(2rem,5vw,4rem); 62 | color: var(--color-gallery-title); 63 | } 64 | 65 | .gallery__item-number, 66 | .gallery__item-title, 67 | .gallery__text { 68 | font-family: moret, serif; 69 | font-weight: 800; 70 | font-style: italic; 71 | align-self: center; 72 | } 73 | 74 | .gallery__item-link { 75 | grid-area: gallery-link; 76 | align-self: end; 77 | font-size: 1.5rem; 78 | background: var(--color-gallery-link-bg); 79 | color: var(--color-gallery-link); 80 | text-decoration: underline; 81 | width: 120px; 82 | height: 120px; 83 | border-radius: 50%; 84 | position: relative; 85 | display: flex; 86 | justify-content: center; 87 | align-items: center; 88 | cursor: pointer; 89 | } 90 | 91 | .gallery__item-link:focus, 92 | .gallery__item-link:hover { 93 | background: var(--color-gallery-link-bg-hover); 94 | color: var(--color-gallery-link-hover); 95 | text-decoration: none; 96 | } 97 | 98 | .gallery__item-tags { 99 | grid-area: gallery-tags; 100 | justify-self: end; 101 | font-size: 1.5rem; 102 | display: grid; 103 | grid-auto-flow: column; 104 | grid-gap: 1rem; 105 | cursor: pointer; 106 | } 107 | 108 | .gallery__text { 109 | font-size: 20vw; 110 | line-height: 0.8; 111 | margin: 0 10vw 0 14vw; 112 | text-transform: lowercase; 113 | color: var(--color-gallery-title); 114 | color: transparent; 115 | -webkit-text-stroke: 1px #978c77; 116 | text-stroke: 1px #978c77; 117 | -webkit-text-fill-color: transparent; 118 | text-fill-color: transparent; 119 | } 120 | 121 | .gallery__text-inner { 122 | display: block; 123 | } -------------------------------------------------------------------------------- /src/css/demo2.css: -------------------------------------------------------------------------------- 1 | body { 2 | --color-text: #66665d; 3 | --color-bg: #0e0e0d; 4 | --color-link: #cc0000; 5 | --color-link-hover: #fff; 6 | --color-gallery-title: #d9d0be; 7 | --color-gallery-number: #181817; 8 | --color-gallery-link: #fff; 9 | --color-gallery-link-bg: #cc0000; 10 | --color-gallery-link-hover: #0e0e0d; 11 | --color-gallery-link-bg-hover: #d9d0be; 12 | --cursor-stroke: none; 13 | --cursor-fill: #cc0000; 14 | --cursor-stroke-width: 1px; 15 | } 16 | 17 | .rotate { 18 | transform: rotate(-4deg); 19 | } 20 | 21 | .gallery { 22 | display: flex; 23 | padding-right: 12vw; 24 | margin-left: 5vw; 25 | } 26 | 27 | .gallery__item { 28 | margin: 0 3vw; 29 | display: grid; 30 | grid-template-areas: '... ...' 31 | '... gallery-image' 32 | '... ...' ; 33 | grid-template-columns: 8rem 21vmax; 34 | grid-template-rows: 8rem 28vmax 3rem; 35 | } 36 | 37 | .gallery__item-img { 38 | grid-area: gallery-image; 39 | width: 100%; 40 | height: 100%; 41 | overflow: hidden; 42 | position: relative; 43 | will-change: transform; 44 | } 45 | 46 | .gallery__item-imginner { 47 | background-size: cover; 48 | background-position: 50% 0; 49 | width: calc(100% + 10vw); 50 | margin-left: -5vw; 51 | height: 100%; 52 | will-change: transform; 53 | } 54 | 55 | .gallery__item-caption { 56 | grid-area: 1 / 1 / 4 / 3; 57 | display: grid; 58 | grid-template-areas: 'gallery-number gallery-title' 59 | 'gallery-link ...' 60 | 'gallery-link gallery-tags' ; 61 | grid-template-columns: 8rem auto; 62 | grid-template-rows: 8rem auto 3rem; 63 | 64 | } 65 | 66 | .gallery__item-number { 67 | grid-area: gallery-number; 68 | font-size: 6rem; 69 | font-size: clamp(2.5rem,9vw,6.5rem); 70 | justify-self: end; 71 | padding-right: 2rem; 72 | color: var(--color-gallery-number); 73 | } 74 | 75 | .gallery__item-title { 76 | grid-area: gallery-title; 77 | margin: 0; 78 | font-size: 4rem; 79 | font-size: clamp(2rem,5vw,4rem); 80 | color: var(--color-gallery-title); 81 | } 82 | 83 | .gallery__item-number, 84 | .gallery__item-title, 85 | .gallery__text { 86 | font-family: moret, serif; 87 | font-weight: 800; 88 | font-style: italic; 89 | align-self: center; 90 | } 91 | 92 | .gallery__item-link { 93 | grid-area: gallery-link; 94 | align-self: end; 95 | font-size: 1.5rem; 96 | background: var(--color-gallery-link-bg); 97 | color: var(--color-gallery-link); 98 | text-decoration: underline; 99 | width: 120px; 100 | height: 120px; 101 | border-radius: 50%; 102 | position: relative; 103 | display: flex; 104 | justify-content: center; 105 | align-items: center; 106 | cursor: pointer; 107 | } 108 | 109 | .gallery__item-link:focus, 110 | .gallery__item-link:hover { 111 | background: var(--color-gallery-link-bg-hover); 112 | color: var(--color-gallery-link-hover); 113 | text-decoration: none; 114 | } 115 | 116 | .gallery__item-tags { 117 | grid-area: gallery-tags; 118 | justify-self: end; 119 | font-size: 1.5rem; 120 | display: grid; 121 | grid-auto-flow: column; 122 | grid-gap: 1rem; 123 | cursor: pointer; 124 | } 125 | 126 | .gallery__text { 127 | font-size: 20vw; 128 | line-height: 0.8; 129 | margin: 0 12vw; 130 | text-transform: lowercase; 131 | color: transparent; 132 | -webkit-text-stroke: 1px #645c5b; 133 | text-stroke: 1px #645c5b; 134 | -webkit-text-fill-color: transparent; 135 | text-fill-color: transparent; 136 | } 137 | 138 | .gallery__text-inner { 139 | display: block; 140 | } 141 | 142 | @media screen and (min-width: 53em) { 143 | .frame { 144 | grid-template-areas: 'title demos demos links'; 145 | } 146 | .frame__info { 147 | justify-self: end; 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /src/css/demo3.css: -------------------------------------------------------------------------------- 1 | body { 2 | --color-text: #000; 3 | --color-bg: #dedede; 4 | --color-link: #828da1; 5 | --color-link-hover: #cc0000; 6 | --color-gallery-title: #d9d0be; 7 | --color-gallery-number: #000; 8 | --color-gallery-link: #fff; 9 | --color-gallery-link-bg: #cc0000; 10 | --color-gallery-link-hover: #0e0e0d; 11 | --color-gallery-link-bg-hover: #d9d0be; 12 | --color-frame-subtitle: #727272; 13 | --cursor-stroke: none; 14 | --cursor-fill: #cc0000; 15 | --cursor-stroke-width: 1px; 16 | } 17 | 18 | .frame__header { 19 | display: flex; 20 | flex-direction: column; 21 | justify-content: center; 22 | text-transform: none; 23 | padding: 2rem 0; 24 | } 25 | 26 | .frame__header-title { 27 | font-family: moret, serif; 28 | font-weight: 700; 29 | font-size: 6rem; 30 | font-size: clamp(2rem,8vw,7rem); 31 | margin: 0; 32 | } 33 | 34 | .frame__header-subtitle { 35 | font-size: 1.75rem; 36 | margin: 0.5rem 0; 37 | color: var(--color-frame-subtitle); 38 | } 39 | 40 | .gallery { 41 | display: flex; 42 | padding-right: calc(50vw - 7.5vmax - 1rem); 43 | padding-left: calc(50vw - 7.5vmax - 1rem); 44 | } 45 | 46 | .gallery__item { 47 | margin: 0; 48 | display: grid; 49 | grid-template-areas: '... ...' 50 | 'gallery-image gallery-image' 51 | 'gallery-image gallery-image' ; 52 | grid-template-columns: 8rem 25vh; 53 | grid-template-rows: 4rem 45vh 3rem; 54 | } 55 | 56 | .gallery__item-img { 57 | grid-area: gallery-image; 58 | width: 100%; 59 | height: 100%; 60 | overflow: hidden; 61 | position: relative; 62 | transform-origin: 50% 100%; 63 | will-change: transform; 64 | cursor: pointer; 65 | z-index: 2; 66 | } 67 | 68 | .gallery__item-imginner { 69 | background-size: cover; 70 | background-position: 50% 25%; 71 | width: calc(100% + 10vw); 72 | margin-left: -5vw; 73 | height: 100%; 74 | will-change: transform; 75 | } 76 | 77 | .gallery__item-caption { 78 | grid-area: 1 / 1 / 4 / 3; 79 | display: grid; 80 | grid-template-areas: 'gallery-number gallery-number' 81 | 'gallery-link ...' 82 | 'gallery-link gallery-tags' ; 83 | grid-template-columns: 8rem auto; 84 | grid-template-rows: 4rem auto 3rem; 85 | position: relative; 86 | z-index: 1; 87 | } 88 | 89 | .gallery__item-number { 90 | grid-area: gallery-number; 91 | font-size: 10vw; 92 | justify-self: center; 93 | color: var(--color-gallery-number); 94 | cursor: pointer; 95 | color: transparent; 96 | -webkit-text-stroke: 1px #645c5b; 97 | text-stroke: 1px #645c5b; 98 | -webkit-text-fill-color: transparent; 99 | text-fill-color: transparent; 100 | } 101 | 102 | .gallery__item-title { 103 | grid-area: gallery-title; 104 | margin: 0; 105 | font-size: 4rem; 106 | font-size: clamp(2rem,5vw,4rem); 107 | color: var(--color-gallery-title); 108 | display: none; 109 | } 110 | 111 | .gallery__item-number, 112 | .gallery__item-title, 113 | .gallery__text { 114 | font-family: moret, serif; 115 | font-weight: 700; 116 | align-self: center; 117 | } 118 | 119 | .gallery__item-link { 120 | grid-area: gallery-link; 121 | align-self: end; 122 | font-size: 1.5rem; 123 | background: var(--color-gallery-link-bg); 124 | color: var(--color-gallery-link); 125 | text-decoration: underline; 126 | width: 120px; 127 | height: 120px; 128 | border-radius: 50%; 129 | position: relative; 130 | display: flex; 131 | justify-content: center; 132 | align-items: center; 133 | cursor: pointer; 134 | display: none; 135 | } 136 | 137 | .gallery__item-link:focus, 138 | .gallery__item-link:hover { 139 | background: var(--color-gallery-link-bg-hover); 140 | color: var(--color-gallery-link-hover); 141 | text-decoration: none; 142 | } 143 | 144 | .gallery__item-tags { 145 | grid-area: gallery-tags; 146 | justify-self: end; 147 | font-size: 1.5rem; 148 | display: grid; 149 | grid-auto-flow: column; 150 | grid-gap: 1rem; 151 | cursor: pointer; 152 | display: none; 153 | } 154 | 155 | .gallery__text { 156 | font-size: 20vw; 157 | line-height: 0.8; 158 | text-transform: lowercase; 159 | color: transparent; 160 | -webkit-text-stroke: 1px #645c5b; 161 | text-stroke: 1px #645c5b; 162 | -webkit-text-fill-color: transparent; 163 | text-fill-color: transparent; 164 | position: absolute; 165 | right: 0; 166 | } 167 | 168 | .gallery__text:first-child { 169 | left: -1vw; 170 | right: auto; 171 | } 172 | 173 | .gallery__text span { 174 | display: block; 175 | } 176 | 177 | @media screen and (min-width: 53em) { 178 | .frame { 179 | grid-template-areas: 'title demos demos links' 180 | 'header header header header'; 181 | 182 | } 183 | .frame__header { 184 | grid-area: header; 185 | text-align: center; 186 | height: 40vh; 187 | } 188 | .content { 189 | height: 100vh; 190 | justify-content: flex-end; 191 | } 192 | } 193 | -------------------------------------------------------------------------------- /src/css/demo4.css: -------------------------------------------------------------------------------- 1 | body { 2 | --color-text: #4a525e; 3 | --color-bg: #121a27; 4 | --color-link: #b2366f; 5 | --color-link-hover: #fff; 6 | --color-gallery-title: #4a525e; 7 | --color-gallery-number: #54d7e4; 8 | --color-gallery-link: #fff; 9 | --color-gallery-link-bg: #e95499; 10 | --color-gallery-link-hover: #e95499; 11 | --color-gallery-link-bg-hover: #fff; 12 | --color-gallery-text: #e95499; 13 | --cursor-stroke: none; 14 | --cursor-fill: #79e2e6; 15 | --cursor-stroke-width: 1px; 16 | } 17 | 18 | .gallery { 19 | display: flex; 20 | margin-left: 12vw; 21 | padding-right: 12vw; 22 | } 23 | 24 | .gallery__item { 25 | margin: 0 3vw; 26 | display: grid; 27 | grid-template-areas: '... ...' 28 | '... gallery-image' 29 | '... ...' ; 30 | grid-template-columns: 8rem 21vmax; 31 | grid-template-rows: 8rem 28vmax 3rem; 32 | } 33 | 34 | .gallery__item-img { 35 | grid-area: gallery-image; 36 | width: 100%; 37 | height: 100%; 38 | overflow: hidden; 39 | position: relative; 40 | transform-origin: 50% 100%; 41 | } 42 | 43 | .gallery__item-imginner { 44 | background-size: cover; 45 | background-position: 50% 0; 46 | width: 100%; 47 | height: 100%; 48 | } 49 | 50 | .gallery__item-caption { 51 | grid-area: 1 / 1 / 4 / 3; 52 | display: grid; 53 | grid-template-areas: 'gallery-number gallery-title' 54 | 'gallery-link ...' 55 | 'gallery-link gallery-tags' ; 56 | grid-template-columns: 8rem auto; 57 | grid-template-rows: 8rem auto 3rem; 58 | 59 | } 60 | 61 | .gallery__item-number { 62 | grid-area: gallery-number; 63 | font-size: 6rem; 64 | font-size: clamp(2.5rem,9vw,6.5rem); 65 | justify-self: end; 66 | padding-right: 2rem; 67 | color: var(--color-gallery-number); 68 | } 69 | 70 | .gallery__item-title { 71 | grid-area: gallery-title; 72 | margin: 0; 73 | font-size: 4rem; 74 | font-size: clamp(2rem,5vw,4rem); 75 | color: var(--color-gallery-title); 76 | } 77 | 78 | .gallery__item-number, 79 | .gallery__item-title, 80 | .gallery__text { 81 | font-family: moret, serif; 82 | font-weight: 800; 83 | font-style: italic; 84 | align-self: center; 85 | } 86 | 87 | .gallery__item-link { 88 | grid-area: gallery-link; 89 | align-self: end; 90 | font-size: 1.5rem; 91 | background: var(--color-gallery-link-bg); 92 | color: var(--color-gallery-link); 93 | text-decoration: underline; 94 | width: 120px; 95 | height: 120px; 96 | border-radius: 50%; 97 | position: relative; 98 | display: flex; 99 | justify-content: center; 100 | align-items: center; 101 | cursor: pointer; 102 | } 103 | 104 | .gallery__item-link:focus, 105 | .gallery__item-link:hover { 106 | background: var(--color-gallery-link-bg-hover); 107 | color: var(--color-gallery-link-hover); 108 | text-decoration: none; 109 | } 110 | 111 | .gallery__item-tags { 112 | grid-area: gallery-tags; 113 | justify-self: end; 114 | font-size: 1.5rem; 115 | display: grid; 116 | grid-auto-flow: column; 117 | grid-gap: 1rem; 118 | cursor: pointer; 119 | } 120 | 121 | .gallery__text { 122 | font-size: 20vw; 123 | line-height: 0.8; 124 | margin: 0 10vw 0 14vw; 125 | text-transform: lowercase; 126 | color: transparent; 127 | -webkit-text-stroke: 1px var(--color-gallery-text); 128 | text-stroke: 1px var(--color-gallery-text); 129 | -webkit-text-fill-color: transparent; 130 | text-fill-color: transparent; 131 | } 132 | 133 | .gallery__text-inner { 134 | display: block; 135 | } -------------------------------------------------------------------------------- /src/css/demo5.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | --color-text: #fff; 4 | --color-bg: #131212; 5 | --color-link: #d75828; 6 | --color-link-hover: #fff; 7 | --color-gallery-title: #463832; 8 | --color-gallery-number: #ffffff; 9 | --color-gallery-link: #fff; 10 | --color-gallery-link-bg: #d75828; 11 | --color-gallery-link-hover: #fff; 12 | --color-gallery-link-bg-hover: #d4b77d; 13 | color: var(--color-text); 14 | background-color: var(--color-bg); 15 | --cursor-stroke: none; 16 | --cursor-fill: #ffffff; 17 | --cursor-stroke-width: 1px; 18 | } 19 | 20 | .gallery { 21 | display: flex; 22 | margin-left: 12vw; 23 | padding-right: 12vw; 24 | } 25 | 26 | .gallery__item { 27 | margin: 0 3vw; 28 | display: grid; 29 | grid-template-areas: '... ...' 30 | '... gallery-image' 31 | '... ...' ; 32 | grid-template-columns: 8rem 21vmax; 33 | grid-template-rows: 8rem 28vmax 3rem; 34 | will-change: transform; 35 | } 36 | 37 | .gallery__item:nth-child(even) { 38 | padding-top: 10vh; 39 | } 40 | 41 | .gallery__item-img { 42 | grid-area: gallery-image; 43 | width: 100%; 44 | height: 100%; 45 | overflow: hidden; 46 | position: relative; 47 | will-change: transform; 48 | } 49 | 50 | .gallery__item-imginner { 51 | background-size: cover; 52 | background-position: 50% 0; 53 | width: 100%; 54 | height: calc(100% + 14vh); 55 | margin-top: -7vh; 56 | will-change: transform; 57 | } 58 | 59 | .gallery__item-caption { 60 | grid-area: 1 / 1 / 4 / 3; 61 | display: grid; 62 | grid-template-areas: 'gallery-number gallery-title' 63 | 'gallery-link ...' 64 | 'gallery-link gallery-tags' ; 65 | grid-template-columns: 8rem auto; 66 | grid-template-rows: 8rem auto 3rem; 67 | 68 | } 69 | 70 | .gallery__item-number { 71 | grid-area: gallery-number; 72 | font-size: 6rem; 73 | font-size: clamp(2.5rem,9vw,6.5rem); 74 | justify-self: end; 75 | padding-right: 2rem; 76 | color: var(--color-gallery-number); 77 | } 78 | 79 | .gallery__item-title { 80 | grid-area: gallery-title; 81 | margin: 0; 82 | font-size: 4rem; 83 | font-size: clamp(2rem,5vw,4rem); 84 | color: var(--color-gallery-title); 85 | } 86 | 87 | .gallery__item-number, 88 | .gallery__item-title, 89 | .gallery__text { 90 | font-family: moret, serif; 91 | font-weight: 800; 92 | font-style: italic; 93 | align-self: center; 94 | } 95 | 96 | .gallery__item-link { 97 | grid-area: gallery-link; 98 | align-self: end; 99 | font-size: 1.5rem; 100 | background: var(--color-gallery-link-bg); 101 | color: var(--color-gallery-link); 102 | text-decoration: underline; 103 | width: 120px; 104 | height: 120px; 105 | border-radius: 50%; 106 | position: relative; 107 | display: flex; 108 | justify-content: center; 109 | align-items: center; 110 | cursor: pointer; 111 | } 112 | 113 | .gallery__item-link:focus, 114 | .gallery__item-link:hover { 115 | background: var(--color-gallery-link-bg-hover); 116 | color: var(--color-gallery-link-hover); 117 | text-decoration: none; 118 | } 119 | 120 | .gallery__item-tags { 121 | grid-area: gallery-tags; 122 | justify-self: end; 123 | font-size: 1.5rem; 124 | display: grid; 125 | grid-auto-flow: column; 126 | grid-gap: 1rem; 127 | cursor: pointer; 128 | } 129 | 130 | .gallery__text { 131 | font-size: 20vw; 132 | line-height: 0.8; 133 | margin: 0 10vw 0 14vw; 134 | text-transform: lowercase; 135 | color: var(--color-gallery-title); 136 | color: transparent; 137 | -webkit-text-stroke: 1px #463832; 138 | text-stroke: 1px #463832; 139 | -webkit-text-fill-color: transparent; 140 | text-fill-color: transparent; 141 | } 142 | 143 | .gallery__text-inner { 144 | display: block; 145 | } -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/favicon.ico -------------------------------------------------------------------------------- /src/img/demo1/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo1/1.jpg -------------------------------------------------------------------------------- /src/img/demo1/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo1/10.jpg -------------------------------------------------------------------------------- /src/img/demo1/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo1/11.jpg -------------------------------------------------------------------------------- /src/img/demo1/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo1/12.jpg -------------------------------------------------------------------------------- /src/img/demo1/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo1/2.jpg -------------------------------------------------------------------------------- /src/img/demo1/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo1/3.jpg -------------------------------------------------------------------------------- /src/img/demo1/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo1/4.jpg -------------------------------------------------------------------------------- /src/img/demo1/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo1/5.jpg -------------------------------------------------------------------------------- /src/img/demo1/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo1/6.jpg -------------------------------------------------------------------------------- /src/img/demo1/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo1/7.jpg -------------------------------------------------------------------------------- /src/img/demo1/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo1/8.jpg -------------------------------------------------------------------------------- /src/img/demo1/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo1/9.jpg -------------------------------------------------------------------------------- /src/img/demo2/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo2/1.jpg -------------------------------------------------------------------------------- /src/img/demo2/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo2/10.jpg -------------------------------------------------------------------------------- /src/img/demo2/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo2/11.jpg -------------------------------------------------------------------------------- /src/img/demo2/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo2/12.jpg -------------------------------------------------------------------------------- /src/img/demo2/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo2/2.jpg -------------------------------------------------------------------------------- /src/img/demo2/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo2/3.jpg -------------------------------------------------------------------------------- /src/img/demo2/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo2/4.jpg -------------------------------------------------------------------------------- /src/img/demo2/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo2/5.jpg -------------------------------------------------------------------------------- /src/img/demo2/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo2/6.jpg -------------------------------------------------------------------------------- /src/img/demo2/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo2/7.jpg -------------------------------------------------------------------------------- /src/img/demo2/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo2/8.jpg -------------------------------------------------------------------------------- /src/img/demo2/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo2/9.jpg -------------------------------------------------------------------------------- /src/img/demo3/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo3/1.jpg -------------------------------------------------------------------------------- /src/img/demo3/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo3/10.jpg -------------------------------------------------------------------------------- /src/img/demo3/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo3/11.jpg -------------------------------------------------------------------------------- /src/img/demo3/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo3/12.jpg -------------------------------------------------------------------------------- /src/img/demo3/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo3/2.jpg -------------------------------------------------------------------------------- /src/img/demo3/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo3/3.jpg -------------------------------------------------------------------------------- /src/img/demo3/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo3/4.jpg -------------------------------------------------------------------------------- /src/img/demo3/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo3/5.jpg -------------------------------------------------------------------------------- /src/img/demo3/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo3/6.jpg -------------------------------------------------------------------------------- /src/img/demo3/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo3/7.jpg -------------------------------------------------------------------------------- /src/img/demo3/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo3/8.jpg -------------------------------------------------------------------------------- /src/img/demo3/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo3/9.jpg -------------------------------------------------------------------------------- /src/img/demo4/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo4/1.jpg -------------------------------------------------------------------------------- /src/img/demo4/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo4/10.jpg -------------------------------------------------------------------------------- /src/img/demo4/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo4/11.jpg -------------------------------------------------------------------------------- /src/img/demo4/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo4/12.jpg -------------------------------------------------------------------------------- /src/img/demo4/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo4/2.jpg -------------------------------------------------------------------------------- /src/img/demo4/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo4/3.jpg -------------------------------------------------------------------------------- /src/img/demo4/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo4/4.jpg -------------------------------------------------------------------------------- /src/img/demo4/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo4/5.jpg -------------------------------------------------------------------------------- /src/img/demo4/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo4/6.jpg -------------------------------------------------------------------------------- /src/img/demo4/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo4/7.jpg -------------------------------------------------------------------------------- /src/img/demo4/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo4/8.jpg -------------------------------------------------------------------------------- /src/img/demo4/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HorizontalSmoothScrollLayout/bc0bbec7cf1c92fe1bd5ba8d537150f53acfebac/src/img/demo4/9.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Horizontal Smooth Scroll Layout | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Horizontal Smooth Scroll Layout
using Locomotive Scroll

20 |
21 | Demo__01 22 | Demo__02 23 | Demo__03 24 | Demo__04 25 | Demo__05 26 |
27 |
28 | Previous demo 29 | Article 30 | GitHub 31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |

Funambulist

40 | 01 41 |

42 | #house 43 | #green 44 | #chair 45 |

46 | explore 47 |
48 |
49 |
50 |
51 |
52 |

Omophagy

53 | 02 54 |

55 | #love 56 | #hug 57 | #people 58 |

59 | explore 60 |
61 |
62 |
63 |
64 |
65 |

Conniption

66 | 03 67 |

68 | #hike 69 | #nature 70 | #rain 71 |

72 | explore 73 |
74 |
75 |
76 |
77 |
78 |

Xenology

79 | 04 80 |

81 | #free 82 | #wood 83 | #fire 84 |

85 | explore 86 |
87 |
88 |
PollexMallam
89 |
90 |
91 |
92 |

Lycanthropy

93 | 05 94 |

95 | #cloud 96 | #lake 97 | #frog 98 |

99 | explore 100 |
101 |
102 |
103 |
104 |
105 |

Mudlark

106 | 06 107 |

108 | #tent 109 | #flower 110 | #love 111 |

112 | explore 113 |
114 |
115 |
116 |
117 |
118 |

Illywhacker

119 | 07 120 |

121 | #water 122 | #bottle 123 | #hand 124 |

125 | explore 126 |
127 |
128 |
129 |
130 |
131 |

Disenthral

132 | 08 133 |

134 | #night 135 | #stars 136 | #moon 137 |

138 | explore 139 |
140 |
141 |
CacoeDupis
142 |
143 |
144 |
145 |

Abaya

146 | 09 147 |

148 | #sun 149 | #light 150 | #air 151 |

152 | explore 153 |
154 |
155 |
156 |
157 |
158 |

Hallux

159 | 10 160 |

161 | #vital 162 | #fog 163 | #close 164 |

165 | explore 166 |
167 |
168 |
169 |
170 |
171 |

Lablab

172 | 11 173 |

174 | #cover 175 | #bed 176 | #window 177 |

178 | explore 179 |
180 |
181 |
182 |
183 |
184 |

Momisom

185 | 12 186 |

187 | #sad 188 | #mouth 189 | #tear 190 |

191 | explore 192 |
193 |
194 |
ChadChiliad
195 |
196 |
197 |
198 | 199 | 200 | 201 | 202 | 203 | 204 | -------------------------------------------------------------------------------- /src/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Horizontal Smooth Scroll Layout | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Horizontal Smooth Scroll Layout
using Locomotive Scroll

20 |
21 | Demo__01 22 | Demo__02 23 | Demo__03 24 | Demo__04 25 | Demo__05 26 |
27 |
28 | Previous demo 29 | Article 30 | GitHub 31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |

Moonraker

41 | 01 42 |

43 | #house 44 | #green 45 | #chair 46 |

47 | explore 48 |
49 |
50 |
51 |
52 |
53 |

Nacarat

54 | 02 55 |

56 | #love 57 | #hug 58 | #people 59 |

60 | explore 61 |
62 |
63 |
64 |
65 |
66 |

Selkie

67 | 03 68 |

69 | #hike 70 | #nature 71 | #rain 72 |

73 | explore 74 |
75 |
76 |
77 |
78 |
79 |

Thalassic

80 | 04 81 |

82 | #free 83 | #wood 84 | #fire 85 |

86 | explore 87 |
88 |
89 |
VerjuiceZyrian
90 |
91 |
92 |
93 |

Uroboros

94 | 05 95 |

96 | #cloud 97 | #lake 98 | #frog 99 |

100 | explore 101 |
102 |
103 |
104 |
105 |
106 |

Waitron

107 | 06 108 |

109 | #tent 110 | #flower 111 | #love 112 |

113 | explore 114 |
115 |
116 |
117 |
118 |
119 |

Soucouyant

120 | 07 121 |

122 | #water 123 | #bottle 124 | #hand 125 |

126 | explore 127 |
128 |
129 |
130 |
131 |
132 |

Periapt

133 | 08 134 |

135 | #night 136 | #stars 137 | #moon 138 |

139 | explore 140 |
141 |
142 |
TiffinSkanky
143 |
144 |
145 |
146 |

Cyanic

147 | 09 148 |

149 | #sun 150 | #light 151 | #air 152 |

153 | explore 154 |
155 |
156 |
157 |
158 |
159 |

Martlet

160 | 10 161 |

162 | #vital 163 | #fog 164 | #close 165 |

166 | explore 167 |
168 |
169 |
170 |
171 |
172 |

Eurhythmic

173 | 11 174 |

175 | #cover 176 | #bed 177 | #window 178 |

179 | explore 180 |
181 |
182 |
183 |
184 |
185 |

Dariole

186 | 12 187 |

188 | #sad 189 | #mouth 190 | #tear 191 |

192 | explore 193 |
194 |
195 |
DeasilZetetic
196 |
197 |
198 |
199 |
200 | 201 | 202 | 203 | 204 | 205 | 206 | -------------------------------------------------------------------------------- /src/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Horizontal Smooth Scroll Layout | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Horizontal Smooth Scroll Layout
using Locomotive Scroll

20 |
21 | Demo__01 22 | Demo__02 23 | Demo__03 24 | Demo__04 25 | Demo__05 26 |
27 |
28 | Previous demo 29 | Article 30 | GitHub 31 |
32 |
33 |

Mustache Cómplice

34 |

Fashionable garments since 1986

35 |
36 |
37 |
38 |
39 |
40 |
41 |
Mustache
42 |
43 |
44 |
45 |

Moonraker

46 | 01 47 |

48 | #house 49 | #green 50 | #chair 51 |

52 | explore 53 |
54 |
55 |
56 |
57 |
58 |

Nacarat

59 | 02 60 |

61 | #love 62 | #hug 63 | #people 64 |

65 | explore 66 |
67 |
68 |
69 |
70 |
71 |

Selkie

72 | 03 73 |

74 | #hike 75 | #nature 76 | #rain 77 |

78 | explore 79 |
80 |
81 |
82 |
83 |
84 |

Thalassic

85 | 04 86 |

87 | #free 88 | #wood 89 | #fire 90 |

91 | explore 92 |
93 |
94 |
95 |
96 |
97 |

Uroboros

98 | 05 99 |

100 | #cloud 101 | #lake 102 | #frog 103 |

104 | explore 105 |
106 |
107 |
108 |
109 |
110 |

Waitron

111 | 06 112 |

113 | #tent 114 | #flower 115 | #love 116 |

117 | explore 118 |
119 |
120 |
121 |
122 |
123 |

Soucouyant

124 | 07 125 |

126 | #water 127 | #bottle 128 | #hand 129 |

130 | explore 131 |
132 |
133 |
134 |
135 |
136 |

Periapt

137 | 08 138 |

139 | #night 140 | #stars 141 | #moon 142 |

143 | explore 144 |
145 |
146 |
147 |
148 |
149 |

Cyanic

150 | 09 151 |

152 | #sun 153 | #light 154 | #air 155 |

156 | explore 157 |
158 |
159 |
160 |
161 |
162 |

Martlet

163 | 10 164 |

165 | #vital 166 | #fog 167 | #close 168 |

169 | explore 170 |
171 |
172 |
173 |
174 |
175 |

Eurhythmic

176 | 11 177 |

178 | #cover 179 | #bed 180 | #window 181 |

182 | explore 183 |
184 |
185 |
186 |
187 |
188 |

Dariole

189 | 12 190 |

191 | #sad 192 | #mouth 193 | #tear 194 |

195 | explore 196 |
197 |
198 |
Cómplice
199 |
200 |
201 |
202 |
203 | 204 | 205 | 206 | 207 | 208 | 209 | -------------------------------------------------------------------------------- /src/index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Horizontal Smooth Scroll Layout | Demo 4 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Horizontal Smooth Scroll Layout
using Locomotive Scroll

20 |
21 | Demo__01 22 | Demo__02 23 | Demo__03 24 | Demo__04 25 | Demo__05 26 |
27 |
28 | Previous demo 29 | Article 30 | GitHub 31 |
32 |
33 |
34 |
35 | 195 |
196 |
197 | 198 | 199 | 200 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /src/index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Horizontal Smooth Scroll Layout | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Horizontal Smooth Scroll Layout
using Locomotive Scroll

20 |
21 | Demo__01 22 | Demo__02 23 | Demo__03 24 | Demo__04 25 | Demo__05 26 |
27 |
28 | Previous demo 29 | Article 30 | GitHub 31 |
32 |
33 |
34 |
35 |
36 |
ArielCroze
37 |
38 |
39 |
40 |

Funambulist

41 | 01 42 |

43 | #house 44 | #green 45 | #chair 46 |

47 | explore 48 |
49 |
50 |
51 |
52 |
53 |

Omophagy

54 | 02 55 |

56 | #love 57 | #hug 58 | #people 59 |

60 | explore 61 |
62 |
63 |
64 |
65 |
66 |

Conniption

67 | 03 68 |

69 | #hike 70 | #nature 71 | #rain 72 |

73 | explore 74 |
75 |
76 |
77 |
78 |
79 |

Xenology

80 | 04 81 |

82 | #free 83 | #wood 84 | #fire 85 |

86 | explore 87 |
88 |
89 |
90 |
91 |
92 |

Lycanthropy

93 | 05 94 |

95 | #cloud 96 | #lake 97 | #frog 98 |

99 | explore 100 |
101 |
102 |
103 |
104 |
105 |

Mudlark

106 | 06 107 |

108 | #tent 109 | #flower 110 | #love 111 |

112 | explore 113 |
114 |
115 |
116 |
117 |
118 |

Illywhacker

119 | 07 120 |

121 | #water 122 | #bottle 123 | #hand 124 |

125 | explore 126 |
127 |
128 |
129 |
130 |
131 |

Disenthral

132 | 08 133 |

134 | #night 135 | #stars 136 | #moon 137 |

138 | explore 139 |
140 |
141 |
142 |
143 |
144 |

Abaya

145 | 09 146 |

147 | #sun 148 | #light 149 | #air 150 |

151 | explore 152 |
153 |
154 |
155 |
156 |
157 |

Hallux

158 | 10 159 |

160 | #vital 161 | #fog 162 | #close 163 |

164 | explore 165 |
166 |
167 |
168 |
169 |
170 |

Lablab

171 | 11 172 |

173 | #cover 174 | #bed 175 | #window 176 |

177 | explore 178 |
179 |
180 |
181 |
182 |
183 |

Momisom

184 | 12 185 |

186 | #sad 187 | #mouth 188 | #tear 189 |

190 | explore 191 |
192 |
193 |
DariaGaita
194 |
195 |
196 |
197 | 198 | 199 | 200 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /src/js/cursor.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | import { lerp, getMousePos } from './utils'; 3 | 4 | // Track the mouse position 5 | let mouse = {x: 0, y: 0}; 6 | window.addEventListener('mousemove', ev => mouse = getMousePos(ev)); 7 | 8 | export default class Cursor { 9 | constructor(el) { 10 | this.DOM = {el: el}; 11 | this.DOM.el.style.opacity = 0; 12 | 13 | this.bounds = this.DOM.el.getBoundingClientRect(); 14 | 15 | this.renderedStyles = { 16 | tx: {previous: 0, current: 0, amt: 0.2}, 17 | ty: {previous: 0, current: 0, amt: 0.2}, 18 | scale: {previous: 1, current: 1, amt: 0.15}, 19 | //opacity: {previous: 1, current: 1, amt: 0.1} 20 | }; 21 | 22 | this.onMouseMoveEv = () => { 23 | this.renderedStyles.tx.previous = this.renderedStyles.tx.current = mouse.x - this.bounds.width/2; 24 | this.renderedStyles.ty.previous = this.renderedStyles.ty.previous = mouse.y - this.bounds.height/2; 25 | gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1}); 26 | requestAnimationFrame(() => this.render()); 27 | window.removeEventListener('mousemove', this.onMouseMoveEv); 28 | }; 29 | window.addEventListener('mousemove', this.onMouseMoveEv); 30 | } 31 | enter() { 32 | this.renderedStyles['scale'].current = 2.5; 33 | //this.renderedStyles['opacity'].current = 0.5; 34 | } 35 | leave() { 36 | this.renderedStyles['scale'].current = 1; 37 | //this.renderedStyles['opacity'].current = 1; 38 | } 39 | render() { 40 | this.renderedStyles['tx'].current = mouse.x - this.bounds.width/2; 41 | this.renderedStyles['ty'].current = mouse.y - this.bounds.height/2; 42 | 43 | for (const key in this.renderedStyles ) { 44 | this.renderedStyles[key].previous = lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].amt); 45 | } 46 | 47 | this.DOM.el.style.transform = `translateX(${(this.renderedStyles['tx'].previous)}px) translateY(${this.renderedStyles['ty'].previous}px) scale(${this.renderedStyles['scale'].previous})`; 48 | //this.DOM.el.style.opacity = this.renderedStyles['opacity'].previous; 49 | 50 | requestAnimationFrame(() => this.render()); 51 | } 52 | } -------------------------------------------------------------------------------- /src/js/demo1/index.js: -------------------------------------------------------------------------------- 1 | import {preloadImages, preloadFonts} from '../utils'; 2 | import Cursor from '../cursor'; 3 | import LocomotiveScroll from 'locomotive-scroll'; 4 | 5 | // Initialize Locomotive Scroll (horizontal direction) 6 | const lscroll = new LocomotiveScroll({ 7 | el: document.querySelector('[data-scroll-container]'), 8 | smooth: true, 9 | direction: 'horizontal' 10 | }); 11 | 12 | // Preload images and fonts 13 | Promise.all([preloadImages('.gallery__item-imginner'), preloadFonts('vxy2fer')]).then(() => { 14 | // Remove loader (loading class) 15 | document.body.classList.remove('loading'); 16 | 17 | // Initialize custom cursor 18 | const cursor = new Cursor(document.querySelector('.cursor')); 19 | 20 | // Mouse effects on all links and others 21 | [...document.querySelectorAll('a')].forEach(link => { 22 | link.addEventListener('mouseenter', () => cursor.enter()); 23 | link.addEventListener('mouseleave', () => cursor.leave()); 24 | }); 25 | }); -------------------------------------------------------------------------------- /src/js/demo2/index.js: -------------------------------------------------------------------------------- 1 | import {preloadImages, preloadFonts, clamp, map} from '../utils'; 2 | import Cursor from '../cursor'; 3 | import LocomotiveScroll from 'locomotive-scroll'; 4 | 5 | const lscroll = new LocomotiveScroll({ 6 | el: document.querySelector('[data-scroll-container]'), 7 | smooth: true, 8 | direction: 'horizontal' 9 | }); 10 | 11 | // let's skew the images when scrolling. The faster we scroll the higher the skew value 12 | // skew interval from -15 to 15 13 | // "fast scrolling" means the distance from the previous scrolling position to the current one is high. We consider a interval of [-50,50] for the min/max distance 14 | let scroll = {cache: 0, current: 0}; 15 | const allImgs = [...document.querySelectorAll('.gallery__item-img')]; 16 | lscroll.on('scroll', (obj) => { 17 | scroll.current = obj.scroll.x; 18 | const distance = scroll.current - scroll.cache; 19 | scroll.cache = scroll.current; 20 | const skewVal = map(distance, -50, 50, -15, 15); 21 | allImgs.forEach(el => el.style.transform = 'skewX('+clamp(skewVal, -15, 15)+'deg)'); 22 | }); 23 | lscroll.update(); 24 | 25 | // Preload images and fonts 26 | Promise.all([preloadImages('.gallery__item-imginner'), preloadFonts('vxy2fer')]).then(() => { 27 | // Remove loader (loading class) 28 | document.body.classList.remove('loading'); 29 | 30 | // Initialize custom cursor 31 | const cursor = new Cursor(document.querySelector('.cursor')); 32 | 33 | // Mouse effects on all links and others 34 | [...document.querySelectorAll('a')].forEach(link => { 35 | link.addEventListener('mouseenter', () => cursor.enter()); 36 | link.addEventListener('mouseleave', () => cursor.leave()); 37 | }); 38 | }); -------------------------------------------------------------------------------- /src/js/demo3/index.js: -------------------------------------------------------------------------------- 1 | import {preloadImages, preloadFonts, clamp, map} from '../utils'; 2 | import Cursor from '../cursor'; 3 | import LocomotiveScroll from 'locomotive-scroll'; 4 | 5 | const lscroll = new LocomotiveScroll({ 6 | el: document.querySelector('[data-scroll-container]'), 7 | smooth: true, 8 | direction: 'horizontal' 9 | }); 10 | 11 | // let's scale the images when scrolling. 12 | lscroll.on('scroll', (obj) => { 13 | for (const key of Object.keys(obj.currentElements)) { 14 | if ( obj.currentElements[key].el.classList.contains('gallery__item-imginner') ) { 15 | let progress = obj.currentElements[key].progress; 16 | const scaleVal = progress < 0.5 ? clamp(map(progress,0,0.5,0.2,1),0.2,1) : clamp(map(progress,0.5,1,1,0.2),0.2,1); 17 | obj.currentElements[key].el.parentNode.style.transform = `scale(${scaleVal})` 18 | } 19 | } 20 | }); 21 | lscroll.update(); 22 | 23 | // Preload images and fonts 24 | Promise.all([preloadImages('.gallery__item-imginner'), preloadFonts('vxy2fer')]).then(() => { 25 | // Remove loader (loading class) 26 | document.body.classList.remove('loading'); 27 | 28 | // Initialize custom cursor 29 | const cursor = new Cursor(document.querySelector('.cursor')); 30 | 31 | // Mouse effects on all links and others 32 | [...document.querySelectorAll('a,.gallery__item-img,.gallery__item-number')].forEach(link => { 33 | link.addEventListener('mouseenter', () => cursor.enter()); 34 | link.addEventListener('mouseleave', () => cursor.leave()); 35 | }); 36 | }); -------------------------------------------------------------------------------- /src/js/demo4/index.js: -------------------------------------------------------------------------------- 1 | import {preloadImages, preloadFonts, clamp, map, randomNumber} from '../utils'; 2 | import Cursor from '../cursor'; 3 | import LocomotiveScroll from 'locomotive-scroll'; 4 | 5 | const lscroll = new LocomotiveScroll({ 6 | el: document.querySelector('[data-scroll-container]'), 7 | smooth: true, 8 | direction: 'horizontal' 9 | }); 10 | 11 | // let's rotate the elements when scrolling. 12 | const elems = [...document.querySelectorAll('.gallery__item')] 13 | const rotationsArr = Array.from({length: elems.length}, () => randomNumber(-30,30)); 14 | const translationArr = Array.from({length: elems.length}, () => randomNumber(-100,100)); 15 | lscroll.on('scroll', (obj) => { 16 | for (const key of Object.keys(obj.currentElements)) { 17 | const el = obj.currentElements[key].el; 18 | const idx = elems.indexOf(el); 19 | if ( obj.currentElements[key].el.classList.contains('gallery__item') ) { 20 | let progress = obj.currentElements[key].progress; 21 | //const scaleVal = progress < 0.5 ? clamp(map(progress,0,0.5,1.2,0.5),0.5,1.2) : clamp(map(progress,0.5,1,0.5,1.2),0.5,1.2); 22 | const rotationVal = progress > 0.6 ? clamp(map(progress,0.6,1,0,rotationsArr[idx]), Math.min(0,rotationsArr[idx]), Math.max(0,rotationsArr[idx])) : 0; 23 | const translationVal = progress > 0.6 ? clamp(map(progress,0.6,1,0,translationArr[idx]), Math.min(0,translationArr[idx]), Math.max(0,translationArr[idx])) : 0; 24 | //obj.currentElements[key].el.style.transform = `scale(${scaleVal})` 25 | obj.currentElements[key].el.style.transform = `translateY(${translationVal}%) rotate(${rotationVal}deg)` 26 | } 27 | } 28 | }); 29 | lscroll.update(); 30 | 31 | // Preload images and fonts 32 | Promise.all([preloadImages('.gallery__item-imginner'), preloadFonts('vxy2fer')]).then(() => { 33 | // Remove loader (loading class) 34 | document.body.classList.remove('loading'); 35 | 36 | // Initialize custom cursor 37 | const cursor = new Cursor(document.querySelector('.cursor')); 38 | 39 | // Mouse effects on all links and others 40 | [...document.querySelectorAll('a,.gallery__item-img,.gallery__item-number')].forEach(link => { 41 | link.addEventListener('mouseenter', () => cursor.enter()); 42 | link.addEventListener('mouseleave', () => cursor.leave()); 43 | }); 44 | }); -------------------------------------------------------------------------------- /src/js/demo5/index.js: -------------------------------------------------------------------------------- 1 | import {preloadImages, preloadFonts, clamp, map} from '../utils'; 2 | import Cursor from '../cursor'; 3 | import LocomotiveScroll from 'locomotive-scroll'; 4 | 5 | // Initialize Locomotive Scroll (horizontal direction) 6 | const lscroll = new LocomotiveScroll({ 7 | el: document.querySelector('[data-scroll-container]'), 8 | smooth: true, 9 | direction: 'horizontal' 10 | }); 11 | 12 | lscroll.on('scroll', (obj) => { 13 | for (const key of Object.keys(obj.currentElements)) { 14 | if ( obj.currentElements[key].el.classList.contains('gallery__item-imginner') ) { 15 | let progress = obj.currentElements[key].progress; 16 | const saturateVal = progress < 0.5 ? clamp(map(progress,0,0.5,0,1),0,1) : clamp(map(progress,0.5,1,1,0),0,1); 17 | const brightnessVal = progress < 0.5 ? clamp(map(progress,0,0.5,0,1),0,1) : clamp(map(progress,0.5,1,1,0),0,1); 18 | obj.currentElements[key].el.style.filter = `saturate(${saturateVal}) brightness(${brightnessVal})` 19 | } 20 | } 21 | }); 22 | lscroll.update(); 23 | 24 | // Preload images and fonts 25 | Promise.all([preloadImages('.gallery__item-imginner'), preloadFonts('vxy2fer')]).then(() => { 26 | // Remove loader (loading class) 27 | document.body.classList.remove('loading'); 28 | 29 | // Initialize custom cursor 30 | const cursor = new Cursor(document.querySelector('.cursor')); 31 | 32 | // Mouse effects on all links and others 33 | [...document.querySelectorAll('a')].forEach(link => { 34 | link.addEventListener('mouseenter', () => cursor.enter()); 35 | link.addEventListener('mouseleave', () => cursor.leave()); 36 | }); 37 | }); -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | // Map number x from range [a, b] to [c, d] 4 | const map = (x, a, b, c, d) => (x - a) * (d - c) / (b - a) + c; 5 | 6 | // Linear interpolation 7 | const lerp = (a, b, n) => (1 - n) * a + n * b; 8 | 9 | const clamp = (num, min, max) => num <= min ? min : num >= max ? max : num; 10 | 11 | const randomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1) + min); 12 | 13 | // Gets the mouse position 14 | const getMousePos = e => { 15 | return { 16 | x : e.clientX, 17 | y : e.clientY 18 | }; 19 | }; 20 | 21 | // Preload images 22 | const preloadImages = (selector = 'img') => { 23 | return new Promise((resolve) => { 24 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 25 | }); 26 | }; 27 | 28 | // Preload images 29 | const preloadFonts = (id) => { 30 | return new Promise((resolve) => { 31 | WebFont.load({ 32 | typekit: { 33 | id: id 34 | }, 35 | active: resolve 36 | }); 37 | }); 38 | }; 39 | 40 | export { 41 | map, 42 | lerp, 43 | clamp, 44 | randomNumber, 45 | getMousePos, 46 | preloadImages, 47 | preloadFonts 48 | }; --------------------------------------------------------------------------------