├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── 1.dc197a9a.jpg ├── 10.5e22fdc3.jpg ├── 11.a56b8aeb.jpg ├── 12.b5a57fd7.jpg ├── 13.3858c623.jpg ├── 14.c732d2b3.jpg ├── 15.61b13bcc.jpg ├── 16.39461312.jpg ├── 17.7c008703.jpg ├── 18.81a1401f.jpg ├── 19.6d803788.jpg ├── 2.3ca6bb44.jpg ├── 20.b400b781.jpg ├── 21.153c3a00.jpg ├── 22.787cf170.jpg ├── 23.486b8c96.jpg ├── 24.fff42ead.jpg ├── 25.4550eb4f.jpg ├── 26.2e93c17c.jpg ├── 27.4a259712.jpg ├── 28.1b075856.jpg ├── 29.474079f1.jpg ├── 3.a433b89d.jpg ├── 30.e673968d.jpg ├── 31.dfbd55a8.jpg ├── 32.d054f62f.jpg ├── 33.7058d352.jpg ├── 34.f8e0a6a3.jpg ├── 35.e3312292.jpg ├── 36.0448c5b0.jpg ├── 37.49a0780f.jpg ├── 38.d80dd7b6.jpg ├── 39.f6a22a1b.jpg ├── 4.c6d96be5.jpg ├── 40.9f6d9012.jpg ├── 5.689b68fd.jpg ├── 6.e96dcfff.jpg ├── 7.2d66e3ed.jpg ├── 8.f4323fe0.jpg ├── 9.c9233dac.jpg ├── base.98fd6c19.css ├── favicon.26242483.ico ├── index.html ├── js.00a46daa.css └── js.00a46daa.js ├── package-lock.json ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 16.jpg ├── 17.jpg ├── 18.jpg ├── 19.jpg ├── 2.jpg ├── 20.jpg ├── 21.jpg ├── 22.jpg ├── 23.jpg ├── 24.jpg ├── 25.jpg ├── 26.jpg ├── 27.jpg ├── 28.jpg ├── 29.jpg ├── 3.jpg ├── 30.jpg ├── 31.jpg ├── 32.jpg ├── 33.jpg ├── 34.jpg ├── 35.jpg ├── 36.jpg ├── 37.jpg ├── 38.jpg ├── 39.jpg ├── 4.jpg ├── 40.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg ├── index.html └── js ├── contentItem.js ├── cursor.js ├── index.js ├── menuController.js ├── menuItem.js ├── preloader.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 | # Inline Menu Layout with Gallery Panel 2 | 3 | An inline menu layout with a playful hover animation and a gallery content preview panel. 4 | 5 | ![Image](https://tympanus.net/codrops/wp-content/uploads/2020/11/InlineMenuLayout_featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=51858) 8 | 9 | [Demo](http://tympanus.net/Development/InlineMenuLayout/) 10 | 11 | 12 | ## Installation 13 | 14 | Install dependencies: 15 | 16 | ``` 17 | npm install 18 | ``` 19 | 20 | Compile the code for development and start a local server: 21 | 22 | ``` 23 | npm start 24 | ``` 25 | 26 | Create the build: 27 | 28 | ``` 29 | npm run build 30 | ``` 31 | 32 | ## Credits 33 | 34 | - Images from [Unsplash](https://unsplash.com/) 35 | 36 | ## Misc 37 | 38 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 39 | 40 | ## License 41 | [MIT](LICENSE) 42 | 43 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /dist/1.dc197a9a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/1.dc197a9a.jpg -------------------------------------------------------------------------------- /dist/10.5e22fdc3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/10.5e22fdc3.jpg -------------------------------------------------------------------------------- /dist/11.a56b8aeb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/11.a56b8aeb.jpg -------------------------------------------------------------------------------- /dist/12.b5a57fd7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/12.b5a57fd7.jpg -------------------------------------------------------------------------------- /dist/13.3858c623.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/13.3858c623.jpg -------------------------------------------------------------------------------- /dist/14.c732d2b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/14.c732d2b3.jpg -------------------------------------------------------------------------------- /dist/15.61b13bcc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/15.61b13bcc.jpg -------------------------------------------------------------------------------- /dist/16.39461312.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/16.39461312.jpg -------------------------------------------------------------------------------- /dist/17.7c008703.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/17.7c008703.jpg -------------------------------------------------------------------------------- /dist/18.81a1401f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/18.81a1401f.jpg -------------------------------------------------------------------------------- /dist/19.6d803788.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/19.6d803788.jpg -------------------------------------------------------------------------------- /dist/2.3ca6bb44.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/2.3ca6bb44.jpg -------------------------------------------------------------------------------- /dist/20.b400b781.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/20.b400b781.jpg -------------------------------------------------------------------------------- /dist/21.153c3a00.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/21.153c3a00.jpg -------------------------------------------------------------------------------- /dist/22.787cf170.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/22.787cf170.jpg -------------------------------------------------------------------------------- /dist/23.486b8c96.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/23.486b8c96.jpg -------------------------------------------------------------------------------- /dist/24.fff42ead.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/24.fff42ead.jpg -------------------------------------------------------------------------------- /dist/25.4550eb4f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/25.4550eb4f.jpg -------------------------------------------------------------------------------- /dist/26.2e93c17c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/26.2e93c17c.jpg -------------------------------------------------------------------------------- /dist/27.4a259712.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/27.4a259712.jpg -------------------------------------------------------------------------------- /dist/28.1b075856.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/28.1b075856.jpg -------------------------------------------------------------------------------- /dist/29.474079f1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/29.474079f1.jpg -------------------------------------------------------------------------------- /dist/3.a433b89d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/3.a433b89d.jpg -------------------------------------------------------------------------------- /dist/30.e673968d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/30.e673968d.jpg -------------------------------------------------------------------------------- /dist/31.dfbd55a8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/31.dfbd55a8.jpg -------------------------------------------------------------------------------- /dist/32.d054f62f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/32.d054f62f.jpg -------------------------------------------------------------------------------- /dist/33.7058d352.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/33.7058d352.jpg -------------------------------------------------------------------------------- /dist/34.f8e0a6a3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/34.f8e0a6a3.jpg -------------------------------------------------------------------------------- /dist/35.e3312292.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/35.e3312292.jpg -------------------------------------------------------------------------------- /dist/36.0448c5b0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/36.0448c5b0.jpg -------------------------------------------------------------------------------- /dist/37.49a0780f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/37.49a0780f.jpg -------------------------------------------------------------------------------- /dist/38.d80dd7b6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/38.d80dd7b6.jpg -------------------------------------------------------------------------------- /dist/39.f6a22a1b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/39.f6a22a1b.jpg -------------------------------------------------------------------------------- /dist/4.c6d96be5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/4.c6d96be5.jpg -------------------------------------------------------------------------------- /dist/40.9f6d9012.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/40.9f6d9012.jpg -------------------------------------------------------------------------------- /dist/5.689b68fd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/5.689b68fd.jpg -------------------------------------------------------------------------------- /dist/6.e96dcfff.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/6.e96dcfff.jpg -------------------------------------------------------------------------------- /dist/7.2d66e3ed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/7.2d66e3ed.jpg -------------------------------------------------------------------------------- /dist/8.f4323fe0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/8.f4323fe0.jpg -------------------------------------------------------------------------------- /dist/9.c9233dac.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/9.c9233dac.jpg -------------------------------------------------------------------------------- /dist/base.98fd6c19.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 15px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #000; 14 | --color-bg: #D5D7CE; 15 | --color-link: #000; 16 | --color-link-hover: #000; 17 | --color-menuItem-hover: #e63811; 18 | color: var(--color-text); 19 | background-color: var(--color-bg); 20 | font-family: soleil, sans-serif; 21 | -webkit-font-smoothing: antialiased; 22 | -moz-osx-font-smoothing: grayscale; 23 | --cursor-stroke: #000; 24 | --cursor-fill: none; 25 | --cursor-stroke-width: 1px; 26 | } 27 | 28 | /* Page Loader */ 29 | .js .loading::before, 30 | .js .loading::after { 31 | content: ''; 32 | position: fixed; 33 | z-index: 1000; 34 | } 35 | 36 | .js .loading::before { 37 | top: 0; 38 | left: 0; 39 | width: 100%; 40 | height: 100%; 41 | background: var(--color-bg); 42 | } 43 | 44 | .js .loading::after { 45 | top: 50%; 46 | left: 50%; 47 | width: 60px; 48 | height: 60px; 49 | margin: -30px 0 0 -30px; 50 | border-radius: 50%; 51 | opacity: 0.4; 52 | background: var(--color-link); 53 | animation: loaderAnim 0.7s linear infinite alternate forwards; 54 | 55 | } 56 | 57 | @keyframes loaderAnim { 58 | to { 59 | opacity: 1; 60 | transform: scale3d(0.5,0.5,1); 61 | } 62 | } 63 | 64 | a { 65 | text-decoration: none; 66 | color: var(--color-link); 67 | outline: none; 68 | } 69 | 70 | a:hover, 71 | a:focus { 72 | color: var(--color-link-hover); 73 | outline: none; 74 | } 75 | 76 | main { 77 | min-height: 100vh; 78 | padding: 1.5rem 3rem; 79 | display: grid; 80 | grid-template-rows: auto 1fr auto; 81 | grid-auto-columns: 100%; 82 | grid-template-areas: 'header' 83 | 'content' 84 | 'footer'; 85 | align-items: center; 86 | grid-row-gap: 6rem; 87 | overflow: hidden; 88 | } 89 | 90 | .frame { 91 | text-align: center; 92 | position: relative; 93 | z-index: 1000; 94 | } 95 | 96 | .frame--header { 97 | grid-area: header; 98 | } 99 | 100 | .frame--footer { 101 | grid-area: footer; 102 | } 103 | 104 | .frame a { 105 | text-decoration: underline; 106 | } 107 | 108 | .frame a:hover, 109 | .frame a:focus { 110 | text-decoration: none; 111 | } 112 | 113 | .frame__title { 114 | font-size: 1rem; 115 | margin: 0 0 1rem; 116 | font-weight: normal; 117 | color: #e63811; 118 | } 119 | 120 | .frame__links { 121 | display: inline; 122 | } 123 | 124 | .frame__links a:not(:last-child) { 125 | margin-right: 1rem; 126 | } 127 | 128 | .frame__menu { 129 | font: inherit; 130 | background: none; 131 | border: 0; 132 | -webkit-appearance: none; 133 | -moz-appearance: none; 134 | cursor: not-allowed; 135 | } 136 | 137 | .menu { 138 | grid-area: content; 139 | display: flex; 140 | flex-wrap: wrap; 141 | position: relative; 142 | justify-content: flex-start; 143 | align-content: center; 144 | max-width: 1050px; 145 | } 146 | 147 | .menu__item { 148 | font-family: ivypresto-headline, serif; 149 | font-size: 5vw; 150 | font-size: clamp(2rem,8vw,4.75rem); 151 | text-transform: lowercase; 152 | line-height: 1; 153 | cursor: pointer; 154 | margin-right: 2rem; 155 | display: flex; 156 | align-items: flex-start; 157 | flex: none; 158 | position: relative; 159 | } 160 | 161 | .menu__item:hover, 162 | .menu__item:focus { 163 | color: var(--color-menuItem-hover); 164 | } 165 | 166 | .menu__item-inner-wrap { 167 | overflow: hidden; 168 | position: relative; 169 | } 170 | 171 | .menu__item-inner { 172 | display: inline-block; 173 | margin-bottom: 1.5rem; 174 | will-change: transform, opacity; 175 | } 176 | 177 | .menu__item-number { 178 | font-size: 1.5vw; 179 | font-family: soleil, sans-serif; 180 | } 181 | 182 | .hover-reveal { 183 | position: absolute; 184 | z-index: -1; 185 | width: 150px; 186 | height: 200px; 187 | top: 0; 188 | left: 0; 189 | pointer-events: none; 190 | opacity: 0; 191 | will-change: transform; 192 | } 193 | 194 | .hover-reveal__inner { 195 | overflow: hidden; 196 | } 197 | 198 | .hover-reveal__inner, 199 | .hover-reveal__img { 200 | width: 100%; 201 | height: 100%; 202 | position: relative; 203 | will-change: transform; 204 | } 205 | 206 | .hover-reveal__img { 207 | background-size: cover; 208 | background-position: 50% 50%; 209 | transform-origin: 50% 100%; 210 | } 211 | 212 | .cursor { 213 | display: none; 214 | } 215 | 216 | .content-wrap { 217 | grid-area: content; 218 | position: relative; 219 | } 220 | 221 | .content { 222 | height: 0; 223 | overflow: hidden; 224 | position: absolute; 225 | opacity: 0; 226 | top: 0; 227 | pointer-events: none; 228 | } 229 | 230 | .content--current { 231 | height: auto; 232 | overflow: visible; 233 | position: relative; 234 | opacity: 1; 235 | pointer-events: auto; 236 | } 237 | 238 | .content__title { 239 | display: flex; 240 | align-items: flex-start; 241 | font-weight: normal; 242 | line-height: 1; 243 | margin: 30px 0 5vh 0; 244 | } 245 | 246 | .content__title-wrap { 247 | overflow: hidden; 248 | position: relative; 249 | } 250 | 251 | .content__title-inner { 252 | display: block; 253 | line-height: 1.3; 254 | font-family: ivypresto-headline, serif; 255 | font-size: 5vw; 256 | font-size: clamp(3rem,9vw,6rem); 257 | text-transform: lowercase; 258 | } 259 | 260 | .content__title-number { 261 | margin-top: 1rem; 262 | font-size: 1.5vw; 263 | font-size: clamp(1rem,1.5vw,1.75rem); 264 | font-family: soleil, sans-serif; 265 | } 266 | 267 | .gallery { 268 | display: grid; 269 | grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 270 | grid-gap: 2.5rem; 271 | } 272 | 273 | .gallery__item { 274 | flex: none; 275 | margin: 0; 276 | } 277 | 278 | .gallery__item-img { 279 | width: 100%; 280 | overflow: hidden; 281 | position: relative; 282 | will-change: transform; 283 | } 284 | 285 | .gallery__item-imginner { 286 | background-size: cover; 287 | background-position: 50% 0; 288 | width: 100%; 289 | padding-bottom: 151%; 290 | will-change: transform; 291 | } 292 | 293 | .gallery__item-caption { 294 | display: grid; 295 | grid-template-areas: 'caption-title caption-more' 'caption-meta caption-meta'; 296 | } 297 | 298 | .gallery__item-title { 299 | line-height: 1; 300 | font-family: ivypresto-headline, serif; 301 | font-size: 1.5rem; 302 | text-transform: lowercase; 303 | font-weight: normal; 304 | grid-area: caption-title; 305 | margin: 1rem 0; 306 | } 307 | 308 | .gallery__item-meta { 309 | margin: 0; 310 | grid-area: caption-meta; 311 | } 312 | 313 | .gallery__item-more { 314 | grid-area: caption-more; 315 | align-self: center; 316 | justify-self: end; 317 | -moz-appearance: none; 318 | -webkit-appearance: none; 319 | border: 0; 320 | padding: 0; 321 | margin: 0; 322 | background: none; 323 | cursor: pointer; 324 | position: relative; 325 | } 326 | 327 | .gallery__item-more::after { 328 | content: ''; 329 | position: absolute; 330 | width: 300%; 331 | height: 200%; 332 | left: -100%; 333 | top: -50%; 334 | } 335 | 336 | .content__title-inner, 337 | .content__title-number, 338 | .gallery__item-imginner, 339 | .gallery__item-title, 340 | .gallery__item-meta, 341 | .gallery__item-more { 342 | will-change: transform, opacity; 343 | } 344 | 345 | .gallery__item-more:focus, 346 | .gallery__item-more:hover { 347 | opacity: 0.7; 348 | outline: none; 349 | } 350 | 351 | .back { 352 | position: absolute; 353 | background: none; 354 | border: 0; 355 | padding: 0; 356 | margin: 0; 357 | top: 0; 358 | left: 0; 359 | opacity: 0; 360 | pointer-events: none; 361 | fill: #afb1a8; 362 | } 363 | 364 | .back:hover, 365 | .back:focus { 366 | fill: var(--color-menuItem-hover); 367 | outline: none; 368 | } 369 | 370 | @media screen and (min-width: 53em) { 371 | html, body { 372 | height: 100vh; 373 | overflow: hidden; 374 | } 375 | main { 376 | grid-row-gap: 0; 377 | } 378 | .frame { 379 | text-align: left; 380 | display: grid; 381 | align-content: space-between; 382 | width: 100%; 383 | grid-template-columns: auto auto 1fr; 384 | } 385 | .frame--header { 386 | grid-template-areas: 'title links menu'; 387 | } 388 | .frame--footer { 389 | grid-template-areas: 'author ... credits'; 390 | } 391 | .frame__title { 392 | grid-area: title; 393 | margin: 0; 394 | } 395 | .frame__links { 396 | grid-area: links; 397 | padding: 0; 398 | margin-left: 10vw; 399 | justify-self: end; 400 | } 401 | .frame__author { 402 | align-self: end; 403 | grid-area: author; 404 | } 405 | .frame__menu { 406 | justify-self: end; 407 | align-self: start; 408 | grid-area: menu; 409 | display: inline-block; 410 | } 411 | .frame__credits { 412 | justify-self: end; 413 | grid-area: credits; 414 | color: #e63811; 415 | margin: 0; 416 | } 417 | .hover-reveal { 418 | width: 300px; 419 | height: 400px; 420 | } 421 | .gallery { 422 | grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); 423 | grid-auto-columns: 175px; 424 | grid-auto-flow: column; 425 | grid-template-rows: auto; 426 | } 427 | } 428 | 429 | @media (any-pointer: fine) { 430 | .cursor { 431 | position: fixed; 432 | top: 0; 433 | left: 0; 434 | display: block; 435 | pointer-events: none; 436 | z-index: 9999; 437 | } 438 | .cursor__inner { 439 | fill: var(--cursor-fill); 440 | stroke: var(--cursor-stroke); 441 | stroke-width: var(--cursor-stroke-width); 442 | opacity: 1; 443 | } 444 | .no-js .cursor { 445 | display: none; 446 | } 447 | } 448 | -------------------------------------------------------------------------------- /dist/favicon.26242483.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/dist/favicon.26242483.ico -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Inline Menu Layout with Page Animation | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 24 | 25 | 26 | 27 |
28 |
29 |

Inline Menu Layout

30 |
31 | Previous demo 32 | Article 33 | GitHub 34 |
35 | 36 |
37 | 51 |
52 |
53 |

54 | sirens 55 | (4) 56 |

57 |
58 |
59 |
60 |
61 |
62 |
63 |

Girl in pink

64 |

2016, Paris

65 | 66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |

Overdose

74 |

2015, Bologna

75 | 76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |

Premiere

84 |

2014, Brno

85 | 86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |

face paint

94 |

2011, Copenhagen

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

Recursive

104 |

2010, Berlin

105 | 106 |
107 |
108 |
109 |
110 |
111 |

112 | convoys 113 | (4) 114 |

115 |
116 |
117 |
118 |
119 |
120 |
121 |

Fantasia

122 |

2015, Rome

123 | 124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |

Greenery

132 |

2016, Berlin

133 | 134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |

Freaky

142 |

2017, Davos

143 | 144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |

Shannon

152 |

2018, Sydney

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

160 | screens 161 | (3) 162 |

163 |
164 |
165 |
166 |
167 |
168 |
169 |

Big Ben

170 |

2013, London

171 | 172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |

Cranky

180 |

2014, Budapest

181 | 182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |

Love Horse

190 |

2015, Belgrade

191 | 192 |
193 |
194 |
195 |
196 |
197 |

198 | alloy 199 | (4) 200 |

201 |
202 |
203 |
204 |
205 |
206 |
207 |

Lady Brown

208 |

2001, Helsinki

209 | 210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |

King Candy

218 |

2003, Lisbon

219 | 220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |

The Book

228 |

2005, Toronto

229 | 230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |

Corner

238 |

2006, Dublin

239 | 240 |
241 |
242 |
243 |
244 |
245 |

246 | tv 247 | (4) 248 |

249 |
250 |
251 |
252 |
253 |
254 |
255 |

Fun fun fun

256 |

2014, Moscow

257 | 258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |

Lovelife

266 |

2015, Shanghai

267 | 268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |

Woodland

276 |

2016, Vienna

277 | 278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |

No where

286 |

2017, Bern

287 | 288 |
289 |
290 |
291 |
292 |
293 |

294 | lunatic 295 | (5) 296 |

297 |
298 |
299 |
300 |
301 |
302 |
303 |

Fantastic

304 |

2013, Bangkok

305 | 306 |
307 |
308 |
309 |
310 |
311 |
312 |
313 |

Cutting Me

314 |

2014, Florence

315 | 316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |

Houseparty

324 |

2015, Ljubljana

325 | 326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |

Gnatus

334 |

2016, Helsinki

335 | 336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |

What?

344 |

2017, Kiev

345 | 346 |
347 |
348 |
349 |
350 |
351 |

352 | irresistible 353 | (6) 354 |

355 |
356 |
357 |
358 |
359 |
360 |
361 |

Handsome

362 |

1998, Cologne

363 | 364 |
365 |
366 |
367 |
368 |
369 |
370 |
371 |

Quo Vadis?

372 |

1999, Rome

373 | 374 |
375 |
376 |
377 |
378 |
379 |
380 |
381 |

Prime Time

382 |

2000, Pasadena

383 | 384 |
385 |
386 |
387 |
388 |
389 |
390 |
391 |

Doom

392 |

2001, Dublin

393 | 394 |
395 |
396 |
397 |
398 |
399 |
400 |
401 |

Algebra

402 |

2002, Bukarest

403 | 404 |
405 |
406 |
407 |
408 |
409 |
410 |
411 |

Freedom

412 |

2003, Sarajevo

413 | 414 |
415 |
416 |
417 |
418 |
419 |

420 | frontiers 421 | (3) 422 |

423 |
424 |
425 |
426 |
427 |
428 |
429 |

Apples

430 |

2019, Porto

431 | 432 |
433 |
434 |
435 |
436 |
437 |
438 |
439 |

Overdose

440 |

2020, Barcelona

441 | 442 |
443 |
444 |
445 |
446 |
447 |
448 |
449 |

Removed

450 |

2021, Osaka

451 | 452 |
453 |
454 |
455 |
456 |
457 |

458 | barrage 459 | (4) 460 |

461 |
462 |
463 |
464 |
465 |
466 |
467 |

Hard Candy

468 |

2021, Agra

469 | 470 |
471 |
472 |
473 |
474 |
475 |
476 |
477 |

Longing

478 |

2022, Las Vegas

479 | 480 |
481 |
482 |
483 |
484 |
485 |
486 |
487 |

Free Fall

488 |

2023, Pattaya

489 | 490 |
491 |
492 |
493 |
494 |
495 |
496 |
497 |

Cracking

498 |

2024, Seoul

499 | 500 |
501 |
502 |
503 |
504 |
505 |

506 | moet 507 | (5) 508 |

509 |
510 |
511 |
512 |
513 |
514 |
515 |

Equals

516 |

2015, Tokyo

517 | 518 |
519 |
520 |
521 |
522 |
523 |
524 |
525 |

Forced

526 |

2016, Melbourne

527 | 528 |
529 |
530 |
531 |
532 |
533 |
534 |
535 |

Shackles

536 |

2017, London

537 | 538 |
539 |
540 |
541 |
542 |
543 |
544 |
545 |

Unknown

546 |

2018, Jerusalem

547 | 548 |
549 |
550 |
551 |
552 |
553 |
554 |
555 |

Holy Spirit

556 |

2019, Paris

557 | 558 |
559 |
560 |
561 |
562 |
563 |

564 | rubber 565 | (3) 566 |

567 |
568 |
569 |
570 |
571 |
572 |
573 |

Just You

574 |

2010, Detroit

575 | 576 |
577 |
578 |
579 |
580 |
581 |
582 |
583 |

Splitting

584 |

2011, Milan

585 | 586 |
587 |
588 |
589 |
590 |
591 |
592 |
593 |

Handy Hat

594 |

2012, Jakarta

595 | 596 |
597 |
598 |
599 |
600 |
601 |

602 | handy 603 | (4) 604 |

605 |
606 |
607 |
608 |
609 |
610 |
611 |

Hallo Friend

612 |

2011, Frankfurt

613 | 614 |
615 |
616 |
617 |
618 |
619 |
620 |
621 |

Middle

622 |

2012, Liverpool

623 | 624 |
625 |
626 |
627 |
628 |
629 |
630 |
631 |

Location

632 |

2013, Denver

633 | 634 |
635 |
636 |
637 |
638 |
639 |
640 |
641 |

Heavy Womb

642 |

2014, Manchester

643 | 644 |
645 |
646 |
647 |
648 | 649 |
650 |
651 | @codrops 652 |

Inspired by this Dribbble shot

653 |
654 |
655 | 656 | 657 | 658 | 659 | 660 | 661 | -------------------------------------------------------------------------------- /dist/js.00a46daa.css: -------------------------------------------------------------------------------- 1 | /* Recommended styles for Splitting */ 2 | .splitting .word, 3 | .splitting .char { 4 | display: inline-block; 5 | } 6 | 7 | /* Psuedo-element chars */ 8 | .splitting .char { 9 | position: relative; 10 | } 11 | 12 | /** 13 | * Populate the psuedo elements with the character to allow for expanded effects 14 | * Set to `display: none` by default; just add `display: block` when you want 15 | * to use the psuedo elements 16 | */ 17 | .splitting .char::before, 18 | .splitting .char::after { 19 | content: attr(data-char); 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | visibility: hidden; 24 | transition: inherit; 25 | user-select: none; 26 | } 27 | 28 | /* Expanded CSS Variables */ 29 | 30 | .splitting { 31 | /* The center word index */ 32 | --word-center: calc((var(--word-total) - 1) / 2); 33 | 34 | /* The center character index */ 35 | --char-center: calc((var(--char-total) - 1) / 2); 36 | 37 | /* The center character index */ 38 | --line-center: calc((var(--line-total) - 1) / 2); 39 | } 40 | 41 | .splitting .word { 42 | /* Pecent (0-1) of the word's position */ 43 | --word-percent: calc(var(--word-index) / var(--word-total)); 44 | 45 | /* Pecent (0-1) of the line's position */ 46 | --line-percent: calc(var(--line-index) / var(--line-total)); 47 | } 48 | 49 | .splitting .char { 50 | /* Percent (0-1) of the char's position */ 51 | --char-percent: calc(var(--char-index) / var(--char-total)); 52 | 53 | /* Offset from center, positive & negative */ 54 | --char-offset: calc(var(--char-index) - var(--char-center)); 55 | 56 | /* Absolute distance from center, only positive */ 57 | --distance: calc( 58 | (var(--char-offset) * var(--char-offset)) / var(--char-center) 59 | ); 60 | 61 | /* Distance from center where -1 is the far left, 0 is center, 1 is far right */ 62 | --distance-sine: calc(var(--char-offset) / var(--char-center)); 63 | 64 | /* Distance from center where 1 is far left/far right, 0 is center */ 65 | --distance-percent: calc((var(--distance) / var(--char-center))); 66 | } 67 | .splitting.cells img { width: 100%; display: block; } 68 | 69 | @supports ( display: grid ) { 70 | .splitting.cells { 71 | position: relative; 72 | overflow: hidden; 73 | background-size: cover; 74 | visibility: hidden; 75 | } 76 | 77 | .splitting .cell-grid { 78 | background: inherit; 79 | position: absolute; 80 | top: 0; 81 | left: 0; 82 | width: 100%; 83 | height: 100%; 84 | display: grid; 85 | grid-template: repeat( var(--row-total), 1fr ) / repeat( var(--col-total), 1fr ); 86 | } 87 | 88 | .splitting .cell { 89 | background: inherit; 90 | position: relative; 91 | overflow: hidden; 92 | } 93 | 94 | .splitting .cell-inner { 95 | background: inherit; 96 | position: absolute; 97 | visibility: visible; 98 | /* Size to fit the whole container size */ 99 | width: calc(100% * var(--col-total)); 100 | height: calc(100% * var(--row-total)); 101 | /* Position properly */ 102 | left: calc(-100% * var(--col-index)); 103 | top: calc(-100% * var(--row-index)); 104 | } 105 | 106 | /* Helper variables for advanced effects */ 107 | .splitting .cell { 108 | --center-x: calc((var(--col-total) - 1) / 2); 109 | --center-y: calc((var(--row-total) - 1) / 2); 110 | 111 | /* Offset from center, positive & negative */ 112 | --offset-x: calc(var(--col-index) - var(--center-x)); 113 | --offset-y: calc(var(--row-index) - var(--center-y)); 114 | 115 | /* Absolute distance from center, only positive */ 116 | --distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) ); 117 | 118 | /* Absolute distance from center, only positive */ 119 | --distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) ); 120 | } 121 | } 122 | 123 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "InlineMenuLayout", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "parcel src/index.html --open", 8 | "clean": "rm -rf dist/*", 9 | "build:parcel": "parcel build src/index.html --no-content-hash --no-minify --no-source-maps --public-url ./", 10 | "build": "npm run clean && npm run build:parcel" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git://github.com/codrops/[NAME].git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "[HOMEPAGE]", 20 | "bugs": { 21 | "url": "https://github.com/codrops/[NAME]/issues" 22 | }, 23 | "dependencies": { 24 | "gsap": "^3.5.1", 25 | "imagesloaded": "^4.1.4", 26 | "parcel-bundler": "^1.12.4", 27 | "splitting": "^1.0.6" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 15px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #000; 14 | --color-bg: #D5D7CE; 15 | --color-link: #000; 16 | --color-link-hover: #000; 17 | --color-menuItem-hover: #e63811; 18 | color: var(--color-text); 19 | background-color: var(--color-bg); 20 | font-family: soleil, sans-serif; 21 | -webkit-font-smoothing: antialiased; 22 | -moz-osx-font-smoothing: grayscale; 23 | --cursor-stroke: #000; 24 | --cursor-fill: none; 25 | --cursor-stroke-width: 1px; 26 | } 27 | 28 | /* Page Loader */ 29 | .js .loading::before, 30 | .js .loading::after { 31 | content: ''; 32 | position: fixed; 33 | z-index: 1000; 34 | } 35 | 36 | .js .loading::before { 37 | top: 0; 38 | left: 0; 39 | width: 100%; 40 | height: 100%; 41 | background: var(--color-bg); 42 | } 43 | 44 | .js .loading::after { 45 | top: 50%; 46 | left: 50%; 47 | width: 60px; 48 | height: 60px; 49 | margin: -30px 0 0 -30px; 50 | border-radius: 50%; 51 | opacity: 0.4; 52 | background: var(--color-link); 53 | animation: loaderAnim 0.7s linear infinite alternate forwards; 54 | 55 | } 56 | 57 | @keyframes loaderAnim { 58 | to { 59 | opacity: 1; 60 | transform: scale3d(0.5,0.5,1); 61 | } 62 | } 63 | 64 | a { 65 | text-decoration: none; 66 | color: var(--color-link); 67 | outline: none; 68 | } 69 | 70 | a:hover, 71 | a:focus { 72 | color: var(--color-link-hover); 73 | outline: none; 74 | } 75 | 76 | main { 77 | min-height: 100vh; 78 | padding: 1.5rem 3rem; 79 | display: grid; 80 | grid-template-rows: auto 1fr auto; 81 | grid-auto-columns: 100%; 82 | grid-template-areas: 'header' 83 | 'content' 84 | 'footer'; 85 | align-items: center; 86 | grid-row-gap: 6rem; 87 | overflow: hidden; 88 | } 89 | 90 | .frame { 91 | text-align: center; 92 | position: relative; 93 | z-index: 1000; 94 | } 95 | 96 | .frame--header { 97 | grid-area: header; 98 | } 99 | 100 | .frame--footer { 101 | grid-area: footer; 102 | } 103 | 104 | .frame a { 105 | text-decoration: underline; 106 | } 107 | 108 | .frame a:hover, 109 | .frame a:focus { 110 | text-decoration: none; 111 | } 112 | 113 | .frame__title { 114 | font-size: 1rem; 115 | margin: 0 0 1rem; 116 | font-weight: normal; 117 | color: #e63811; 118 | } 119 | 120 | .frame__links { 121 | display: inline; 122 | } 123 | 124 | .frame__links a:not(:last-child) { 125 | margin-right: 1rem; 126 | } 127 | 128 | .frame__menu { 129 | font: inherit; 130 | background: none; 131 | border: 0; 132 | -webkit-appearance: none; 133 | -moz-appearance: none; 134 | cursor: not-allowed; 135 | } 136 | 137 | .menu { 138 | grid-area: content; 139 | display: flex; 140 | flex-wrap: wrap; 141 | position: relative; 142 | justify-content: flex-start; 143 | align-content: center; 144 | max-width: 1050px; 145 | } 146 | 147 | .menu__item { 148 | font-family: ivypresto-headline, serif; 149 | font-size: 5vw; 150 | font-size: clamp(2rem,8vw,4.75rem); 151 | text-transform: lowercase; 152 | line-height: 1; 153 | cursor: pointer; 154 | margin-right: 2rem; 155 | display: flex; 156 | align-items: flex-start; 157 | flex: none; 158 | position: relative; 159 | } 160 | 161 | .menu__item:hover, 162 | .menu__item:focus { 163 | color: var(--color-menuItem-hover); 164 | } 165 | 166 | .menu__item-inner-wrap { 167 | overflow: hidden; 168 | position: relative; 169 | } 170 | 171 | .menu__item-inner { 172 | display: inline-block; 173 | margin-bottom: 1.5rem; 174 | will-change: transform, opacity; 175 | } 176 | 177 | .menu__item-number { 178 | font-size: 1.5vw; 179 | font-family: soleil, sans-serif; 180 | } 181 | 182 | .hover-reveal { 183 | position: absolute; 184 | z-index: -1; 185 | width: 150px; 186 | height: 200px; 187 | top: 0; 188 | left: 0; 189 | pointer-events: none; 190 | opacity: 0; 191 | will-change: transform; 192 | } 193 | 194 | .hover-reveal__inner { 195 | overflow: hidden; 196 | } 197 | 198 | .hover-reveal__inner, 199 | .hover-reveal__img { 200 | width: 100%; 201 | height: 100%; 202 | position: relative; 203 | will-change: transform; 204 | } 205 | 206 | .hover-reveal__img { 207 | background-size: cover; 208 | background-position: 50% 50%; 209 | transform-origin: 50% 100%; 210 | } 211 | 212 | .cursor { 213 | display: none; 214 | } 215 | 216 | .content-wrap { 217 | grid-area: content; 218 | position: relative; 219 | } 220 | 221 | .content { 222 | height: 0; 223 | overflow: hidden; 224 | position: absolute; 225 | opacity: 0; 226 | top: 0; 227 | pointer-events: none; 228 | } 229 | 230 | .content--current { 231 | height: auto; 232 | overflow: visible; 233 | position: relative; 234 | opacity: 1; 235 | pointer-events: auto; 236 | } 237 | 238 | .content__title { 239 | display: flex; 240 | align-items: flex-start; 241 | font-weight: normal; 242 | line-height: 1; 243 | margin: 30px 0 5vh 0; 244 | } 245 | 246 | .content__title-wrap { 247 | overflow: hidden; 248 | position: relative; 249 | } 250 | 251 | .content__title-inner { 252 | display: block; 253 | line-height: 1.3; 254 | font-family: ivypresto-headline, serif; 255 | font-size: 5vw; 256 | font-size: clamp(3rem,9vw,6rem); 257 | text-transform: lowercase; 258 | } 259 | 260 | .content__title-number { 261 | margin-top: 1rem; 262 | font-size: 1.5vw; 263 | font-size: clamp(1rem,1.5vw,1.75rem); 264 | font-family: soleil, sans-serif; 265 | } 266 | 267 | .gallery { 268 | display: grid; 269 | grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 270 | grid-gap: 2.5rem; 271 | } 272 | 273 | .gallery__item { 274 | flex: none; 275 | margin: 0; 276 | } 277 | 278 | .gallery__item-img { 279 | width: 100%; 280 | overflow: hidden; 281 | position: relative; 282 | will-change: transform; 283 | } 284 | 285 | .gallery__item-imginner { 286 | background-size: cover; 287 | background-position: 50% 0; 288 | width: 100%; 289 | padding-bottom: 151%; 290 | will-change: transform; 291 | } 292 | 293 | .gallery__item-caption { 294 | display: grid; 295 | grid-template-areas: 'caption-title caption-more' 'caption-meta caption-meta'; 296 | } 297 | 298 | .gallery__item-title { 299 | line-height: 1; 300 | font-family: ivypresto-headline, serif; 301 | font-size: 1.5rem; 302 | text-transform: lowercase; 303 | font-weight: normal; 304 | grid-area: caption-title; 305 | margin: 1rem 0; 306 | } 307 | 308 | .gallery__item-meta { 309 | margin: 0; 310 | grid-area: caption-meta; 311 | } 312 | 313 | .gallery__item-more { 314 | grid-area: caption-more; 315 | align-self: center; 316 | justify-self: end; 317 | -moz-appearance: none; 318 | -webkit-appearance: none; 319 | border: 0; 320 | padding: 0; 321 | margin: 0; 322 | background: none; 323 | cursor: pointer; 324 | position: relative; 325 | } 326 | 327 | .gallery__item-more::after { 328 | content: ''; 329 | position: absolute; 330 | width: 300%; 331 | height: 200%; 332 | left: -100%; 333 | top: -50%; 334 | } 335 | 336 | .content__title-inner, 337 | .content__title-number, 338 | .gallery__item-imginner, 339 | .gallery__item-title, 340 | .gallery__item-meta, 341 | .gallery__item-more { 342 | will-change: transform, opacity; 343 | } 344 | 345 | .gallery__item-more:focus, 346 | .gallery__item-more:hover { 347 | opacity: 0.7; 348 | outline: none; 349 | } 350 | 351 | .back { 352 | position: absolute; 353 | background: none; 354 | border: 0; 355 | padding: 0; 356 | margin: 0; 357 | top: 0; 358 | left: 0; 359 | opacity: 0; 360 | pointer-events: none; 361 | fill: #afb1a8; 362 | } 363 | 364 | .back:hover, 365 | .back:focus { 366 | fill: var(--color-menuItem-hover); 367 | outline: none; 368 | } 369 | 370 | @media screen and (min-width: 53em) { 371 | html, body { 372 | height: 100vh; 373 | overflow: hidden; 374 | } 375 | main { 376 | grid-row-gap: 0; 377 | } 378 | .frame { 379 | text-align: left; 380 | display: grid; 381 | align-content: space-between; 382 | width: 100%; 383 | grid-template-columns: auto auto 1fr; 384 | } 385 | .frame--header { 386 | grid-template-areas: 'title links menu'; 387 | } 388 | .frame--footer { 389 | grid-template-areas: 'author ... credits'; 390 | } 391 | .frame__title { 392 | grid-area: title; 393 | margin: 0; 394 | } 395 | .frame__links { 396 | grid-area: links; 397 | padding: 0; 398 | margin-left: 10vw; 399 | justify-self: end; 400 | } 401 | .frame__author { 402 | align-self: end; 403 | grid-area: author; 404 | } 405 | .frame__menu { 406 | justify-self: end; 407 | align-self: start; 408 | grid-area: menu; 409 | display: inline-block; 410 | } 411 | .frame__credits { 412 | justify-self: end; 413 | grid-area: credits; 414 | color: #e63811; 415 | margin: 0; 416 | } 417 | .hover-reveal { 418 | width: 300px; 419 | height: 400px; 420 | } 421 | .gallery { 422 | grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); 423 | grid-auto-columns: 175px; 424 | grid-auto-flow: column; 425 | grid-template-rows: auto; 426 | } 427 | } 428 | 429 | @media (any-pointer: fine) { 430 | .cursor { 431 | position: fixed; 432 | top: 0; 433 | left: 0; 434 | display: block; 435 | pointer-events: none; 436 | z-index: 9999; 437 | } 438 | .cursor__inner { 439 | fill: var(--cursor-fill); 440 | stroke: var(--cursor-stroke); 441 | stroke-width: var(--cursor-stroke-width); 442 | opacity: 1; 443 | } 444 | .no-js .cursor { 445 | display: none; 446 | } 447 | } 448 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/favicon.ico -------------------------------------------------------------------------------- /src/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/1.jpg -------------------------------------------------------------------------------- /src/img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/10.jpg -------------------------------------------------------------------------------- /src/img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/11.jpg -------------------------------------------------------------------------------- /src/img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/12.jpg -------------------------------------------------------------------------------- /src/img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/13.jpg -------------------------------------------------------------------------------- /src/img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/14.jpg -------------------------------------------------------------------------------- /src/img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/15.jpg -------------------------------------------------------------------------------- /src/img/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/16.jpg -------------------------------------------------------------------------------- /src/img/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/17.jpg -------------------------------------------------------------------------------- /src/img/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/18.jpg -------------------------------------------------------------------------------- /src/img/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/19.jpg -------------------------------------------------------------------------------- /src/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/2.jpg -------------------------------------------------------------------------------- /src/img/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/20.jpg -------------------------------------------------------------------------------- /src/img/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/21.jpg -------------------------------------------------------------------------------- /src/img/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/22.jpg -------------------------------------------------------------------------------- /src/img/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/23.jpg -------------------------------------------------------------------------------- /src/img/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/24.jpg -------------------------------------------------------------------------------- /src/img/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/25.jpg -------------------------------------------------------------------------------- /src/img/26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/26.jpg -------------------------------------------------------------------------------- /src/img/27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/27.jpg -------------------------------------------------------------------------------- /src/img/28.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/28.jpg -------------------------------------------------------------------------------- /src/img/29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/29.jpg -------------------------------------------------------------------------------- /src/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/3.jpg -------------------------------------------------------------------------------- /src/img/30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/30.jpg -------------------------------------------------------------------------------- /src/img/31.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/31.jpg -------------------------------------------------------------------------------- /src/img/32.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/32.jpg -------------------------------------------------------------------------------- /src/img/33.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/33.jpg -------------------------------------------------------------------------------- /src/img/34.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/34.jpg -------------------------------------------------------------------------------- /src/img/35.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/35.jpg -------------------------------------------------------------------------------- /src/img/36.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/36.jpg -------------------------------------------------------------------------------- /src/img/37.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/37.jpg -------------------------------------------------------------------------------- /src/img/38.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/38.jpg -------------------------------------------------------------------------------- /src/img/39.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/39.jpg -------------------------------------------------------------------------------- /src/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/4.jpg -------------------------------------------------------------------------------- /src/img/40.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/40.jpg -------------------------------------------------------------------------------- /src/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/5.jpg -------------------------------------------------------------------------------- /src/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/6.jpg -------------------------------------------------------------------------------- /src/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/7.jpg -------------------------------------------------------------------------------- /src/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/8.jpg -------------------------------------------------------------------------------- /src/img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineMenuLayout/ccfb1d128002efe53c83703aaa5fbb438036259f/src/img/9.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Inline Menu Layout with Page Animation | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 20 | 21 | 22 | 23 |
24 |
25 |

Inline Menu Layout

26 |
27 | Previous demo 28 | Article 29 | GitHub 30 |
31 | 32 |
33 | 47 |
48 |
49 |

50 | sirens 51 | (4) 52 |

53 |
54 |
55 |
56 |
57 |
58 |
59 |

Girl in pink

60 |

2016, Paris

61 | 62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |

Overdose

70 |

2015, Bologna

71 | 72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |

Premiere

80 |

2014, Brno

81 | 82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |

face paint

90 |

2011, Copenhagen

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

Recursive

100 |

2010, Berlin

101 | 102 |
103 |
104 |
105 |
106 |
107 |

108 | convoys 109 | (4) 110 |

111 |
112 |
113 |
114 |
115 |
116 |
117 |

Fantasia

118 |

2015, Rome

119 | 120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |

Greenery

128 |

2016, Berlin

129 | 130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |

Freaky

138 |

2017, Davos

139 | 140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |

Shannon

148 |

2018, Sydney

149 | 150 |
151 |
152 |
153 |
154 |
155 |

156 | screens 157 | (3) 158 |

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

Big Ben

166 |

2013, London

167 | 168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |

Cranky

176 |

2014, Budapest

177 | 178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |

Love Horse

186 |

2015, Belgrade

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

194 | alloy 195 | (4) 196 |

197 |
198 |
199 |
200 |
201 |
202 |
203 |

Lady Brown

204 |

2001, Helsinki

205 | 206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |

King Candy

214 |

2003, Lisbon

215 | 216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |

The Book

224 |

2005, Toronto

225 | 226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |

Corner

234 |

2006, Dublin

235 | 236 |
237 |
238 |
239 |
240 |
241 |

242 | tv 243 | (4) 244 |

245 |
246 |
247 |
248 |
249 |
250 |
251 |

Fun fun fun

252 |

2014, Moscow

253 | 254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |

Lovelife

262 |

2015, Shanghai

263 | 264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |

Woodland

272 |

2016, Vienna

273 | 274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |

No where

282 |

2017, Bern

283 | 284 |
285 |
286 |
287 |
288 |
289 |

290 | lunatic 291 | (5) 292 |

293 |
294 |
295 |
296 |
297 |
298 |
299 |

Fantastic

300 |

2013, Bangkok

301 | 302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |

Cutting Me

310 |

2014, Florence

311 | 312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |

Houseparty

320 |

2015, Ljubljana

321 | 322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 |

Gnatus

330 |

2016, Helsinki

331 | 332 |
333 |
334 |
335 |
336 |
337 |
338 |
339 |

What?

340 |

2017, Kiev

341 | 342 |
343 |
344 |
345 |
346 |
347 |

348 | irresistible 349 | (6) 350 |

351 |
352 |
353 |
354 |
355 |
356 |
357 |

Handsome

358 |

1998, Cologne

359 | 360 |
361 |
362 |
363 |
364 |
365 |
366 |
367 |

Quo Vadis?

368 |

1999, Rome

369 | 370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 |

Prime Time

378 |

2000, Pasadena

379 | 380 |
381 |
382 |
383 |
384 |
385 |
386 |
387 |

Doom

388 |

2001, Dublin

389 | 390 |
391 |
392 |
393 |
394 |
395 |
396 |
397 |

Algebra

398 |

2002, Bukarest

399 | 400 |
401 |
402 |
403 |
404 |
405 |
406 |
407 |

Freedom

408 |

2003, Sarajevo

409 | 410 |
411 |
412 |
413 |
414 |
415 |

416 | frontiers 417 | (3) 418 |

419 |
420 |
421 |
422 |
423 |
424 |
425 |

Apples

426 |

2019, Porto

427 | 428 |
429 |
430 |
431 |
432 |
433 |
434 |
435 |

Overdose

436 |

2020, Barcelona

437 | 438 |
439 |
440 |
441 |
442 |
443 |
444 |
445 |

Removed

446 |

2021, Osaka

447 | 448 |
449 |
450 |
451 |
452 |
453 |

454 | barrage 455 | (4) 456 |

457 |
458 |
459 |
460 |
461 |
462 |
463 |

Hard Candy

464 |

2021, Agra

465 | 466 |
467 |
468 |
469 |
470 |
471 |
472 |
473 |

Longing

474 |

2022, Las Vegas

475 | 476 |
477 |
478 |
479 |
480 |
481 |
482 |
483 |

Free Fall

484 |

2023, Pattaya

485 | 486 |
487 |
488 |
489 |
490 |
491 |
492 |
493 |

Cracking

494 |

2024, Seoul

495 | 496 |
497 |
498 |
499 |
500 |
501 |

502 | moet 503 | (5) 504 |

505 |
506 |
507 |
508 |
509 |
510 |
511 |

Equals

512 |

2015, Tokyo

513 | 514 |
515 |
516 |
517 |
518 |
519 |
520 |
521 |

Forced

522 |

2016, Melbourne

523 | 524 |
525 |
526 |
527 |
528 |
529 |
530 |
531 |

Shackles

532 |

2017, London

533 | 534 |
535 |
536 |
537 |
538 |
539 |
540 |
541 |

Unknown

542 |

2018, Jerusalem

543 | 544 |
545 |
546 |
547 |
548 |
549 |
550 |
551 |

Holy Spirit

552 |

2019, Paris

553 | 554 |
555 |
556 |
557 |
558 |
559 |

560 | rubber 561 | (3) 562 |

563 |
564 |
565 |
566 |
567 |
568 |
569 |

Just You

570 |

2010, Detroit

571 | 572 |
573 |
574 |
575 |
576 |
577 |
578 |
579 |

Splitting

580 |

2011, Milan

581 | 582 |
583 |
584 |
585 |
586 |
587 |
588 |
589 |

Handy Hat

590 |

2012, Jakarta

591 | 592 |
593 |
594 |
595 |
596 |
597 |

598 | handy 599 | (4) 600 |

601 |
602 |
603 |
604 |
605 |
606 |
607 |

Hallo Friend

608 |

2011, Frankfurt

609 | 610 |
611 |
612 |
613 |
614 |
615 |
616 |
617 |

Middle

618 |

2012, Liverpool

619 | 620 |
621 |
622 |
623 |
624 |
625 |
626 |
627 |

Location

628 |

2013, Denver

629 | 630 |
631 |
632 |
633 |
634 |
635 |
636 |
637 |

Heavy Womb

638 |

2014, Manchester

639 | 640 |
641 |
642 |
643 |
644 | 645 |
646 |
647 | @codrops 648 |

Inspired by this Dribbble shot

649 |
650 |
651 | 652 | 653 | 654 | 655 | 656 | 657 | -------------------------------------------------------------------------------- /src/js/contentItem.js: -------------------------------------------------------------------------------- 1 | import "splitting/dist/splitting.css"; 2 | import "splitting/dist/splitting-cells.css"; 3 | import Splitting from "splitting"; 4 | import { gsap } from 'gsap'; 5 | 6 | export default class ContentItem { 7 | constructor(el) { 8 | this.DOM = {el: el}; 9 | 10 | Splitting(); 11 | 12 | this.DOM.title = this.DOM.el.querySelector('.content__title-inner'); 13 | this.DOM.number = this.DOM.el.querySelector('.content__title-number'); 14 | this.DOM.imgs = [...this.DOM.el.querySelectorAll('.gallery__item-imginner')]; 15 | this.DOM.caption = { 16 | title: this.DOM.el.querySelectorAll('.gallery__item-caption > .gallery__item-title'), 17 | meta: this.DOM.el.querySelectorAll('.gallery__item-caption > .gallery__item-meta'), 18 | more: this.DOM.el.querySelectorAll('.gallery__item-caption > .gallery__item-more') 19 | } 20 | 21 | this.initEvents(); 22 | } 23 | // hover the plus symbol (.gallery__item-more) 24 | initEvents() { 25 | this.DOM.caption.more.forEach((more, pos) => { 26 | const img = this.DOM.imgs[pos]; 27 | const chars = this.DOM.caption.title[pos].querySelectorAll('.char'); 28 | 29 | more.addEventListener('mouseenter', () => { 30 | gsap.killTweensOf([img, chars]); 31 | gsap.timeline({ 32 | defaults: { 33 | duration: 1, 34 | ease: 'expo', 35 | } 36 | }) 37 | .to(img, {scale: 0.95}) 38 | .to(chars, {x: pos => pos*2}, 0); 39 | }); 40 | more.addEventListener('mouseleave', () => { 41 | gsap.killTweensOf([img, chars]); 42 | gsap.timeline({ 43 | defaults: { 44 | duration: 0.5, 45 | ease: 'expo', 46 | } 47 | }) 48 | .to(img, {scale: 1}) 49 | .to(chars, {x: 0}, 0); 50 | }); 51 | }); 52 | } 53 | } -------------------------------------------------------------------------------- /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.2}, 19 | opacity: {previous: 1, current: 1, amt: 0.2} 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; 33 | this.renderedStyles['opacity'].current = 0.3; 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/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages, preloadFonts } from './utils'; 2 | import { preloader } from './preloader'; 3 | import Cursor from './cursor'; 4 | import MenuController from './menuController'; 5 | 6 | // Preload images and fonts 7 | Promise.all([preloader('.menu__item'), preloadImages('.gallery__item-imginner'), preloadFonts('zkq2mjw')]).then(() => { 8 | // Remove loader (loading class) 9 | document.body.classList.remove('loading'); 10 | 11 | // Initialize custom cursor 12 | const cursor = new Cursor(document.querySelector('.cursor')); 13 | 14 | // Initialize the MenuController 15 | new MenuController(document.querySelector('.menu')); 16 | 17 | // Mouse effects on all links and buttons 18 | [...document.querySelectorAll('a, .gallery__item-more, .back')].forEach(link => { 19 | link.addEventListener('mouseenter', () => cursor.enter()); 20 | link.addEventListener('mouseleave', () => cursor.leave()); 21 | }); 22 | }); -------------------------------------------------------------------------------- /src/js/menuController.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | import MenuItem from './menuItem'; 3 | import ContentItem from './contentItem'; 4 | 5 | export default class MenuController { 6 | constructor(menuEl) { 7 | this.DOM = {menu: menuEl}; 8 | // Menu item elements 9 | this.DOM.menuItems = [...this.DOM.menu.querySelectorAll('.menu__item')]; 10 | // Menu item properties that will animate as we move the mouse around the menu 11 | // we will be using interpolation to achieve smooth animations. 12 | // the “previous” and “current” values are the values to interpolate. 13 | // the value applied to the element, this case the image element (this.DOM.reveal) will be a value between these two values at a specific increment. 14 | // the amt is the amount to interpolate. 15 | this.animatableProperties = { 16 | // translationX 17 | tx: {previous: 0, current: 0, amt: 0.08}, 18 | // translationY 19 | ty: {previous: 0, current: 0, amt: 0.08}, 20 | // Rotation angle 21 | rotation: {previous: 0, current: 0, amt: 0.05} 22 | }; 23 | 24 | // Array for the MenuItem instances 25 | this.menuItems = []; 26 | this.DOM.menuItems.forEach(menuItemEl => this.menuItems.push(new MenuItem(menuItemEl, this.animatableProperties))); 27 | 28 | // Array for the ContentItem instances 29 | this.contentItems = []; 30 | [...document.querySelectorAll('.content-wrap .content')].forEach(contentItemEl => this.contentItems.push(new ContentItem(contentItemEl))); 31 | 32 | // "show/back to menu" control 33 | this.DOM.backCtrl = document.querySelector('.back'); 34 | 35 | this.initEvents(); 36 | } 37 | initEvents() { 38 | // click the menu item shows the content elements associated to this item 39 | this.DOM.menuItems.forEach((menuItemEl, position) => { 40 | menuItemEl.addEventListener('click', () => this.onMenuItemClick(position)); 41 | }); 42 | // click the back control shows back the menu 43 | this.DOM.backCtrl.addEventListener('click', () => this.onBackCtrlClick()); 44 | } 45 | // gets the menu item (and its texts and number elements) and content item given a specific position/index 46 | getCurrentData(position) { 47 | return { 48 | menuItem: this.menuItems[position], 49 | // all menu item's texts and numbers 50 | texts: this.menuItems.map(t => t.DOM.inner), 51 | numbers: this.menuItems.map(t => t.DOM.number), 52 | // ...and its contentItem 53 | contentItem: this.contentItems[position] 54 | }; 55 | } 56 | onMenuItemClick(position) { 57 | // save the position of the menu item 58 | this.currentItemIndex = position; 59 | 60 | // get elements for this position 61 | const {menuItem, texts, numbers, contentItem} = this.getCurrentData(position); 62 | 63 | // change pointer events so we can't hover on the menu 64 | this.DOM.menu.style.pointerEvents = 'none'; 65 | menuItem.DOM.el.style.pointerEvents = 'auto'; 66 | menuItem.hideImage().then(() => menuItem.DOM.el.style.pointerEvents = 'none'); 67 | 68 | // animate/hide all the menu items (texts and numbers) 69 | gsap.timeline({ 70 | defaults: {duration: 1, ease: 'expo'} 71 | }) 72 | .addLabel('hideMenu', 0) 73 | // set transform origin value for both the texts and content tile elements 74 | .set([texts, contentItem.DOM.title], {transformOrigin: '50% 100%'}, 'hideMenu') 75 | // set the content elements starting style 76 | .set(contentItem.DOM.title, { 77 | opacity: 0, 78 | y: '101%' 79 | }, 'hideMenu') 80 | .set(contentItem.DOM.number, { 81 | scale: 0 82 | }, 'hideMenu') 83 | .set(contentItem.DOM.imgs, { 84 | y: '101%' 85 | }, 'hideMenu') 86 | .set([contentItem.DOM.caption.title, contentItem.DOM.caption.meta, contentItem.DOM.caption.more], { 87 | opacity: 0 88 | }, 'hideMenu') 89 | // small numbers next to text 90 | .to(numbers, { 91 | duration: 0.3, 92 | ease: 'sine', 93 | scale: 0, 94 | opacity: 0, 95 | stagger: {from: position, each: 0.01} 96 | }, 'hideMenu') 97 | // all menu items texts 98 | .to(texts, { 99 | duration: 0.1, 100 | ease: 'quad.in', 101 | scaleY: 1.5, 102 | stagger: {from: position, each: 0.01} 103 | }, 'hideMenu') 104 | .to(texts, { 105 | duration: 0.8, 106 | ease: 'expo', 107 | scaleY: 1, 108 | y: '-100%', 109 | opacity: 0, 110 | stagger: {from: position, each: 0.01} 111 | }, 'hideMenu+=0.1') 112 | // add class content--current to the content element so it becomes visible 113 | .addLabel('showContent', 0.3) 114 | // add class current 115 | .add(() => { 116 | contentItem.DOM.el.classList.add('content--current'); 117 | }, 'showContent') 118 | // back control 119 | .set(this.DOM.backCtrl, {pointerEvents: 'auto'}, 'showContent') 120 | .to(this.DOM.backCtrl, { 121 | startAt: {x: '-100%'}, 122 | opacity: 1, 123 | x: '0%' 124 | }, 'showContent') 125 | .to(contentItem.DOM.title, { 126 | duration: 0.1, 127 | ease: 'quad.in', 128 | scaleY: 1.5, 129 | opacity: 1 130 | }, 'showContent') 131 | .to(contentItem.DOM.title, { 132 | duration: 0.8, 133 | ease: 'expo', 134 | scaleY: 1, 135 | startAt: {y: '100%'}, 136 | y: '0%' 137 | }, 'showContent+=0.1') 138 | .to(contentItem.DOM.number, { 139 | scale: 1 140 | }, 'showContent') 141 | .to(contentItem.DOM.imgs, { 142 | y: '0%', 143 | stagger: 0.02 144 | }, 'showContent+=0.1') 145 | .to([contentItem.DOM.caption.title, contentItem.DOM.caption.meta], { 146 | startAt: {y: '100%'}, 147 | y: '0%', 148 | opacity: 1, 149 | stagger: 0.02 150 | }, 'showContent+=0.2') 151 | .to(contentItem.DOM.caption.more, { 152 | startAt: {scale: 0}, 153 | scale: 1, 154 | opacity: 1, 155 | stagger: 0.02 156 | }, 'showContent+=0.2'); 157 | } 158 | onBackCtrlClick() { 159 | // get elements for this position 160 | const {menuItem, texts, numbers, contentItem} = this.getCurrentData(this.currentItemIndex); 161 | 162 | gsap.timeline({ 163 | defaults: {duration: 0.4, ease: 'power3.in'} 164 | }) 165 | .addLabel('hideContent', 0) 166 | // set transform origin value for both the texts and content tile elements 167 | .set([texts, contentItem.DOM.title], {transformOrigin: '50% 0%'}, 'hideContent') 168 | // back control 169 | .set(this.DOM.backCtrl, {pointerEvents: 'none'}, 'hideContent') 170 | .to(this.DOM.backCtrl, { 171 | opacity: 0, 172 | x: '-100%' 173 | }, 'hideContent') 174 | .to([contentItem.DOM.caption.meta, contentItem.DOM.caption.title], { 175 | y: '100%', 176 | opacity: 0, 177 | stagger: 0.02 178 | }, 'hideContent') 179 | .to(contentItem.DOM.caption.more, { 180 | scale: 0, 181 | opacity: 0, 182 | stagger: 0.02 183 | }, 'hideContent') 184 | .to(contentItem.DOM.imgs, { 185 | y: '101%', 186 | stagger: 0.02 187 | }, 'hideContent+=0.1') 188 | .to(contentItem.DOM.number, { 189 | scale: 0 190 | }, 'hideContent+=0.1') 191 | .to(contentItem.DOM.title, { 192 | y: '100%', 193 | opacity: 1 194 | }, 'hideContent+=0.1') 195 | .addLabel('showMenu', 0.6) 196 | // remove class content--current to the content element so it becomes invisible 197 | .add(() => { 198 | contentItem.DOM.el.classList.remove('content--current'); 199 | }, 'showMenu') 200 | .add(() => { 201 | // change pointer events so we can hover on the menu 202 | this.DOM.menu.style.pointerEvents = ''; 203 | menuItem.DOM.el.style.pointerEvents = ''; 204 | }, 'showMenu') 205 | // small numbers next to text 206 | .to(numbers, { 207 | duration: 0.3, 208 | ease: 'sine', 209 | scale: 1, 210 | opacity: 1, 211 | stagger: {from: this.currentItemIndex, each: 0.01} 212 | }, 'showMenu') 213 | // all menu items texts 214 | .to(texts, { 215 | duration: 0.1, 216 | ease: 'quad.in', 217 | scaleY: 1.5, 218 | opacity: 1, 219 | stagger: {from: this.currentItemIndex, each: 0.01} 220 | }, 'showMenu') 221 | .to(texts, { 222 | duration: 0.8, 223 | ease: 'expo', 224 | scaleY: 1, 225 | y: '0%', 226 | stagger: {from: this.currentItemIndex, each: 0.01} 227 | }, 'showMenu+=0.1') 228 | } 229 | } -------------------------------------------------------------------------------- /src/js/menuItem.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | import { map, lerp, clamp, getMousePos } from './utils'; 3 | const images = Object.entries(require('../img/*.jpg')); 4 | 5 | // track the mouse position 6 | let mousepos = {x: 0, y: 0}; 7 | // cache the mouse position 8 | let mousePosCache = mousepos; 9 | // mouse movement direction 10 | let direction = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y}; 11 | // update mouse position when moving the mouse 12 | window.addEventListener('mousemove', ev => mousepos = getMousePos(ev)); 13 | 14 | export default class MenuItem { 15 | constructor(el, animatableProperties) { 16 | this.DOM = {el: el}; 17 | this.DOM.inner = this.DOM.el.querySelector('.menu__item-inner'); 18 | this.DOM.number = this.DOM.el.querySelector('.menu__item-number'); 19 | // menu item properties that will animate as we move the mouse around the menu 20 | this.animatableProperties = animatableProperties; 21 | // create the image structure 22 | this.layout(); 23 | // initialize some events 24 | this.initEvents(); 25 | } 26 | // create the image structure 27 | // we want to add/append to the menu item the following html: 28 | //
29 | //
30 | //
31 | //
32 | //
33 | //
34 | layout() { 35 | // this is the element that gets its position animated (and perhaps other properties like the rotation etc..) 36 | this.DOM.reveal = document.createElement('div'); 37 | this.DOM.reveal.className = 'hover-reveal'; 38 | this.DOM.reveal.style.transformOrigin = '0% 0%'; 39 | // the next two elements could actually be only one, the image element 40 | // adding an extra wrapper (revealInner) around the image element with overflow hidden, gives us the possibility to scale the image inside 41 | this.DOM.revealInner = document.createElement('div'); 42 | this.DOM.revealInner.className = 'hover-reveal__inner'; 43 | this.DOM.revealImage = document.createElement('div'); 44 | this.DOM.revealImage.className = 'hover-reveal__img'; 45 | const imgpos = this.DOM.el.dataset.img.match(/([\w\d_-]*)\.?[^\\\/]*$/i)[1]-1; 46 | this.DOM.revealImage.style.backgroundImage = `url(${images[imgpos][1]})`; 47 | this.DOM.el.dataset.img 48 | this.DOM.revealInner.appendChild(this.DOM.revealImage); 49 | this.DOM.reveal.appendChild(this.DOM.revealInner); 50 | this.DOM.el.appendChild(this.DOM.reveal); 51 | } 52 | initEvents() { 53 | this.mouseenterFn = () => { 54 | // show the image element 55 | this.showImage(); 56 | this.firstRAFCycle = true; 57 | // start the render loop animation (rAF) 58 | this.loopRender(); 59 | }; 60 | 61 | this.mouseleaveFn = () => { 62 | // stop the render loop animation (rAF) 63 | this.stopRendering(); 64 | // hide the image element 65 | this.hideImage(); 66 | }; 67 | 68 | this.DOM.el.addEventListener('mouseenter', this.mouseenterFn); 69 | this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn); 70 | } 71 | // calculate the position/size of both the menu item and reveal element 72 | calcBounds() { 73 | this.bounds = { 74 | el: this.DOM.el.getBoundingClientRect(), 75 | reveal: this.DOM.reveal.getBoundingClientRect() 76 | }; 77 | } 78 | // shows the menu item image 79 | showImage() { 80 | // kill any current tweens 81 | gsap.killTweensOf(this.DOM.revealInner); 82 | gsap.killTweensOf(this.DOM.revealImage); 83 | gsap.timeline({ 84 | defaults: {duration: 0.8, ease: 'quint'}, 85 | onStart: () => { 86 | // show reveal and inner element 87 | this.DOM.reveal.style.opacity = this.DOM.revealInner.style.opacity = 1; 88 | // set a high z-index value so image appears on top of other elements 89 | gsap.set(this.DOM.el, {zIndex: images.length}); 90 | } 91 | }) 92 | // animate the image wrap 93 | .to(this.DOM.revealInner, { 94 | startAt: {x: '-50%', y: '150%', rotation: 10}, 95 | x: '0%', 96 | y: '0%', 97 | //rotation: 10 98 | }, 0) 99 | // scale animation for both inner & image 100 | .to(this.DOM.revealInner, { 101 | duration: 1, 102 | ease: 'expo', 103 | startAt: {scale: 0.2}, 104 | scale: 1 105 | }, 0) 106 | .to(this.DOM.revealImage, { 107 | duration: 1, 108 | ease: 'expo', 109 | startAt: {scale: 1.8}, 110 | scale: 1 111 | }, 0); 112 | } 113 | // hides the menu item image 114 | hideImage() { 115 | return new Promise(resolve => { 116 | // kill any current tweens 117 | gsap.killTweensOf(this.DOM.revealInner); 118 | gsap.killTweensOf(this.DOM.revealImage); 119 | gsap.timeline({ 120 | defaults: {duration: 0.8, ease: 'quint'}, 121 | onStart: () => { 122 | gsap.set(this.DOM.el, {zIndex: 1}); 123 | }, 124 | onComplete: () => { 125 | gsap.set(this.DOM.reveal, {opacity: 0}); 126 | resolve(); 127 | } 128 | }) 129 | .to(this.DOM.revealInner, { 130 | scale: 0.8, 131 | x: '50%', 132 | y: '-150%', 133 | opacity: 0, 134 | //rotation: 0 135 | }) 136 | .to(this.DOM.revealImage, { 137 | scale: 1.8 138 | }, 0); 139 | }); 140 | } 141 | // start the render loop animation (rAF) 142 | loopRender() { 143 | if ( !this.requestId ) { 144 | this.requestId = requestAnimationFrame(() => this.render()); 145 | } 146 | } 147 | // stop the render loop animation (rAF) 148 | stopRendering() { 149 | if ( this.requestId ) { 150 | window.cancelAnimationFrame(this.requestId); 151 | this.requestId = undefined; 152 | } 153 | } 154 | // translate the item as the mouse moves 155 | render() { 156 | this.requestId = undefined; 157 | 158 | if ( this.firstRAFCycle ) { 159 | // calculate position/sizes the first time 160 | this.calcBounds(); 161 | } 162 | // calculate the mouse distance (current vs previous cycle) 163 | const mouseDistanceX = clamp(Math.abs(mousePosCache.x - mousepos.x), 0, 100); 164 | // direction where the mouse is moving 165 | direction = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y}; 166 | // updated cache values 167 | mousePosCache = {x: mousepos.x, y: mousepos.y}; 168 | 169 | // new translation values 170 | this.animatableProperties.tx.current = Math.abs(mousepos.x - this.bounds.el.left) - this.bounds.reveal.width/2; 171 | this.animatableProperties.ty.current = Math.abs(mousepos.y - this.bounds.el.top) - this.bounds.reveal.height/2; 172 | // new rotation value 173 | this.animatableProperties.rotation.current = this.firstRAFCycle ? 0 : map(mouseDistanceX,0,200,0,direction.x < 0 ? -100 : 100); 174 | 175 | // set up the interpolated values 176 | // for the first cycle, both the interpolated values need to be the same so there's no "lerped" animation between the previous and current state 177 | this.animatableProperties.tx.previous = this.firstRAFCycle ? this.animatableProperties.tx.current : lerp(this.animatableProperties.tx.previous, this.animatableProperties.tx.current, this.animatableProperties.tx.amt); 178 | this.animatableProperties.ty.previous = this.firstRAFCycle ? this.animatableProperties.ty.current : lerp(this.animatableProperties.ty.previous, this.animatableProperties.ty.current, this.animatableProperties.ty.amt); 179 | this.animatableProperties.rotation.previous = this.firstRAFCycle ? this.animatableProperties.rotation.current : lerp(this.animatableProperties.rotation.previous, this.animatableProperties.rotation.current, this.animatableProperties.rotation.amt); 180 | 181 | // set styles 182 | gsap.set(this.DOM.reveal, { 183 | x: this.animatableProperties.tx.previous, 184 | y: this.animatableProperties.ty.previous, 185 | rotation: this.animatableProperties.rotation.previous 186 | }); 187 | 188 | // loop 189 | this.firstRAFCycle = false; 190 | this.loopRender(); 191 | } 192 | } -------------------------------------------------------------------------------- /src/js/preloader.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | const body = document.body; 4 | export const preloader = selector => { 5 | return new Promise(resolve => { 6 | 7 | const imgwrap = document.createElement('div'); 8 | imgwrap.style.visibility = 'hidden'; 9 | body.appendChild(imgwrap); 10 | 11 | [...document.querySelectorAll(selector)].forEach(el => { 12 | const imgEl = document.createElement('img'); 13 | imgEl.style.width = 0; 14 | imgEl.src = el.dataset.img; 15 | imgEl.className = 'preload'; 16 | imgwrap.appendChild(imgEl); 17 | }); 18 | 19 | imagesLoaded(document.querySelectorAll('.preload'), () => { 20 | //imgwrap.parentNode.removeChild(imgwrap); 21 | body.classList.remove('loading'); 22 | resolve(); 23 | }); 24 | 25 | }); 26 | }; -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | // Map number x from range [a, b] to [c, d] 2 | const imagesLoaded = require('imagesloaded'); 3 | 4 | const map = (x, a, b, c, d) => (x - a) * (d - c) / (b - a) + c; 5 | 6 | const clamp = (num, min, max) => num <= min ? min : num >= max ? max : num; 7 | 8 | // Linear interpolation 9 | const lerp = (a, b, n) => (1 - n) * a + n * b; 10 | 11 | // Gets the mouse position 12 | const getMousePos = e => { 13 | return { 14 | x : e.clientX, 15 | y : e.clientY 16 | }; 17 | }; 18 | 19 | // Preload images 20 | const preloadImages = (selector = 'img') => { 21 | return new Promise((resolve) => { 22 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 23 | }); 24 | }; 25 | 26 | // Preload images 27 | const preloadFonts = (id) => { 28 | return new Promise((resolve) => { 29 | WebFont.load({ 30 | typekit: { 31 | id: id 32 | }, 33 | active: resolve 34 | }); 35 | }); 36 | }; 37 | 38 | export { 39 | map, 40 | clamp, 41 | lerp, 42 | getMousePos, 43 | preloadImages, 44 | preloadFonts 45 | }; --------------------------------------------------------------------------------