├── .gitignore
├── favicon.ico
├── img
├── 1.jpg
├── 2.jpg
├── 3.jpg
├── 4.jpg
├── bg.jpg
├── LicenseFreepik.txt
├── wave3.svg
├── wave1.svg
└── wave2.svg
├── css
├── mirror.css
├── normalize.css
└── demo.css
├── README.md
├── js
├── slideshow.js
├── imagesloaded.pkgd.min.js
├── mirrorFx.js
└── anime.min.js
├── index3.html
├── index.html
└── index2.html
/.gitignore:
--------------------------------------------------------------------------------
1 | *.DS_Store
2 |
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MirrorEffect/HEAD/favicon.ico
--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MirrorEffect/HEAD/img/1.jpg
--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MirrorEffect/HEAD/img/2.jpg
--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MirrorEffect/HEAD/img/3.jpg
--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MirrorEffect/HEAD/img/4.jpg
--------------------------------------------------------------------------------
/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MirrorEffect/HEAD/img/bg.jpg
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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;}
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/js/slideshow.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 | ;(function(window) {
12 |
13 | 'use strict';
14 |
15 | // Helper vars and functions.
16 | function extend( a, b ) {
17 | for( var key in b ) {
18 | if( b.hasOwnProperty( key ) ) {
19 | a[key] = b[key];
20 | }
21 | }
22 | return a;
23 | }
24 |
25 | function Slideshow(el, options) {
26 | this.el = el;
27 | this.options = extend({}, this.options);
28 | extend(this.options, options);
29 | this.items = [].slice.call(this.el.querySelectorAll('.slide'));
30 | this.itemsTotal = this.items.length;
31 | this.nav = this.el.querySelector('.slideshow__nav');
32 | this.navitems = [].slice.call(this.nav.querySelectorAll('.btn--nav'));
33 | this.current = 0;
34 | this._init();
35 | }
36 |
37 | Slideshow.prototype.options = {
38 | duration: {show: 1500, hide: 500},
39 | delay: {show: 250, hide: 0},
40 | easing: {show: 'easeOutExpo', hide: 'easeOutExpo'},
41 | titleAnimation: 'vertical'
42 | };
43 |
44 | Slideshow.prototype._init = function() {
45 | var self = this;
46 |
47 | // Initialize a MirrorFx instance per item and store the references in an array:
48 | this.mirrorElems = [];
49 | this.items.forEach(function(item) {
50 | self.mirrorElems.push(new MirrorFx(item.querySelector('.mirror')));
51 | });
52 |
53 | // Show the first item´s images and title:
54 | this.items[this.current].classList.add('slide--current');
55 | this.mirrorElems[this.current].show();
56 | this._showTitle();
57 |
58 | // Set the current class to the navigation link.
59 | this.navitems[this.current].classList.add('btn--current');
60 | // Init/Bind the events.
61 | this._initEvents();
62 | };
63 |
64 | Slideshow.prototype._showTitle = function(pos) {
65 | this._toggleTitle('show', pos);
66 | };
67 |
68 | Slideshow.prototype._hideTitle = function(pos) {
69 | this._toggleTitle('hide', pos);
70 | };
71 |
72 | Slideshow.prototype._toggleTitle = function(action, pos) {
73 | var pos = pos != undefined ? pos : this.current,
74 | title = this.items[pos].querySelector('.slide__title');
75 |
76 | anime.remove(title);
77 | var opts = {
78 | targets: title,
79 | duration: this.options.duration[action],
80 | easing: this.options.easing[action],
81 | delay: this.options.delay[action],
82 | opacity: action === 'show' ? [0,1] : [1,0]
83 | };
84 |
85 | if( this.options.titleAnimation === 'vertical' ) {
86 | opts.translateY = action === 'show' ? [50,0] : [0,50];
87 | }
88 | else {
89 | opts.translateX = action === 'show' ? [50,0] : [0,50];
90 | }
91 |
92 | anime(opts);
93 | };
94 |
95 | Slideshow.prototype._initEvents = function() {
96 | var self = this;
97 |
98 | this.navitems.forEach(function(item, pos) {
99 | self._clickNavItem = function(ev) {
100 | if( self.current === pos || self.isAnimating ) {
101 | return false;
102 | }
103 | self.isAnimating = true;
104 | self._navigate(pos);
105 | };
106 | item.addEventListener('click', self._clickNavItem);
107 | });
108 | };
109 |
110 | Slideshow.prototype._navigate = function(pos) {
111 | var self = this,
112 | currentItem = this.items[this.current],
113 | currentItemTitle = currentItem.querySelector('.slide__title'),
114 | nextItem = this.items[pos];
115 |
116 | this.navitems[this.current].classList.remove('btn--current');
117 | this.navitems[pos].classList.add('btn--current');
118 |
119 | this.mirrorElems[this.current].hide(function() {
120 | currentItem.style.opacity = 0;
121 | currentItem.classList.remove('slide--current');
122 |
123 | self.current = pos;
124 |
125 | self.mirrorElems[self.current].show();
126 |
127 | nextItem.style.opacity = 1;
128 | nextItem.classList.add('slide--current');
129 | // Show the next title.
130 | self._showTitle(pos);
131 |
132 | self.isAnimating = false;
133 | });
134 |
135 | // Hide the current title.
136 | this._hideTitle();
137 | };
138 |
139 | window.Slideshow = Slideshow;
140 |
141 | })(window);
--------------------------------------------------------------------------------
/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 |
4 |
5 |
6 |
7 | Mirror Effect | Demo 3 | Codrops
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
29 |
30 |
31 |
32 |
45 |
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 |
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 |