├── .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 ├── 3.a433b89d.jpg ├── 4.c6d96be5.jpg ├── 5.689b68fd.jpg ├── 6.e96dcfff.jpg ├── 7.2d66e3ed.jpg ├── 8.f4323fe0.jpg ├── 9.c9233dac.jpg ├── base.98fd6c19.css ├── favicon.26242483.ico ├── img │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 2.jpg │ ├── 20.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── index.html └── 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 ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg ├── index.html └── js ├── cursor.js ├── index.js ├── menu.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 | # Rapid Image Hover Menu 2 | 3 | A hover effect for a menu where images appear with an animation for each item. 4 | 5 | ![Rapid Image Hover Menu](https://tympanus.net/codrops/wp-content/uploads/2020/07/rapid_feat.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=50362) 8 | 9 | [Demo](http://tympanus.net/Tutorials/RapidImageHoverMenu/) 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 by [Andrey Yakovlev and Lili Aleeva](https://www.behance.net/AndrewLili). All images used are licensed under [CC BY-NC-ND 4.0](https://creativecommons.org/licenses/by-nc-nd/4.0/deed.en_US) 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/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/1.dc197a9a.jpg -------------------------------------------------------------------------------- /dist/10.5e22fdc3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/10.5e22fdc3.jpg -------------------------------------------------------------------------------- /dist/11.a56b8aeb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/11.a56b8aeb.jpg -------------------------------------------------------------------------------- /dist/12.b5a57fd7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/12.b5a57fd7.jpg -------------------------------------------------------------------------------- /dist/13.3858c623.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/13.3858c623.jpg -------------------------------------------------------------------------------- /dist/14.c732d2b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/14.c732d2b3.jpg -------------------------------------------------------------------------------- /dist/15.61b13bcc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/15.61b13bcc.jpg -------------------------------------------------------------------------------- /dist/16.39461312.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/16.39461312.jpg -------------------------------------------------------------------------------- /dist/17.7c008703.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/17.7c008703.jpg -------------------------------------------------------------------------------- /dist/18.81a1401f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/18.81a1401f.jpg -------------------------------------------------------------------------------- /dist/19.6d803788.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/19.6d803788.jpg -------------------------------------------------------------------------------- /dist/2.3ca6bb44.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/2.3ca6bb44.jpg -------------------------------------------------------------------------------- /dist/20.b400b781.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/20.b400b781.jpg -------------------------------------------------------------------------------- /dist/3.a433b89d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/3.a433b89d.jpg -------------------------------------------------------------------------------- /dist/4.c6d96be5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/4.c6d96be5.jpg -------------------------------------------------------------------------------- /dist/5.689b68fd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/5.689b68fd.jpg -------------------------------------------------------------------------------- /dist/6.e96dcfff.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/6.e96dcfff.jpg -------------------------------------------------------------------------------- /dist/7.2d66e3ed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/7.2d66e3ed.jpg -------------------------------------------------------------------------------- /dist/8.f4323fe0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/8.f4323fe0.jpg -------------------------------------------------------------------------------- /dist/9.c9233dac.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/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: 13px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #111; 14 | --color-bg: #edeee9; 15 | --color-link: #000; 16 | --color-link-hover: #000; 17 | --color-menu: #000; 18 | --color-menu-hover: #f32015; 19 | color: var(--color-text); 20 | background-color: var(--color-bg); 21 | --cursor-stroke: #000; 22 | --cursor-fill: #000; 23 | --cursor-stroke-width: 1px; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | font-family: degular, sans-serif; 27 | } 28 | 29 | /* Page Loader */ 30 | .js .loading::before, 31 | .js .loading::after { 32 | content: ''; 33 | position: fixed; 34 | z-index: 1000; 35 | } 36 | 37 | .js .loading::before { 38 | top: 0; 39 | left: 0; 40 | width: 100%; 41 | height: 100%; 42 | background: var(--color-bg); 43 | } 44 | 45 | .js .loading::after { 46 | top: 50%; 47 | left: 50%; 48 | width: 60px; 49 | height: 60px; 50 | margin: -30px 0 0 -30px; 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 | cursor: pointer; 69 | } 70 | 71 | a:hover, 72 | a:focus { 73 | color: var(--color-link-hover); 74 | outline: none; 75 | } 76 | 77 | .frame { 78 | top: 0; 79 | padding: 1rem 1.5rem; 80 | position: fixed; 81 | z-index: 1000; 82 | background: #f0f0f0; 83 | width: 100%; 84 | display: flex; 85 | text-transform: uppercase; 86 | } 87 | 88 | .frame__title { 89 | font-size: 1rem; 90 | margin: 0; 91 | font-weight: 400; 92 | } 93 | 94 | .frame__links { 95 | margin: 0.5rem 0; 96 | } 97 | 98 | .frame__links a { 99 | border-bottom: 1px solid currentColor; 100 | transition: 0.2s border-color; 101 | } 102 | 103 | .frame__links a:hover, 104 | .frame__links a:focus { 105 | border-color: transparent; 106 | } 107 | 108 | .frame__links a:not(:last-child) { 109 | margin-right: 1rem; 110 | } 111 | 112 | .frame__button { 113 | word-spacing: 0.75rem; 114 | color: var(--color-link); 115 | margin-left: auto; 116 | } 117 | 118 | .menu { 119 | padding: 10rem 0 20vh 0; 120 | width: 90vw; 121 | position: relative; 122 | display: flex; 123 | flex-direction: column; 124 | text-align: right; 125 | -webkit-touch-callout: none; 126 | -webkit-user-select: none; 127 | -moz-user-select: none; 128 | -ms-user-select: none; 129 | user-select: none; 130 | counter-reset: menucounter; 131 | } 132 | 133 | .menu__item { 134 | flex: none; 135 | display: flex; 136 | justify-content: flex-end; 137 | position: relative; 138 | padding-left: 5rem; 139 | } 140 | 141 | .menu__item::before { 142 | counter-increment: menucounter; 143 | content: counters(menucounter, ".", decimal-leading-zero); 144 | position: absolute; 145 | left: 0; 146 | border-left: 3px solid currentColor; 147 | top: 20%; 148 | height: 60%; 149 | padding-left: 1rem; 150 | display: flex; 151 | align-items: center; 152 | line-height: 1; 153 | font-weight: bold; 154 | opacity: 0; 155 | transform: translateX(-1rem); 156 | transition: transform 0.3s, opacity 0.3s; 157 | } 158 | 159 | .menu__item:hover::before { 160 | opacity: 1; 161 | transform: translateX(0); 162 | } 163 | 164 | .menu__item-text { 165 | position: relative; 166 | cursor: pointer; 167 | padding: 0.5rem; 168 | display: block; 169 | overflow: hidden; 170 | font-size: 6vw; 171 | } 172 | 173 | .menu__item-textinner { 174 | display: block; 175 | font-family: goldenbook, serif; 176 | font-weight: 300; 177 | text-transform: uppercase; 178 | white-space: nowrap; 179 | color: var(--color-menu); 180 | } 181 | 182 | .js .menu__item-textinner { 183 | transform: translateY(100%); 184 | } 185 | 186 | .menu__item:hover .menu__item-textinner { 187 | color: var(--color-menu-hover); 188 | } 189 | 190 | .menu__item-sub { 191 | display: none; 192 | text-transform: uppercase; 193 | font-weight: bold; 194 | white-space: nowrap; 195 | align-items: center; 196 | position: relative; 197 | margin-left: 2rem; 198 | padding-left: 3rem; 199 | opacity: 0; 200 | transform: translateX(-1rem); 201 | transition: transform 0.3s, opacity 0.3s; 202 | } 203 | 204 | .menu__item:hover .menu__item-sub { 205 | opacity: 1; 206 | transform: translateX(0); 207 | } 208 | 209 | .menu__item-sub::before { 210 | content: ''; 211 | position: absolute; 212 | left: 0; 213 | top: 15%; 214 | width: 1px; 215 | height: 70%; 216 | background: currentColor; 217 | transform-origin: 0 100%; 218 | transform: rotate(22.5deg) scale3d(1,0,1); 219 | transition: transform 0.3s; 220 | } 221 | 222 | .menu__item:hover .menu__item-sub::before { 223 | transform: rotate(22.5deg) scale3d(1,1,1); 224 | } 225 | 226 | .hover-reveal { 227 | position: absolute; 228 | z-index: -1; 229 | width: 220px; 230 | height: 320px; 231 | top: 0; 232 | left: 0; 233 | pointer-events: none; 234 | opacity: 0; 235 | } 236 | 237 | .hover-reveal__inner { 238 | overflow: hidden; 239 | } 240 | 241 | .hover-reveal__inner, 242 | .hover-reveal__img { 243 | width: 100%; 244 | height: 100%; 245 | position: relative; 246 | } 247 | 248 | .hover-reveal__img { 249 | background-size: cover; 250 | background-position: 50% 50%; 251 | } 252 | 253 | .cursor { 254 | display: none; 255 | } 256 | 257 | .credits { 258 | align-self: flex-start; 259 | padding: 5rem 0 0 0; 260 | } 261 | 262 | .credits a { 263 | text-decoration: underline; 264 | } 265 | 266 | @media screen and (min-width: 53em) { 267 | .frame { 268 | flex-direction: column; 269 | align-items: flex-end; 270 | text-align: right; 271 | background: none; 272 | height: 50vh; 273 | pointer-events: none; 274 | padding-bottom: 0; 275 | } 276 | .frame__links a:not(:last-child) { 277 | margin-right: 0; 278 | } 279 | .frame__links { 280 | margin: 0.5rem 0 2rem; 281 | justify-self: start; 282 | } 283 | .frame__links a { 284 | margin-left: 0.5rem; 285 | pointer-events: auto; 286 | } 287 | .frame__button { 288 | cursor: not-allowed; 289 | pointer-events: auto; 290 | margin-top: auto; 291 | transform: translateY(50%); 292 | } 293 | .menu { 294 | padding-top: 20vh; 295 | } 296 | .menu__item { 297 | padding-left: 25vw; 298 | justify-content: initial; 299 | } 300 | .menu__item-text { 301 | padding: 1vh 0; 302 | font-size: 4vw; 303 | } 304 | .menu__item-sub { 305 | display: flex; 306 | } 307 | } 308 | 309 | @media (any-pointer: fine) { 310 | .cursor { 311 | position: fixed; 312 | top: 0; 313 | left: 0; 314 | display: block; 315 | pointer-events: none; 316 | } 317 | .cursor__inner { 318 | fill: var(--cursor-fill); 319 | stroke: var(--cursor-stroke); 320 | stroke-width: var(--cursor-stroke-width); 321 | opacity: 0.3; 322 | } 323 | .credits { 324 | padding-left: 25vw; 325 | } 326 | } 327 | 328 | /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 329 | html.has-scroll-smooth { 330 | overflow: hidden; 331 | } 332 | 333 | html.has-scroll-dragging { 334 | -webkit-user-select: none; 335 | -moz-user-select: none; 336 | -ms-user-select: none; 337 | user-select: none; 338 | } 339 | 340 | .has-scroll-smooth body { 341 | overflow: hidden; 342 | } 343 | 344 | .has-scroll-smooth [data-scroll-container] { 345 | min-height: 100vh; 346 | } 347 | 348 | .c-scrollbar { 349 | position: absolute; 350 | right: 0; 351 | top: 0; 352 | width: 11px; 353 | height: 100vh; 354 | transform-origin: center right; 355 | transition: transform 0.3s, opacity 0.3s; 356 | opacity: 0; 357 | } 358 | .c-scrollbar:hover { 359 | transform: scaleX(1.45); 360 | } 361 | .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { 362 | opacity: 1; 363 | } 364 | 365 | .c-scrollbar_thumb { 366 | position: absolute; 367 | top: 0; 368 | right: 0; 369 | background-color: black; 370 | opacity: 0.5; 371 | width: 7px; 372 | border-radius: 10px; 373 | margin: 2px; 374 | cursor: -webkit-grab; 375 | cursor: grab; 376 | } 377 | .has-scroll-dragging .c-scrollbar_thumb { 378 | cursor: -webkit-grabbing; 379 | cursor: grabbing; 380 | } -------------------------------------------------------------------------------- /dist/favicon.26242483.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/favicon.26242483.ico -------------------------------------------------------------------------------- /dist/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/1.jpg -------------------------------------------------------------------------------- /dist/img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/10.jpg -------------------------------------------------------------------------------- /dist/img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/11.jpg -------------------------------------------------------------------------------- /dist/img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/12.jpg -------------------------------------------------------------------------------- /dist/img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/13.jpg -------------------------------------------------------------------------------- /dist/img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/14.jpg -------------------------------------------------------------------------------- /dist/img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/15.jpg -------------------------------------------------------------------------------- /dist/img/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/16.jpg -------------------------------------------------------------------------------- /dist/img/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/17.jpg -------------------------------------------------------------------------------- /dist/img/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/18.jpg -------------------------------------------------------------------------------- /dist/img/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/19.jpg -------------------------------------------------------------------------------- /dist/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/2.jpg -------------------------------------------------------------------------------- /dist/img/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/20.jpg -------------------------------------------------------------------------------- /dist/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/3.jpg -------------------------------------------------------------------------------- /dist/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/4.jpg -------------------------------------------------------------------------------- /dist/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/5.jpg -------------------------------------------------------------------------------- /dist/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/6.jpg -------------------------------------------------------------------------------- /dist/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/7.jpg -------------------------------------------------------------------------------- /dist/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/8.jpg -------------------------------------------------------------------------------- /dist/img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/dist/img/9.jpg -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menu Hover Image Animation | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | 24 | 25 |
26 |
27 |
28 |

Rapid Image Hover Menu

29 |
30 | Previous demo 31 | Article 32 | GitHub 33 |
34 |
35 | 36 |
37 | 112 |
113 | 114 | 115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "RapidImageHoverMenu", 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/RapidImageHoverMenu.git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "[HOMEPAGE]", 20 | "bugs": { 21 | "url": "https://github.com/codrops/RapidImageHoverMenu/issues" 22 | }, 23 | "dependencies": { 24 | "gsap": "^3.3.4", 25 | "imagesloaded": "^4.1.4", 26 | "locomotive-scroll": "^3.5.4", 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: 13px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #111; 14 | --color-bg: #edeee9; 15 | --color-link: #000; 16 | --color-link-hover: #000; 17 | --color-menu: #000; 18 | --color-menu-hover: #f32015; 19 | color: var(--color-text); 20 | background-color: var(--color-bg); 21 | --cursor-stroke: #000; 22 | --cursor-fill: #000; 23 | --cursor-stroke-width: 1px; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | font-family: degular, sans-serif; 27 | } 28 | 29 | /* Page Loader */ 30 | .js .loading::before, 31 | .js .loading::after { 32 | content: ''; 33 | position: fixed; 34 | z-index: 1000; 35 | } 36 | 37 | .js .loading::before { 38 | top: 0; 39 | left: 0; 40 | width: 100%; 41 | height: 100%; 42 | background: var(--color-bg); 43 | } 44 | 45 | .js .loading::after { 46 | top: 50%; 47 | left: 50%; 48 | width: 60px; 49 | height: 60px; 50 | margin: -30px 0 0 -30px; 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 | cursor: pointer; 69 | } 70 | 71 | a:hover, 72 | a:focus { 73 | color: var(--color-link-hover); 74 | outline: none; 75 | } 76 | 77 | .frame { 78 | top: 0; 79 | padding: 1rem 1.5rem; 80 | position: fixed; 81 | z-index: 1000; 82 | background: #f0f0f0; 83 | width: 100%; 84 | display: flex; 85 | text-transform: uppercase; 86 | } 87 | 88 | .frame__title { 89 | font-size: 1rem; 90 | margin: 0; 91 | font-weight: 400; 92 | } 93 | 94 | .frame__links { 95 | margin: 0.5rem 0; 96 | } 97 | 98 | .frame__links a { 99 | border-bottom: 1px solid currentColor; 100 | transition: 0.2s border-color; 101 | } 102 | 103 | .frame__links a:hover, 104 | .frame__links a:focus { 105 | border-color: transparent; 106 | } 107 | 108 | .frame__links a:not(:last-child) { 109 | margin-right: 1rem; 110 | } 111 | 112 | .frame__button { 113 | word-spacing: 0.75rem; 114 | color: var(--color-link); 115 | margin-left: auto; 116 | } 117 | 118 | .menu { 119 | padding: 10rem 0 20vh 0; 120 | width: 90vw; 121 | position: relative; 122 | display: flex; 123 | flex-direction: column; 124 | text-align: right; 125 | -webkit-touch-callout: none; 126 | -webkit-user-select: none; 127 | -moz-user-select: none; 128 | -ms-user-select: none; 129 | user-select: none; 130 | counter-reset: menucounter; 131 | } 132 | 133 | .menu__item { 134 | flex: none; 135 | display: flex; 136 | justify-content: flex-end; 137 | position: relative; 138 | padding-left: 5rem; 139 | } 140 | 141 | .menu__item::before { 142 | counter-increment: menucounter; 143 | content: counters(menucounter, ".", decimal-leading-zero); 144 | position: absolute; 145 | left: 0; 146 | border-left: 3px solid currentColor; 147 | top: 20%; 148 | height: 60%; 149 | padding-left: 1rem; 150 | display: flex; 151 | align-items: center; 152 | line-height: 1; 153 | font-weight: bold; 154 | opacity: 0; 155 | transform: translateX(-1rem); 156 | transition: transform 0.3s, opacity 0.3s; 157 | } 158 | 159 | .menu__item:hover::before { 160 | opacity: 1; 161 | transform: translateX(0); 162 | } 163 | 164 | .menu__item-text { 165 | position: relative; 166 | cursor: pointer; 167 | padding: 0.5rem; 168 | display: block; 169 | overflow: hidden; 170 | font-size: 6vw; 171 | } 172 | 173 | .menu__item-textinner { 174 | display: block; 175 | font-family: goldenbook, serif; 176 | font-weight: 300; 177 | text-transform: uppercase; 178 | white-space: nowrap; 179 | color: var(--color-menu); 180 | } 181 | 182 | .js .menu__item-textinner { 183 | transform: translateY(100%); 184 | } 185 | 186 | .menu__item:hover .menu__item-textinner { 187 | color: var(--color-menu-hover); 188 | } 189 | 190 | .menu__item-sub { 191 | display: none; 192 | text-transform: uppercase; 193 | font-weight: bold; 194 | white-space: nowrap; 195 | align-items: center; 196 | position: relative; 197 | margin-left: 2rem; 198 | padding-left: 3rem; 199 | opacity: 0; 200 | transform: translateX(-1rem); 201 | transition: transform 0.3s, opacity 0.3s; 202 | } 203 | 204 | .menu__item:hover .menu__item-sub { 205 | opacity: 1; 206 | transform: translateX(0); 207 | } 208 | 209 | .menu__item-sub::before { 210 | content: ''; 211 | position: absolute; 212 | left: 0; 213 | top: 15%; 214 | width: 1px; 215 | height: 70%; 216 | background: currentColor; 217 | transform-origin: 0 100%; 218 | transform: rotate(22.5deg) scale3d(1,0,1); 219 | transition: transform 0.3s; 220 | } 221 | 222 | .menu__item:hover .menu__item-sub::before { 223 | transform: rotate(22.5deg) scale3d(1,1,1); 224 | } 225 | 226 | .hover-reveal { 227 | position: absolute; 228 | z-index: -1; 229 | width: 220px; 230 | height: 320px; 231 | top: 0; 232 | left: 0; 233 | pointer-events: none; 234 | opacity: 0; 235 | } 236 | 237 | .hover-reveal__inner { 238 | overflow: hidden; 239 | } 240 | 241 | .hover-reveal__inner, 242 | .hover-reveal__img { 243 | width: 100%; 244 | height: 100%; 245 | position: relative; 246 | } 247 | 248 | .hover-reveal__img { 249 | background-size: cover; 250 | background-position: 50% 50%; 251 | } 252 | 253 | .cursor { 254 | display: none; 255 | } 256 | 257 | .credits { 258 | align-self: flex-start; 259 | padding: 5rem 0 0 0; 260 | } 261 | 262 | .credits a { 263 | text-decoration: underline; 264 | } 265 | 266 | @media screen and (min-width: 53em) { 267 | .frame { 268 | flex-direction: column; 269 | align-items: flex-end; 270 | text-align: right; 271 | background: none; 272 | height: 50vh; 273 | pointer-events: none; 274 | padding-bottom: 0; 275 | } 276 | .frame__links a:not(:last-child) { 277 | margin-right: 0; 278 | } 279 | .frame__links { 280 | margin: 0.5rem 0 2rem; 281 | justify-self: start; 282 | } 283 | .frame__links a { 284 | margin-left: 0.5rem; 285 | pointer-events: auto; 286 | } 287 | .frame__button { 288 | cursor: not-allowed; 289 | pointer-events: auto; 290 | margin-top: auto; 291 | transform: translateY(50%); 292 | } 293 | .menu { 294 | padding-top: 20vh; 295 | } 296 | .menu__item { 297 | padding-left: 25vw; 298 | justify-content: initial; 299 | } 300 | .menu__item-text { 301 | padding: 1vh 0; 302 | font-size: 4vw; 303 | } 304 | .menu__item-sub { 305 | display: flex; 306 | } 307 | } 308 | 309 | @media (any-pointer: fine) { 310 | .cursor { 311 | position: fixed; 312 | top: 0; 313 | left: 0; 314 | display: block; 315 | pointer-events: none; 316 | } 317 | .cursor__inner { 318 | fill: var(--cursor-fill); 319 | stroke: var(--cursor-stroke); 320 | stroke-width: var(--cursor-stroke-width); 321 | opacity: 0.3; 322 | } 323 | .credits { 324 | padding-left: 25vw; 325 | } 326 | } 327 | 328 | /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 329 | html.has-scroll-smooth { 330 | overflow: hidden; 331 | } 332 | 333 | html.has-scroll-dragging { 334 | -webkit-user-select: none; 335 | -moz-user-select: none; 336 | -ms-user-select: none; 337 | user-select: none; 338 | } 339 | 340 | .has-scroll-smooth body { 341 | overflow: hidden; 342 | } 343 | 344 | .has-scroll-smooth [data-scroll-container] { 345 | min-height: 100vh; 346 | } 347 | 348 | .c-scrollbar { 349 | position: absolute; 350 | right: 0; 351 | top: 0; 352 | width: 11px; 353 | height: 100vh; 354 | transform-origin: center right; 355 | transition: transform 0.3s, opacity 0.3s; 356 | opacity: 0; 357 | } 358 | .c-scrollbar:hover { 359 | transform: scaleX(1.45); 360 | } 361 | .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { 362 | opacity: 1; 363 | } 364 | 365 | .c-scrollbar_thumb { 366 | position: absolute; 367 | top: 0; 368 | right: 0; 369 | background-color: black; 370 | opacity: 0.5; 371 | width: 7px; 372 | border-radius: 10px; 373 | margin: 2px; 374 | cursor: -webkit-grab; 375 | cursor: grab; 376 | } 377 | .has-scroll-dragging .c-scrollbar_thumb { 378 | cursor: -webkit-grabbing; 379 | cursor: grabbing; 380 | } -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/favicon.ico -------------------------------------------------------------------------------- /src/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/1.jpg -------------------------------------------------------------------------------- /src/img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/10.jpg -------------------------------------------------------------------------------- /src/img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/11.jpg -------------------------------------------------------------------------------- /src/img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/12.jpg -------------------------------------------------------------------------------- /src/img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/13.jpg -------------------------------------------------------------------------------- /src/img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/14.jpg -------------------------------------------------------------------------------- /src/img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/15.jpg -------------------------------------------------------------------------------- /src/img/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/16.jpg -------------------------------------------------------------------------------- /src/img/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/17.jpg -------------------------------------------------------------------------------- /src/img/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/18.jpg -------------------------------------------------------------------------------- /src/img/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/19.jpg -------------------------------------------------------------------------------- /src/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/2.jpg -------------------------------------------------------------------------------- /src/img/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/20.jpg -------------------------------------------------------------------------------- /src/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/3.jpg -------------------------------------------------------------------------------- /src/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/4.jpg -------------------------------------------------------------------------------- /src/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/5.jpg -------------------------------------------------------------------------------- /src/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/6.jpg -------------------------------------------------------------------------------- /src/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/7.jpg -------------------------------------------------------------------------------- /src/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/8.jpg -------------------------------------------------------------------------------- /src/img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenu/f05e29e46b51c4e461d02a6317d07277713a9fc9/src/img/9.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menu Hover Image Animation | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 |
22 |
23 |
24 |

Rapid Image Hover Menu

25 |
26 | Previous demo 27 | Article 28 | GitHub 29 |
30 |
31 | 32 |
33 | 108 |
109 | 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /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 | }; 19 | 20 | this.onMouseMoveEv = () => { 21 | this.renderedStyles.tx.previous = this.renderedStyles.tx.current = mouse.x - this.bounds.width/2; 22 | this.renderedStyles.ty.previous = this.renderedStyles.ty.previous = mouse.y - this.bounds.height/2; 23 | gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1}); 24 | requestAnimationFrame(() => this.render()); 25 | window.removeEventListener('mousemove', this.onMouseMoveEv); 26 | }; 27 | window.addEventListener('mousemove', this.onMouseMoveEv); 28 | } 29 | render() { 30 | this.renderedStyles['tx'].current = mouse.x - this.bounds.width/2; 31 | this.renderedStyles['ty'].current = mouse.y - this.bounds.height/2; 32 | 33 | for (const key in this.renderedStyles ) { 34 | this.renderedStyles[key].previous = lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].amt); 35 | } 36 | 37 | this.DOM.el.style.transform = `translateX(${(this.renderedStyles['tx'].previous)}px) translateY(${this.renderedStyles['ty'].previous}px)`; 38 | 39 | requestAnimationFrame(() => this.render()); 40 | } 41 | } -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import Cursor from './cursor'; 2 | import {preloader} from './preloader'; 3 | import LocomotiveScroll from 'locomotive-scroll'; 4 | import Menu from './menu'; 5 | 6 | // menu (