├── .gitignore
├── README.md
├── css
├── demo.css
├── mirror.css
└── normalize.css
├── favicon.ico
├── img
├── 1.jpg
├── 2.jpg
├── 3.jpg
├── 4.jpg
├── LicenseFreepik.txt
├── bg.jpg
├── veggie1.svg
├── veggie2.svg
├── veggie3.svg
├── veggie4.svg
├── wave1.svg
├── wave2.svg
├── wave3.svg
└── wave4.svg
├── index.html
├── index2.html
├── index3.html
└── js
├── anime.min.js
├── imagesloaded.pkgd.min.js
├── mirrorFx.js
└── slideshow.js
/.gitignore:
--------------------------------------------------------------------------------
1 | *.DS_Store
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Mirror Effect
2 |
3 | Mirror effect as seen around the Web lately, i.e. on [Corentin Fardeau's](http://www.corentinfardeau.fr/) and [Method's](http://method.digital/) website. The idea is to mirror an image and animate it within the context of a slideshow.
4 |
5 | [Article on Codrops](https://tympanus.net/codrops/?p=29492)
6 |
7 | [Demo](http://tympanus.net/Development/MirrorEffect/)
8 |
9 | ## License
10 |
11 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".
12 |
13 | Read more here: [License](http://tympanus.net/codrops/licensing/)
14 |
15 | ## Credits
16 |
17 | - [anime.js](http://anime-js.com/) by Julian Garnier
18 | - [imagesLoaded](http://imagesloaded.desandro.com/) by David DeSandro
19 | - Photos from [Unsplash.com](http://unsplash.com) and [Pexel.com](http://pexels.com), licensed under [CC0](https://creativecommons.org/publicdomain/zero/1.0/)
20 | - Sound waves from [Freepik.com](http://freepik.com), [license information](http://support.freepik.com/hc/en-us)
21 | - Veggies from [Freepik.com](http://www.freepik.com/index.php?goto=74&idfoto=969209), [license information](http://support.freepik.com/hc/en-us). See the license file within the images folder.
22 | - Background from [Freepik.com](http://www.freepik.com)
23 | - Play Button by [Madebyolive](http://www.flaticon.com/authors/madebyoliver) from [Flaticon.com](http://www.flaticon.com/free-icon/play-button_149125)
24 |
25 | ## Misc
26 |
27 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](https://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/)
28 |
29 |
30 | [© Codrops 2017](http://www.codrops.com)
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/css/demo.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | -webkit-box-sizing: border-box;
5 | box-sizing: border-box;
6 | }
7 |
8 | body {
9 | font-family: 'Roboto', 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
10 | color: #909090;
11 | background: #111;
12 | }
13 |
14 | a {
15 | text-decoration: none;
16 | color: #909090;
17 | outline: none;
18 | }
19 |
20 | a:hover,
21 | a:focus {
22 | color: #fff;
23 | }
24 |
25 | .hidden {
26 | position: absolute;
27 | overflow: hidden;
28 | width: 0;
29 | height: 0;
30 | pointer-events: none;
31 | }
32 |
33 |
34 | /* Icons */
35 |
36 | .icon {
37 | display: block;
38 | width: 1.5em;
39 | height: 1.5em;
40 | margin: 0 auto;
41 | fill: currentColor;
42 | }
43 |
44 |
45 | /* Page Loader */
46 |
47 | .js body::before {
48 | content: 'Loading...';
49 | font-family: 'Montserrat';
50 | letter-spacing: 0.2em;
51 | text-indent: -0.2em;
52 | text-transform: uppercase;
53 | font-weight: bold;
54 | display: flex;
55 | align-items: center;
56 | justify-content: center;
57 | color: #000;
58 | position: fixed;
59 | top: -100%;
60 | left: 0;
61 | width: 100%;
62 | height: 100%;
63 | background: #facb7a;
64 | z-index: 1000;
65 | pointer-events: none;
66 | transition: transform 0.5s;
67 | }
68 |
69 | .js .loading::before {
70 | transform: translate3d(0,100%,0);
71 | }
72 |
73 | /* Header */
74 |
75 | .codrops-header {
76 | position: relative;
77 | display: flex;
78 | flex-direction: row;
79 | flex-wrap: wrap;
80 | align-items: center;
81 | width: 100%;
82 | padding: 1em;
83 | z-index: 100;
84 | }
85 |
86 | .codrops-header__title {
87 | font-size: 1em;
88 | font-weight: 400;
89 | margin: 0;
90 | padding: 0 1em 0 0.25em;
91 | }
92 |
93 |
94 | /* Top Navigation Style */
95 |
96 | .codrops-links {
97 | position: relative;
98 | display: flex;
99 | justify-content: center;
100 | text-align: center;
101 | white-space: nowrap;
102 | font-size: 0.85em;
103 | }
104 |
105 | .codrops-links::after {
106 | content: '';
107 | height: 100%;
108 | width: 1px;
109 | background: currentColor;
110 | position: absolute;
111 | transform: rotate(22.5deg);
112 | left: 50%;
113 | top: 0;
114 | }
115 |
116 | .codrops-icon {
117 | pointer-events: visible;
118 | display: inline-block;
119 | padding: 0.6em;
120 | }
121 |
122 |
123 | /* Demo links */
124 |
125 | .demos {
126 | margin: 0 1em 0 auto;
127 | }
128 |
129 | .demo {
130 | margin: 0 1em 0.5em 0;
131 | padding: 0 0 0.25em;
132 | border-bottom: 2px solid transparent;
133 | }
134 |
135 | .demos .demo--current {
136 | border-color: currentColor;
137 | }
138 |
139 | /* Content */
140 |
141 | .content {
142 | text-align: center;
143 | }
144 |
145 | .content--full {
146 | height: 100vh;
147 | min-height: 600px;
148 | overflow: hidden;
149 | }
150 |
151 | .flexy {
152 | display: flex;
153 | flex-wrap: wrap;
154 | flex-direction: column;
155 | align-items: center;
156 | }
157 |
158 | .flexy--center {
159 | justify-content: center;
160 | }
161 |
162 | .flexy--row {
163 | flex-direction: row;
164 | }
165 |
166 |
167 | /* Slideshow */
168 |
169 | .slideshow {
170 | position: relative;
171 | width: 100%;
172 | height: calc(100vh - 5.5em);
173 | }
174 |
175 | .slide {
176 | position: relative;
177 | width: 100%;
178 | display: flex;
179 | flex-direction: column;
180 | justify-content: center;
181 | margin: 0 0 1em 0;
182 | pointer-events: none;
183 | }
184 |
185 | .js .slide {
186 | position: absolute;
187 | top: 0;
188 | left: 0;
189 | height: 100%;
190 | margin: 0;
191 | pointer-events: none;
192 | opacity: 0;
193 | }
194 |
195 | .js .slide--current {
196 | pointer-events: auto;
197 | opacity: 1;
198 | }
199 |
200 | .slide__title {
201 | font-family: 'Arapey';
202 | font-weight: normal;
203 | position: relative;
204 | z-index: 10;
205 | font-size: 13vw;
206 | margin: 0;
207 | line-height: 0.8;
208 | color: #8dbd2b;
209 | pointer-events: none;
210 | }
211 |
212 | .slide .mirror {
213 | position: absolute;
214 | top: 50%;
215 | width: 100%;
216 | left: 50%;
217 | transform: translate3d(-50%, -50%, 0);
218 | }
219 |
220 | .slideshow__nav {
221 | position: absolute;
222 | display: flex;
223 | flex-direction: column;
224 | flex-wrap: wrap;
225 | align-items: flex-end;
226 | bottom: 0;
227 | right: 0;
228 | padding: 0 2em 1em;
229 | overflow: hidden;
230 | }
231 |
232 | .slideshow__nav--inline {
233 | display: block;
234 | top: 30vh;
235 | left: 0;
236 | width: 100%;
237 | pointer-events: none;
238 | }
239 |
240 | .slideshow__nav--inline .btn {
241 | display: inline-block;
242 | margin: 0 1em;
243 | pointer-events: auto;
244 | }
245 |
246 | .slideshow__nav--nopad {
247 | padding: 0;
248 | }
249 |
250 | .btn {
251 | border: 0;
252 | background: 0;
253 | margin: 0;
254 | padding: 0;
255 | display: block;
256 | position: relative;
257 | padding: 0.25em 0;
258 | margin: 0.5em 0 0.75em;
259 | color: inherit;
260 | border-bottom: 2px solid transparent;
261 | transition: border-color 0.3s;
262 | }
263 |
264 | .btn:focus {
265 | outline: none;
266 | }
267 |
268 | .btn--current {
269 | border-color: currentColor;
270 | }
271 |
272 | .btn--nav:last-child {
273 | margin-bottom: 0;
274 | }
275 |
276 | .btn--line {
277 | width: 100%;
278 | text-align: right;
279 | padding: 0.15em 30px 0.15em 0;
280 | transition: color 0.3s;
281 | }
282 |
283 | .btn--line::before {
284 | content: '';
285 | width: 10px;
286 | height: 2px;
287 | position: absolute;
288 | right: 0;
289 | top: 50%;
290 | z-index: -1;
291 | margin-top: -1px;
292 | background: #ffb74d;
293 | transition: transform 0.3s;
294 | }
295 |
296 | .btn--line.btn--current {
297 | border-color: transparent;
298 | color: #fff;
299 | }
300 |
301 | .btn--line.btn--current::before {
302 | transform: scale3d(26, 20, 1);
303 | }
304 |
305 | .btn--play {
306 | top: 70vh;
307 | left: 50%;
308 | color: #ffb74d;
309 | font-size: 3em;
310 | transform: translateX(-50%);
311 | position: absolute;
312 | transition: color 0.3s;
313 | }
314 |
315 | .btn--play:hover {
316 | color: #fff;
317 | }
318 |
319 | .link--sponsor {
320 | position: absolute;
321 | left: 0;
322 | margin: 0 0 2em 2em;
323 | bottom: 0;
324 | }
325 |
326 | .page-title {
327 | font-family: 'Montserrat';
328 | position: absolute;
329 | top: 25vh;
330 | pointer-events: none;
331 | text-align: center;
332 | width: 100%;
333 | padding: 0 1em;
334 | margin: 0;
335 | font-size: 2em;
336 | letter-spacing: 0.2em;
337 | text-indent: 0.2em;
338 | text-transform: uppercase;
339 | color: #fff;
340 | }
341 |
342 | .overlay {
343 | position: fixed;
344 | top: 0;
345 | right: 0;
346 | width: 50%;
347 | height: 100%;
348 | background: #A8A9C8 url(../img/bg.jpg);
349 | background-size: cover;
350 | }
351 |
352 | /* Themes */
353 |
354 | .demo-1 .page-title {
355 | z-index: 10;
356 | font-size: 0.85em;
357 | font-family: inherit;
358 | letter-spacing: 0.5em;
359 | text-indent: 0.5em;
360 | top: 38vh;
361 | }
362 |
363 | .demo-1 .slide:first-child .slide__title,
364 | .demo-1 .slideshow__nav .btn:first-child {
365 | color: #facb7a;
366 | }
367 |
368 | .demo-1 .slide:nth-child(2) .slide__title,
369 | .demo-1 .slideshow__nav .btn:nth-child(2) {
370 | color: #d06690;
371 | }
372 |
373 | .demo-1 .slide:nth-child(3) .slide__title,
374 | .demo-1 .slideshow__nav .btn:nth-child(3) {
375 | color: #9ccc65;
376 | }
377 |
378 | .demo-1 .slide:nth-child(4) .slide__title,
379 | .demo-1 .slideshow__nav .btn:nth-child(4) {
380 | color: #90a4ae;
381 | }
382 |
383 | .js body.demo-2::before {
384 | background: #fda32f;
385 | color: #fff;
386 | }
387 |
388 | .demo-2 {
389 | background: #f53c56;
390 | color: #fff;
391 | }
392 |
393 | .demo-2 a {
394 | color: #fff;
395 | }
396 |
397 | .demo-2 a:hover,
398 | .demo-2 a:focus {
399 | color: #000;
400 | }
401 |
402 | .demo-2 .slide__title {
403 | font-family: 'Anton', sans-serif;
404 | text-transform: uppercase;
405 | color: #fff;
406 | }
407 |
408 | .demo-2 .slideshow {
409 | overflow: hidden;
410 | }
411 |
412 | .demo-2 .slideshow__nav {
413 | padding-bottom: 2em;
414 | min-width: 10em;
415 | }
416 |
417 | .demo-3 {
418 | background: #2357c1;
419 | color: #fff;
420 | }
421 |
422 | .js body.demo-3::before {
423 | background: #a4b7e4;
424 | color: #fff;
425 | }
426 |
427 | .demo-3 a {
428 | color: #fff;
429 | }
430 |
431 | .demo-3 a:hover,
432 | .demo-3 a:focus {
433 | color: #fff;
434 | }
435 |
436 | .demo-3 .demo,
437 | .demo-3 .github {
438 | color: #2d3f61;
439 | }
440 |
441 | .demo-3 .slide {
442 | mix-blend-mode: color-burn;
443 | }
444 |
445 | .demo-3 .slideshow__nav {
446 | left: 0;
447 | right: auto;
448 | }
449 |
450 | .demo-3 .mirror {
451 | opacity: 0.25;
452 | }
453 |
454 | .demo-3 .mirror__side {
455 | padding: 4em 0;
456 | }
457 |
458 | .demo-3 .slide__title {
459 | color: #2d3f61;
460 | font-family: Raleway, sans-serif;
461 | text-transform: uppercase;
462 | font-weight: 900;
463 | font-size: 7em;
464 | }
465 |
466 | .demo-3 .slideshow__nav .btn {
467 | color: #ffeb3b;
468 | }
469 |
470 | .demo-3 .slideshow__nav .btn:hover {
471 | color: #fff;
472 | }
473 |
474 | .demo-3 .mirror__img {
475 | max-height: 65vh;
476 | }
477 |
478 |
479 | @media screen and (max-width: 50em) {
480 | .codrops-header {
481 | justify-content: center;
482 | }
483 | .link--sponsor {
484 | width: 100%;
485 | margin: 0;
486 | padding: 1em;
487 | }
488 | .demos {
489 | width: 100%;
490 | margin: 1em 0 0;
491 | }
492 | .page-title {
493 | font-size: 1.25em;
494 | }
495 | .slideshow__nav {
496 | width: 100%;
497 | padding: 0;
498 | bottom: auto;
499 | top: 0;
500 | display: block;
501 | }
502 | .page-title {
503 | top: 8em;
504 | }
505 | .demo-3 .slide__title {
506 | font-size: 2em;
507 | }
508 | .btn {
509 | width: auto;
510 | padding: 0;
511 | display: inline-block;
512 | margin: 0.15em;
513 | }
514 | .btn--line::before {
515 | display: none;
516 | }
517 | .btn--current.btn--line::before {
518 | transform: none;
519 | display: block;
520 | top: auto;
521 | bottom: -0.5em;
522 | width: 100%;
523 | }
524 | }
525 |
--------------------------------------------------------------------------------
/css/mirror.css:
--------------------------------------------------------------------------------
1 | .mirror {
2 | width: 60vw;
3 | max-width: 1100px;
4 | margin: 0 auto;
5 | display: flex;
6 | align-items: center;
7 | }
8 |
9 | .mirror[data-layout="vertical"] {
10 | flex-direction: row;
11 | flex-wrap: wrap;
12 | }
13 |
14 | .mirror__side {
15 | flex: none;
16 | overflow: hidden;
17 | width: 50%;
18 | display: flex;
19 | align-items: flex-end;
20 | }
21 |
22 | .mirror[data-layout="vertical"] .mirror__side{
23 | height: 50%;
24 | width: 100%;
25 | }
26 |
27 | .mirror__img {
28 | display: block;
29 | width: 100%;
30 | transform: translate3d(100%,0,0);
31 | }
32 |
33 | .mirror[data-layout="vertical"] .mirror__img {
34 | transform: translate3d(0,100%,0);
35 | }
36 |
37 | .mirror__side--two {
38 | transform: scale3d(-1,1,1);
39 | }
40 |
41 | .mirror[data-layout="vertical"] .mirror__side--two {
42 | transform: scale3d(1,-1,1);
43 | }
--------------------------------------------------------------------------------
/css/normalize.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;}
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MirrorEffect/70cc1f1406d6f4970bdcae2b4f07c286941a342c/favicon.ico
--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MirrorEffect/70cc1f1406d6f4970bdcae2b4f07c286941a342c/img/1.jpg
--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MirrorEffect/70cc1f1406d6f4970bdcae2b4f07c286941a342c/img/2.jpg
--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MirrorEffect/70cc1f1406d6f4970bdcae2b4f07c286941a342c/img/3.jpg
--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MirrorEffect/70cc1f1406d6f4970bdcae2b4f07c286941a342c/img/4.jpg
--------------------------------------------------------------------------------
/img/LicenseFreepik.txt:
--------------------------------------------------------------------------------
1 | IMPORTANT NOTICE: This license only applies if you downloaded this vector as
2 | an unsubscribed user. If you are a premium user (ie, you pay a subscription)
3 | you are bound to the license terms described in the accompanying file
4 | "License premium.txt".
5 |
6 | ---------------------
7 |
8 | You must attribute the image to its author:
9 |
10 | In order to use a vector or a part of it, you must attribute it to Freepik,
11 | so we will be able to continue creating new graphic resources every day.
12 |
13 |
14 | How to attribute it?
15 |
16 | For websites:
17 |
18 | Please, copy this code on your website to accredit the author:
19 | Designed by Freepik
20 |
21 | For printing:
22 |
23 | Paste this text on the final work so the authorship is known.
24 | - For example, in the acknowledgements chapter of a book:
25 | "Designed by Freepik"
26 |
27 |
28 | You are free to use this image:
29 |
30 | - For both personal and commercial projects and to modify it.
31 | - In a website or presentation template or application or as part of your design.
32 |
33 | You are not allowed to:
34 |
35 | - Sub-license, resell or rent it.
36 | - Include it in any online or offline archive or database.
37 |
38 | The full terms of the license are described in section 7 of the Freepik
39 | terms of use, available online in the following link:
40 |
41 | http://www.freepik.com/terms_of_use
42 |
43 | The terms described in the above link have precedence over the terms described
44 | in the present document. In case of disagreement, the Freepik Terms of Use
45 | will prevail.
46 |
--------------------------------------------------------------------------------
/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MirrorEffect/70cc1f1406d6f4970bdcae2b4f07c286941a342c/img/bg.jpg
--------------------------------------------------------------------------------
/img/wave1.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
465 |
--------------------------------------------------------------------------------
/img/wave2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
538 |
--------------------------------------------------------------------------------
/img/wave3.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
431 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Mirror Effect | Demo 1 | Codrops
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
29 |
30 |
31 |
44 | Maitri Animal Sanctuary
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
Simba
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
Anette
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
Matuba
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
Boris
89 |
90 |
96 |
Dreams in Colors
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
Clouds
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
Unfolding
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
Sleeping
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
Horizons
92 |
93 |
99 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
Artichoke
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
Avocado
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
Lemon
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
Beetroot
89 |
90 |
96 |