├── .gitignore ├── img ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png ├── 8.png ├── 9.png ├── 10.png ├── related │ ├── ImageGridEffects.png │ └── GridItemAnimation.jpg └── electric-guitar.svg ├── favicon.ico ├── pater ├── storyblocks.jpg └── pater.css ├── README.md ├── js ├── imagesloaded.pkgd.min.js ├── anime.min.js └── main.js ├── index.html └── css └── base.css /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/img/1.png -------------------------------------------------------------------------------- /img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/img/2.png -------------------------------------------------------------------------------- /img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/img/3.png -------------------------------------------------------------------------------- /img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/img/4.png -------------------------------------------------------------------------------- /img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/img/5.png -------------------------------------------------------------------------------- /img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/img/6.png -------------------------------------------------------------------------------- /img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/img/7.png -------------------------------------------------------------------------------- /img/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/img/8.png -------------------------------------------------------------------------------- /img/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/img/9.png -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/favicon.ico -------------------------------------------------------------------------------- /img/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/img/10.png -------------------------------------------------------------------------------- /pater/storyblocks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/pater/storyblocks.jpg -------------------------------------------------------------------------------- /img/related/ImageGridEffects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/img/related/ImageGridEffects.png -------------------------------------------------------------------------------- /img/related/GridItemAnimation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaijoGeorge/ExpandingGridItemAnimation/HEAD/img/related/GridItemAnimation.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Expanding Grid Item Animation 2 | 3 | A product item animation where the background of a grid item expands and the product image scales up. Based on the Dribbble shot [Surf Project](https://dribbble.com/shots/3879463-Surf-Project) by [Filip Slováček](https://dribbble.com/filipslovacek). 4 | 5 | ![Expanding Grid Item Animation](https://tympanus.net/codrops/wp-content/uploads/2017/11/expandinggrid_featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=32944) 8 | 9 | [Demo](http://tympanus.net/Development/ExpandingGridItemAnimation/) 10 | 11 | This demo is kindly sponsored by [Storyblocks](http://synd.co/2yatEfN). 12 | 13 | ## Credits 14 | 15 | - [anime.js](http://anime-js.com/) by Julian Garnier 16 | - [imagesLoaded](http://imagesloaded.desandro.com/) by Dave DeSandro 17 | - Guitar icon by [iconnice](https://www.flaticon.com/authors/iconnice) 18 | - Guitar vector designed by [Freepik](http://www.freepik.com) 19 | - Patterns by [Pixel Buddha](https://pixelbuddha.net/) 20 | 21 | ## License 22 | This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used. 23 | 24 | ## Misc 25 | 26 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/) 27 | 28 | [© Codrops 2017](http://www.codrops.com) 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /pater/pater.css: -------------------------------------------------------------------------------- 1 | .pater { 2 | position: absolute; 3 | z-index: 1000; 4 | left: 2em; 5 | top: 2.5em; 6 | max-width: 200px; 7 | pointer-events: none; 8 | color: #000; 9 | } 10 | 11 | .pater::before { 12 | content: 'Our Sponsor'; 13 | position: absolute; 14 | bottom: calc(100% + 0.75em); 15 | left: 0; 16 | font-size: 0.65em; 17 | color: #a09897; 18 | } 19 | 20 | .pater__img { 21 | max-width: 100%; 22 | pointer-events: auto; 23 | display: block; 24 | filter: contrast(70%); 25 | transition: filter 0.3s; 26 | } 27 | 28 | .pater:hover .pater__img { 29 | filter: contrast(100%); 30 | } 31 | 32 | .pater__title { 33 | font-size: 0.975em; 34 | font-weight: 500; 35 | margin: 0; 36 | padding: 0.5em 0; 37 | pointer-events: auto; 38 | transition: transform 0.3s, opacity 0.3s; 39 | } 40 | 41 | .pater__desc { 42 | font-size: 0.85em; 43 | margin: 0; 44 | line-height: 1.5; 45 | pointer-events: none; 46 | opacity: 0; 47 | transform: translate3d(0,10px,0); 48 | transition: transform 0.3s, opacity 0.3s; 49 | } 50 | 51 | .pater__desc strong { 52 | display: block; 53 | margin: 0.5em 0 0 0; 54 | } 55 | 56 | @media screen and (min-width: 60em) { 57 | .pater:hover .pater__title { 58 | opacity: 0; 59 | transform: translate3d(-100%,0,0); 60 | } 61 | .pater:hover .pater__desc { 62 | pointer-events: auto; 63 | opacity: 1; 64 | transform: translate3d(0,-3.25em,0); 65 | } 66 | } 67 | 68 | @media screen and (max-width: 60em) { 69 | .pater { 70 | position: fixed; 71 | top: auto; 72 | bottom: 0; 73 | left: 0; 74 | display: flex; 75 | align-items: center; 76 | width: 100%; 77 | max-width: none; 78 | padding: 0.5em; 79 | text-align: left; 80 | pointer-events: auto; 81 | color: #fff !important; 82 | background: rgba(0, 0, 0, 0.9); 83 | } 84 | .pater::before { 85 | display: none; 86 | } 87 | .pater__img { 88 | flex: none; 89 | width: 50px; 90 | margin: 0; 91 | } 92 | .pater__title { 93 | font-size: 0.85em; 94 | font-weight: bold; 95 | padding: 0 0 0 1.5em; 96 | } 97 | .pater__desc { 98 | display: none; 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /js/imagesloaded.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * imagesLoaded PACKAGED v4.1.1 3 | * JavaScript is all like "You images are done yet or what?" 4 | * MIT License 5 | */ 6 | 7 | !function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var r=this._onceEvents&&this._onceEvents[t];o;){var s=r&&r[o];s&&(this.off(t,o),delete r[o]),o.apply(this,e),n+=s?0:1,o=i[n]}return this}},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter")):t.imagesLoaded=e(t,t.EvEmitter)}(window,function(t,e){function i(t,e){for(var i in e)t[i]=e[i];return t}function n(t){var e=[];if(Array.isArray(t))e=t;else if("number"==typeof t.length)for(var i=0;i 2 | 3 | 5 | 6 | 14 | 15 | 20 | 21 | 22 | 28 | 29 | 30 | 37 | 38 | 39 | 45 | 46 | 47 | 49 | 52 | 54 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Expanding Grid Item Animation | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
41 |
42 |
43 | 44 | 45 |
46 |

Expanding Grid Item Animation

47 | Based on the Dribbble shot Surf Project by Filip Slováček 48 |
49 | 50 | Storyblocks 51 |

​7 Days of Free Images with Storyblocks

52 |

Download anything you want from over 400,000 photos, vectors, and backgrounds! Start downloading now →

53 | 54 |
55 | 56 |
57 |
58 |
59 |
60 |
61 | img 01 62 |

Marble Dream

63 |

Constantin Frecker

64 |

Hashtag cred air plant drinking vinegar. Leggings yuccie chambray pop-up tousled hell of. Portland wolf mumblecore, synth cold-pressed polaroid poke cardigan gochujang farm-to-table photo booth.

65 |
$129
66 |
67 |
68 |
69 |
70 |
71 | img 02 72 |

Space Fantasy

73 |

Danica Green

74 |

Man bun banjo pop-up meh hammock. Skateboard hammock tousled retro, etsy taiyaki narwhal gentrify fixie food truck microdosing sustainable dreamcatcher.

75 |
$199
76 |
77 |
78 |
79 |
80 |
81 | img 03 82 |

Mighty Eighties

83 |

Elizabeth Smith

84 |

Air plant affogato microdosing banjo, palo santo squid craft beer vexillologist chambray everyday carry cronut aesthetic intelligentsia.

85 |
$159
86 |
87 |
88 |
89 |
90 |
91 | img 04 92 |

Diamond Crafter

93 |

Fred House

94 |

Crucifix shoreditch tumblr heirloom irony tbh gastropub migas sartorial mustache direct trade plaid readymade ramps hammock.

95 |
$199
96 |
97 |
98 |
99 |
100 |
101 | img 05 102 |

Disco Fever

103 |

Alice Muller

104 |

Single-origin coffee air plant kitsch paleo iPhone vegan cold-pressed slow-carb cornhole dreamcatcher palo santo salvia lo-fi.

105 |
$99
106 |
107 |
108 |
109 |
110 |
111 | img 06 112 |

Little Boxes

113 |

Xavier Brighton

114 |

Drinking vinegar lumbersexual 90's flexitarian. Live-edge man bun air plant XOXO. Master cleanse vaporware keffiyeh.

115 |
$299
116 |
117 |
118 |
119 |
120 |
121 | img 07 122 |

Fractal Love

123 |

Walter Perry

124 |

Leggings green juice DIY, flannel tattooed selvage plaid yr sartorial chia. Scenester you probably haven't heard of them locavore.

125 |
$129
126 |
127 |
128 |
129 |
130 |
131 | img 08 132 |

Liquidia

133 |

Lidia Greenwood

134 |

Helvetica la croix readymade, butcher viral pitchfork chillwave pork belly vaporware blue bottle iceland semiotics subway tile irony.

135 |
$249
136 |
137 |
138 |
139 |
140 |
141 | img 09 142 |

The Buzz

143 |

Sarah Grand

144 |

Celiac distillery man braid venmo, selfies you probably haven't heard of them tote bag forage fanny pack activated charcoal kale chips lo-fi before they sold out.

145 |
$399
146 |
147 |
148 |
149 |
150 |
151 | img 10 152 |

Sweet Escape

153 |

Peter Gradia

154 |

Mumblecore bespoke blog raw denim, authentic VHS sustainable +1 freegan neutra small batch paleo. Schlitz chicharrones pork belly palo santo.

155 |
$199
156 |
157 |
158 |
159 |
160 |
161 |

Find this project on GitHub.

162 |

If you enjoyed this demo you might also like:

163 | 164 | 165 |

Grid Item Animation Layout

166 | 167 | 168 | 169 |

Effect Ideas for Image Grids

170 | 171 |

Guitar vector designed by Freepik.

172 |

Patterns by Pixel Buddha.

173 |
174 | 175 | 176 | 177 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} 2 | *, 3 | *::after, 4 | *::before { 5 | box-sizing: border-box; 6 | } 7 | 8 | html { 9 | background: #fff; 10 | } 11 | 12 | body { 13 | --color-text: #000; 14 | --color-bg: #fff; 15 | --color-link: #d35066; 16 | --color-link-hover: #000; 17 | --color-info: #333; 18 | --color-menu: #031de6; 19 | --color-menu-hover: #000; 20 | --grid-columns: 2; 21 | --details-bg-up: #fff; 22 | --details-bg-down: #f5f0ef; 23 | --color-product-title: #000; 24 | --color-product-subtitle: #a09897; 25 | --color-details-title: #000; 26 | --color-details-subtitle: #000; 27 | --color-descr: #000; 28 | --color-price: var(--color-link); 29 | --color-bg-addtocart: #000; 30 | --color-addtocart: #fff; 31 | --color-close: #000; 32 | --color-bg-magnifier: #000; 33 | --color-magnifier: #fff; 34 | --color-btn-hover: #c1b3b1; 35 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 36 | min-height: 100vh; 37 | color: #57585c; 38 | color: var(--color-text); 39 | background-color: #fff; 40 | background-color: var(--color-bg); 41 | -webkit-font-smoothing: antialiased; 42 | -moz-osx-font-smoothing: grayscale; 43 | } 44 | 45 | a { 46 | text-decoration: none; 47 | color: var(--color-link); 48 | outline: none; 49 | } 50 | 51 | a:hover, 52 | a:focus { 53 | color: var(--color-link-hover); 54 | outline: none; 55 | } 56 | 57 | button:focus { 58 | outline: none; 59 | } 60 | 61 | /* Page Loader */ 62 | .js .loading::before, 63 | .js .loading::after { 64 | content: ''; 65 | position: fixed; 66 | z-index: 100000; 67 | top: 0; 68 | left: 0; 69 | width: 100%; 70 | height: 100%; 71 | background: #333; 72 | } 73 | 74 | .js .loading::after { 75 | background: url(../img/electric-guitar.svg) no-repeat 50% 50%; 76 | background-size: 5em; 77 | pointer-events: none; 78 | opacity: 0.1; 79 | animation: loaderAnim 1s linear infinite alternate forwards; 80 | } 81 | 82 | @keyframes loaderAnim { 83 | to { 84 | opacity: 1; 85 | } 86 | } 87 | 88 | .hidden { 89 | position: absolute; 90 | overflow: hidden; 91 | width: 0; 92 | height: 0; 93 | pointer-events: none; 94 | } 95 | 96 | /* Icons */ 97 | .icon { 98 | display: block; 99 | width: 1.5em; 100 | height: 1.5em; 101 | margin: 0 auto; 102 | fill: currentColor; 103 | } 104 | 105 | main { 106 | position: relative; 107 | width: 100%; 108 | } 109 | 110 | .content { 111 | position: relative; 112 | display: block; 113 | } 114 | 115 | /* Header */ 116 | .codrops-header { 117 | padding: 2em; 118 | position: relative; 119 | z-index: 100; 120 | display: flex; 121 | flex-direction: column; 122 | align-items: flex-start; 123 | align-items: center; 124 | } 125 | 126 | .codrops-header__title { 127 | font-size: 2em; 128 | font-weight: bold; 129 | margin: 0; 130 | padding: 0.75em 0; 131 | } 132 | 133 | .codrops-links { 134 | position: relative; 135 | display: flex; 136 | justify-content: center; 137 | text-align: center; 138 | white-space: nowrap; 139 | } 140 | 141 | .codrops-icon { 142 | display: inline-block; 143 | padding: 0.25em; 144 | } 145 | 146 | .info { 147 | color: var(--color-info); 148 | text-align: center; 149 | } 150 | 151 | .github { 152 | display: block; 153 | } 154 | 155 | .grid { 156 | margin: 10em auto 7em; 157 | position: relative; 158 | padding: 0 1em; 159 | width: 100%; 160 | max-width: 1000px; 161 | display: grid; 162 | grid-template-columns: repeat(var(--grid-columns), 1fr); 163 | } 164 | 165 | .grid__item { 166 | padding: 0 4vw; 167 | margin: 0 0 12vh; 168 | } 169 | 170 | .grid__item:nth-child(odd) .product { 171 | margin-top: -8em; 172 | } 173 | 174 | .product { 175 | height: 100%; 176 | padding-top: 10em; 177 | position: relative; 178 | cursor: pointer; 179 | } 180 | 181 | .product__bg { 182 | height: 20em; 183 | background: var(--details-bg-down); 184 | position: relative; 185 | } 186 | 187 | .product__img { 188 | max-height: 25em; 189 | margin: 0 auto; 190 | display: block; 191 | position: absolute; 192 | top: 0; 193 | left: 50%; 194 | pointer-events: none; 195 | transform: translate3d(-50%,0,0); 196 | } 197 | 198 | .product__title { 199 | position: relative; 200 | margin: 0.5em 0 0; 201 | font-size: 1.75em; 202 | color: var(--color-product-title); 203 | font-family: "Playfair Display", serif; 204 | font-weight: 700; 205 | } 206 | 207 | .product__subtitle { 208 | position: relative; 209 | margin: 0; 210 | text-transform: uppercase; 211 | color: var(--color-product-subtitle); 212 | font-size: 0.85em; 213 | letter-spacing: 0.115em; 214 | } 215 | 216 | .product:hover .product__subtitle { 217 | color: var(--color-link); 218 | } 219 | 220 | .product__description, 221 | .product__price { 222 | opacity: 0; 223 | position: absolute; 224 | } 225 | 226 | .details { 227 | position: fixed; 228 | width: 100%; 229 | height: 100%; 230 | bottom: 0; 231 | left: 0; 232 | padding: 40vh 0 10vh 10vw; 233 | z-index: 1000; 234 | display: flex; 235 | flex-direction: column; 236 | align-items: flex-start; 237 | pointer-events: none; 238 | } 239 | 240 | .details--open { 241 | pointer-events: auto; 242 | } 243 | 244 | .details > * { 245 | position: relative; 246 | opacity: 0; 247 | } 248 | 249 | .details__bg { 250 | width: 100%; 251 | position: fixed; 252 | left: 0; 253 | } 254 | 255 | .details__bg--up { 256 | top: 0; 257 | height: 100vh; 258 | background: var(--details-bg-up); 259 | } 260 | 261 | .details__bg--down { 262 | top: 40vh; 263 | height: 60vh; 264 | background: var(--details-bg-down); 265 | } 266 | 267 | .details__img { 268 | position: absolute; 269 | top: 10vh; 270 | right: 10vw; 271 | height: 80vh; 272 | } 273 | 274 | .details__bg, 275 | .details__img { 276 | transform-origin: 0 0; 277 | } 278 | 279 | .details__title { 280 | margin: -1.5em 0 0.1em; 281 | font-size: 4.5em; 282 | color: var(--color-details-title); 283 | font-family: "Playfair Display", serif; 284 | font-weight: 700; 285 | } 286 | 287 | .details__subtitle { 288 | text-transform: uppercase; 289 | margin: 0.75em 0 1em 0; 290 | letter-spacing: 0.115em; 291 | font-size: 1.75em; 292 | color: var(--color-details-subtitle); 293 | } 294 | 295 | .details__description { 296 | line-height: 1.5; 297 | font-weight: bold; 298 | max-width: 50%; 299 | margin: 2em 0 0 0; 300 | color: var(--color-details-desc); 301 | } 302 | 303 | .details__price { 304 | font-size: 3em; 305 | font-weight: bold; 306 | color: var(--color-price); 307 | } 308 | 309 | .details__addtocart { 310 | border: 0; 311 | margin: auto 0 0 0; 312 | background: var(--color-bg-addtocart); 313 | color: var(--color-addtocart); 314 | padding: 0.75em 2em; 315 | font-weight: bold; 316 | } 317 | 318 | .details__addtocart:hover { 319 | background: var(--color-btn-hover); 320 | } 321 | 322 | .details__close { 323 | position: absolute; 324 | top: 0; 325 | right: 0; 326 | border: 0; 327 | background: none; 328 | margin: 2em; 329 | cursor: pointer; 330 | font-size: 0.85em; 331 | color: var(--color-close); 332 | } 333 | 334 | .dummy-menu { 335 | border: 0; 336 | background: none; 337 | padding: 0; 338 | margin: 2.75em 2.5em 0 0; 339 | position: fixed; 340 | top: 0; 341 | right: 0; 342 | font-size: 0.85em; 343 | color: var(--color-close); 344 | cursor: pointer; 345 | z-index: 1000; 346 | } 347 | 348 | .details__magnifier { 349 | border: 0; 350 | background: none; 351 | background: var(--color-bg-magnifier); 352 | color: var(--color-magnifier); 353 | padding: 1em; 354 | border-radius: 50%; 355 | position: absolute; 356 | z-index: 1000; 357 | right: calc(21.5vh + 10vw); 358 | top: 75vh; 359 | cursor: pointer; 360 | } 361 | 362 | .details__magnifier:hover { 363 | background: var(--color-btn-hover); 364 | } 365 | 366 | .details__deco { 367 | width: 7em; 368 | height: 20px; 369 | background-position: 50% 97%; 370 | background-size: 150%; 371 | } 372 | 373 | /* Related demos */ 374 | .content--related { 375 | padding: 8em 5vw; 376 | font-weight: bold; 377 | text-align: center; 378 | background: #000; 379 | color: #f0f0f0; 380 | } 381 | 382 | .content--related a:hover { 383 | color: #fff; 384 | } 385 | 386 | .content--related h2 { 387 | font-size: 1.25em; 388 | } 389 | 390 | .content--related .demos { 391 | padding-bottom: 3em; 392 | } 393 | 394 | .media-item { 395 | display: inline-block; 396 | padding: 1em; 397 | vertical-align: top; 398 | transition: color 0.3s; 399 | } 400 | 401 | .media-item__img { 402 | max-width: 100%; 403 | opacity: 0.8; 404 | transition: opacity 0.3s; 405 | } 406 | 407 | .media-item:hover .media-item__img, 408 | .media-item:focus .media-item__img { 409 | opacity: 1; 410 | } 411 | 412 | .media-item__title { 413 | font-size: 1em; 414 | margin: 0; 415 | padding: 0.5em; 416 | } 417 | 418 | @media screen and (max-width: 40em) { 419 | .grid { 420 | padding: 0 1vw; 421 | } 422 | .grid__item { 423 | padding: 0 2vw; 424 | } 425 | .product__bg { 426 | height: 10em; 427 | } 428 | .product__img { 429 | max-height: 19em; 430 | } 431 | .product__title { 432 | font-size: 1.25em; 433 | } 434 | .product__subtitle { 435 | font-size: 0.75em; 436 | } 437 | .details { 438 | padding: 30vh 0 5vh 10vw; 439 | } 440 | .details__bg--down { 441 | top: 30vh; 442 | height: 70vh; 443 | } 444 | .details__title { 445 | font-size: 2em; 446 | } 447 | .details__subtitle { 448 | font-size: 1em; 449 | } 450 | .details__price { 451 | font-size: 1.5em; 452 | } 453 | .details__description { 454 | max-width: 70%; 455 | font-size: 0.85em; 456 | margin: 1em 0 0 0; 457 | } 458 | .details__deco { 459 | height: 7px; 460 | width: 4em; 461 | } 462 | .details__img { 463 | right: -12vh; 464 | } 465 | .details__magnifier { 466 | right: 7vh; 467 | } 468 | .codrops-header { 469 | padding: 1em 4em; 470 | } 471 | .codrops-header__title { 472 | font-weight: bold; 473 | padding-bottom: 0.25em; 474 | text-align: center; 475 | font-size: 1.25em; 476 | } 477 | .dummy-menu { 478 | margin: 1.75em 1.5em 0 0; 479 | } 480 | } 481 | -------------------------------------------------------------------------------- /js/anime.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | 2017 Julian Garnier 3 | Released under the MIT license 4 | */ 5 | var $jscomp={scope:{}};$jscomp.defineProperty="function"==typeof Object.defineProperties?Object.defineProperty:function(e,r,p){if(p.get||p.set)throw new TypeError("ES3 does not support getters and setters.");e!=Array.prototype&&e!=Object.prototype&&(e[r]=p.value)};$jscomp.getGlobal=function(e){return"undefined"!=typeof window&&window===e?e:"undefined"!=typeof global&&null!=global?global:e};$jscomp.global=$jscomp.getGlobal(this);$jscomp.SYMBOL_PREFIX="jscomp_symbol_"; 6 | $jscomp.initSymbol=function(){$jscomp.initSymbol=function(){};$jscomp.global.Symbol||($jscomp.global.Symbol=$jscomp.Symbol)};$jscomp.symbolCounter_=0;$jscomp.Symbol=function(e){return $jscomp.SYMBOL_PREFIX+(e||"")+$jscomp.symbolCounter_++}; 7 | $jscomp.initSymbolIterator=function(){$jscomp.initSymbol();var e=$jscomp.global.Symbol.iterator;e||(e=$jscomp.global.Symbol.iterator=$jscomp.global.Symbol("iterator"));"function"!=typeof Array.prototype[e]&&$jscomp.defineProperty(Array.prototype,e,{configurable:!0,writable:!0,value:function(){return $jscomp.arrayIterator(this)}});$jscomp.initSymbolIterator=function(){}};$jscomp.arrayIterator=function(e){var r=0;return $jscomp.iteratorPrototype(function(){return rb&&(b+=1);1b?c:b<2/3?a+(c-a)*(2/3-b)*6:a}var d=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(a);a=parseInt(d[1])/360;var b=parseInt(d[2])/100,f=parseInt(d[3])/100,d=d[4]||1;if(0==b)f=b=a=f;else{var n=.5>f?f*(1+b):f+b-f*b,k=2*f-n,f=c(k,n,a+1/3),b=c(k,n,a);a=c(k,n,a-1/3)}return"rgba("+ 13 | 255*f+","+255*b+","+255*a+","+d+")"}function y(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(a))return a[2]}function V(a){if(-1=g.currentTime)for(var G=0;G=w||!k)g.began||(g.began=!0,f("begin")),f("run");if(q>n&&q=k&&r!==k||!k)b(k),x||e();f("update");a>=k&&(g.remaining?(t=h,"alternate"===g.direction&&(g.reversed=!g.reversed)):(g.pause(),g.completed||(g.completed=!0,f("complete"),"Promise"in window&&(p(),m=c()))),l=0)}a=void 0===a?{}:a;var h,t,l=0,p=null,m=c(),g=fa(a);g.reset=function(){var a=g.direction,c=g.loop;g.currentTime= 25 | 0;g.progress=0;g.paused=!0;g.began=!1;g.completed=!1;g.reversed="reverse"===a;g.remaining="alternate"===a&&1===c?2:c;b(0);for(a=g.children.length;a--;)g.children[a].reset()};g.tick=function(a){h=a;t||(t=h);k((l+h-t)*q.speed)};g.seek=function(a){k(d(a))};g.pause=function(){var a=v.indexOf(g);-1=c&&0<=b&&1>=b){var e=new Float32Array(11);if(c!==d||b!==f)for(var k=0;11>k;++k)e[k]=a(.1*k,c,b);return function(k){if(c===d&&b===f)return k;if(0===k)return 0;if(1===k)return 1;for(var h=0,l=1;10!==l&&e[l]<=k;++l)h+=.1;--l;var l=h+(k-e[l])/(e[l+1]-e[l])*.1,n=3*(1-3*b+3*c)*l*l+2*(3*b-6*c)*l+3*c;if(.001<=n){for(h=0;4>h;++h){n=3*(1-3*b+3*c)*l*l+2*(3*b-6*c)*l+3*c;if(0===n)break;var m=a(l,c,b)-k,l=l-m/n}k=l}else if(0=== 29 | n)k=l;else{var l=h,h=h+.1,g=0;do m=l+(h-l)/2,n=a(m,c,b)-k,0++g);k=m}return a(k,d,f)}}}}(),Q=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var c="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),d={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],a],Out:[[.25, 30 | .46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],[.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},b={linear:A(.25,.25,.75,.75)},f={},e;for(e in d)f.type=e,d[f.type].forEach(function(a){return function(d,f){b["ease"+a.type+c[f]]=h.fnc(d)? 31 | d:A.apply($jscomp$this,d)}}(f)),f={type:f.type};return b}(),ha={css:function(a,c,d){return a.style[c]=d},attribute:function(a,c,d){return a.setAttribute(c,d)},object:function(a,c,d){return a[c]=d},transform:function(a,c,d,b,f){b[f]||(b[f]=[]);b[f].push(c+"("+d+")")}},v=[],B=0,ia=function(){function a(){B=requestAnimationFrame(c)}function c(c){var b=v.length;if(b){for(var d=0;db&&(c.duration=d.duration);c.children.push(d)});c.seek(0);c.reset();c.autoplay&&c.restart();return c};return c};q.random=function(a,c){return Math.floor(Math.random()*(c-a+1))+a};return q}); -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * main.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2017, Codrops 9 | * http://www.codrops.com 10 | */ 11 | { 12 | class Details { 13 | constructor() { 14 | this.DOM = {}; 15 | 16 | const detailsTmpl = ` 17 |
18 |
19 | img 01 20 |

21 |
22 |

23 |
24 |

25 | 26 | 27 | 28 | `; 29 | 30 | this.DOM.details = document.createElement('div'); 31 | this.DOM.details.className = 'details'; 32 | this.DOM.details.innerHTML = detailsTmpl; 33 | DOM.content.appendChild(this.DOM.details); 34 | this.init(); 35 | } 36 | init() { 37 | this.DOM.bgUp = this.DOM.details.querySelector('.details__bg--up'); 38 | this.DOM.bgDown = this.DOM.details.querySelector('.details__bg--down'); 39 | this.DOM.img = this.DOM.details.querySelector('.details__img'); 40 | this.DOM.title = this.DOM.details.querySelector('.details__title'); 41 | this.DOM.deco = this.DOM.details.querySelector('.details__deco'); 42 | this.DOM.subtitle = this.DOM.details.querySelector('.details__subtitle'); 43 | this.DOM.price = this.DOM.details.querySelector('.details__price'); 44 | this.DOM.description = this.DOM.details.querySelector('.details__description'); 45 | this.DOM.cart = this.DOM.details.querySelector('.details__addtocart'); 46 | this.DOM.close = this.DOM.details.querySelector('.details__close'); 47 | this.DOM.magnifier = this.DOM.details.querySelector('.details__magnifier'); 48 | 49 | this.initEvents(); 50 | } 51 | initEvents() { 52 | this.DOM.close.addEventListener('click', () => this.isZoomed ? this.zoomOut() : this.close()); 53 | this.DOM.magnifier.addEventListener('click', () => this.zoomIn()); 54 | } 55 | fill(info) { 56 | this.DOM.img.src = info.img; 57 | this.DOM.title.innerHTML = info.title; 58 | this.DOM.deco.style.backgroundImage = `url(${info.img})`; 59 | this.DOM.subtitle.innerHTML = info.subtitle; 60 | this.DOM.price.innerHTML = info.price; 61 | this.DOM.description.innerHTML = info.description; 62 | } 63 | getProductDetailsRect() { 64 | return { 65 | productBgRect: this.DOM.productBg.getBoundingClientRect(), 66 | detailsBgRect: this.DOM.bgDown.getBoundingClientRect(), 67 | productImgRect: this.DOM.productImg.getBoundingClientRect(), 68 | detailsImgRect: this.DOM.img.getBoundingClientRect() 69 | }; 70 | } 71 | open(data) { 72 | if ( this.isAnimating ) return false; 73 | this.isAnimating = true; 74 | 75 | this.DOM.details.classList.add('details--open'); 76 | 77 | this.DOM.productBg = data.productBg; 78 | this.DOM.productImg = data.productImg; 79 | 80 | this.DOM.productBg.style.opacity = 0; 81 | this.DOM.productImg.style.opacity = 0; 82 | 83 | const rect = this.getProductDetailsRect(); 84 | 85 | this.DOM.bgDown.style.transform = `translateX(${rect.productBgRect.left-rect.detailsBgRect.left}px) translateY(${rect.productBgRect.top-rect.detailsBgRect.top}px) scaleX(${rect.productBgRect.width/rect.detailsBgRect.width}) scaleY(${rect.productBgRect.height/rect.detailsBgRect.height})`; 86 | this.DOM.bgDown.style.opacity = 1; 87 | 88 | this.DOM.img.style.transform = `translateX(${rect.productImgRect.left-rect.detailsImgRect.left}px) translateY(${rect.productImgRect.top-rect.detailsImgRect.top}px) scaleX(${rect.productImgRect.width/rect.detailsImgRect.width}) scaleY(${rect.productImgRect.height/rect.detailsImgRect.height})`; 89 | this.DOM.img.style.opacity = 1; 90 | 91 | anime({ 92 | targets: [this.DOM.bgDown,this.DOM.img], 93 | duration: (target, index) => index ? 800 : 250, 94 | easing: (target, index) => index ? 'easeOutElastic' : 'easeOutSine', 95 | elasticity: 250, 96 | translateX: 0, 97 | translateY: 0, 98 | scaleX: 1, 99 | scaleY: 1, 100 | complete: () => this.isAnimating = false 101 | }); 102 | 103 | anime({ 104 | targets: [this.DOM.title, this.DOM.deco, this.DOM.subtitle, this.DOM.price, this.DOM.description, this.DOM.cart, this.DOM.magnifier], 105 | duration: 600, 106 | easing: 'easeOutExpo', 107 | delay: (target, index) => { 108 | return index*60; 109 | }, 110 | translateY: (target, index, total) => { 111 | return index !== total - 1 ? [50,0] : 0; 112 | }, 113 | scale: (target, index, total) => { 114 | return index === total - 1 ? [0,1] : 1; 115 | }, 116 | opacity: 1 117 | }); 118 | 119 | anime({ 120 | targets: this.DOM.bgUp, 121 | duration: 100, 122 | easing: 'linear', 123 | opacity: 1 124 | }); 125 | 126 | anime({ 127 | targets: this.DOM.close, 128 | duration: 250, 129 | easing: 'easeOutSine', 130 | translateY: ['100%',0], 131 | opacity: 1 132 | }); 133 | 134 | anime({ 135 | targets: DOM.hamburger, 136 | duration: 250, 137 | easing: 'easeOutSine', 138 | translateY: [0,'-100%'] 139 | }); 140 | } 141 | close() { 142 | if ( this.isAnimating ) return false; 143 | this.isAnimating = true; 144 | 145 | this.DOM.details.classList.remove('details--open'); 146 | 147 | anime({ 148 | targets: DOM.hamburger, 149 | duration: 250, 150 | easing: 'easeOutSine', 151 | translateY: 0 152 | }); 153 | 154 | anime({ 155 | targets: this.DOM.close, 156 | duration: 250, 157 | easing: 'easeOutSine', 158 | translateY: '100%', 159 | opacity: 0 160 | }); 161 | 162 | anime({ 163 | targets: this.DOM.bgUp, 164 | duration: 100, 165 | easing: 'linear', 166 | opacity: 0 167 | }); 168 | 169 | anime({ 170 | targets: [this.DOM.title, this.DOM.deco, this.DOM.subtitle, this.DOM.price, this.DOM.description, this.DOM.cart, this.DOM.magnifier], 171 | duration: 20, 172 | easing: 'linear', 173 | opacity: 0 174 | }); 175 | 176 | const rect = this.getProductDetailsRect(); 177 | anime({ 178 | targets: [this.DOM.bgDown,this.DOM.img], 179 | duration: 250, 180 | easing: 'easeOutSine', 181 | translateX: (target, index) => { 182 | return index ? rect.productImgRect.left-rect.detailsImgRect.left : rect.productBgRect.left-rect.detailsBgRect.left; 183 | }, 184 | translateY: (target, index) => { 185 | return index ? rect.productImgRect.top-rect.detailsImgRect.top : rect.productBgRect.top-rect.detailsBgRect.top; 186 | }, 187 | scaleX: (target, index) => { 188 | return index ? rect.productImgRect.width/rect.detailsImgRect.width : rect.productBgRect.width/rect.detailsBgRect.width; 189 | }, 190 | scaleY: (target, index) => { 191 | return index ? rect.productImgRect.height/rect.detailsImgRect.height : rect.productBgRect.height/rect.detailsBgRect.height; 192 | }, 193 | complete: () => { 194 | this.DOM.bgDown.style.opacity = 0; 195 | this.DOM.img.style.opacity = 0; 196 | this.DOM.bgDown.style.transform = 'none'; 197 | this.DOM.img.style.transform = 'none'; 198 | this.DOM.productBg.style.opacity = 1; 199 | this.DOM.productImg.style.opacity = 1; 200 | this.isAnimating = false; 201 | } 202 | }); 203 | } 204 | zoomIn() { 205 | this.isZoomed = true; 206 | 207 | anime({ 208 | targets: [this.DOM.title, this.DOM.deco, this.DOM.subtitle, this.DOM.price, this.DOM.description, this.DOM.cart, this.DOM.magnifier], 209 | duration: 100, 210 | easing: 'easeOutSine', 211 | translateY: (target, index, total) => { 212 | return index !== total - 1 ? [0, index === 0 || index === 1 ? -50 : 50] : 0; 213 | }, 214 | scale: (target, index, total) => { 215 | return index === total - 1 ? [1,0] : 1; 216 | }, 217 | opacity: 0 218 | }); 219 | 220 | const imgrect = this.DOM.img.getBoundingClientRect(); 221 | const win = {w: window.innerWidth, h: window.innerHeight}; 222 | 223 | const imgAnimeOpts = { 224 | targets: this.DOM.img, 225 | duration: 250, 226 | easing: 'easeOutCubic', 227 | translateX: win.w/2 - (imgrect.left+imgrect.width/2), 228 | translateY: win.h/2 - (imgrect.top+imgrect.height/2) 229 | }; 230 | 231 | if ( win.w > 0.8*win.h ) { 232 | this.DOM.img.style.transformOrigin = '50% 50%'; 233 | Object.assign(imgAnimeOpts, { 234 | scaleX: 0.95*win.w/parseInt(0.8*win.h), 235 | scaleY: 0.95*win.w/parseInt(0.8*win.h), 236 | rotate: 90 237 | }); 238 | } 239 | anime(imgAnimeOpts); 240 | 241 | anime({ 242 | targets: this.DOM.close, 243 | duration: 250, 244 | easing: 'easeInOutCubic', 245 | scale: 1.8, 246 | rotate: 180 247 | }); 248 | } 249 | zoomOut() { 250 | this.isZoomed = false; 251 | 252 | anime({ 253 | targets: [this.DOM.title, this.DOM.deco, this.DOM.subtitle, this.DOM.price, this.DOM.description, this.DOM.cart, this.DOM.magnifier], 254 | duration: 250, 255 | easing: 'easeOutCubic', 256 | translateY: 0, 257 | scale: 1, 258 | opacity: 1 259 | }); 260 | 261 | anime({ 262 | targets: this.DOM.img, 263 | duration: 250, 264 | easing: 'easeOutCubic', 265 | translateX: 0, 266 | translateY: 0, 267 | scaleX: 1, 268 | scaleY: 1, 269 | rotate: 0, 270 | complete: () => this.DOM.img.style.transformOrigin = '0 0' 271 | }); 272 | 273 | anime({ 274 | targets: this.DOM.close, 275 | duration: 250, 276 | easing: 'easeInOutCubic', 277 | scale: 1, 278 | rotate: 0 279 | }); 280 | } 281 | }; 282 | 283 | class Item { 284 | constructor(el) { 285 | this.DOM = {}; 286 | this.DOM.el = el; 287 | this.DOM.product = this.DOM.el.querySelector('.product'); 288 | this.DOM.productBg = this.DOM.product.querySelector('.product__bg'); 289 | this.DOM.productImg = this.DOM.product.querySelector('.product__img'); 290 | 291 | this.info = { 292 | img: this.DOM.productImg.src, 293 | title: this.DOM.product.querySelector('.product__title').innerHTML, 294 | subtitle: this.DOM.product.querySelector('.product__subtitle').innerHTML, 295 | description: this.DOM.product.querySelector('.product__description').innerHTML, 296 | price: this.DOM.product.querySelector('.product__price').innerHTML 297 | }; 298 | 299 | this.initEvents(); 300 | } 301 | initEvents() { 302 | this.DOM.product.addEventListener('click', () => this.open()); 303 | } 304 | open() { 305 | DOM.details.fill(this.info); 306 | DOM.details.open({ 307 | productBg: this.DOM.productBg, 308 | productImg: this.DOM.productImg 309 | }); 310 | } 311 | }; 312 | 313 | const DOM = {}; 314 | DOM.grid = document.querySelector('.grid'); 315 | DOM.content = DOM.grid.parentNode; 316 | DOM.hamburger = document.querySelector('.dummy-menu'); 317 | DOM.gridItems = Array.from(DOM.grid.querySelectorAll('.grid__item')); 318 | let items = []; 319 | DOM.gridItems.forEach(item => items.push(new Item(item))); 320 | 321 | DOM.details = new Details(); 322 | 323 | imagesLoaded(document.body, () => document.body.classList.remove('loading')); 324 | }; --------------------------------------------------------------------------------