├── README.md
├── css
├── component.css
└── default.css
├── fonts
├── codropsicons
│ ├── codropsicons.eot
│ ├── codropsicons.svg
│ ├── codropsicons.ttf
│ ├── codropsicons.woff
│ └── license.txt
└── mdicons
│ ├── license.txt
│ ├── md-icons.dev.svg
│ ├── md-icons.eot
│ ├── md-icons.svg
│ ├── md-icons.ttf
│ └── md-icons.woff
├── images
├── site1.jpg
├── site2.jpg
├── site3.jpg
├── site3r.jpg
├── site4.jpg
└── site4r.jpg
├── index.html
└── js
├── modernizr.custom.js
└── morphingdevice.js
/README.md:
--------------------------------------------------------------------------------
1 |
2 | Morphing Devices
3 | =========
4 |
5 | An experimental morphing device slideshow with CSS Transitions for showcasing responsive web design screenshots.
6 |
7 | [article on Codrops](http://tympanus.net/codrops/?p=15036)
8 |
9 | [demo](http://tympanus.net/Development/MorphingDevices/)
10 |
11 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/)
--------------------------------------------------------------------------------
/css/component.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'md-icons';
3 | src:url('../fonts/mdicons/md-icons.eot');
4 | src:url('../fonts/mdicons/md-icons.eot?#iefix') format('embedded-opentype'),
5 | url('../fonts/mdicons/md-icons.woff') format('woff'),
6 | url('../fonts/mdicons/md-icons.ttf') format('truetype'),
7 | url('../fonts/mdicons/md-icons.svg#md-icons') format('svg');
8 | font-weight: normal;
9 | font-style: normal;
10 | }
11 |
12 | /* Slider style */
13 | .md-slider {
14 | width: 100%;
15 | position: relative;
16 | height: 700px;
17 | padding-top: 40px;
18 | margin: 10px 0;
19 | }
20 |
21 | .md-slider > nav {
22 | position: absolute;
23 | text-align: center;
24 | width: 100%;
25 | top: 0;
26 | }
27 |
28 | .md-slider > nav a {
29 | display: inline-block;
30 | width: 14px;
31 | height: 14px;
32 | background: #ddd;
33 | margin: 3px;
34 | border-radius: 2px;
35 | outline: none;
36 | }
37 |
38 | .touch .md-slider > nav a {
39 | width: 20px;
40 | height: 20px;
41 | margin: 2px 8px;
42 | }
43 |
44 | .md-slider > nav a:hover,
45 | .md-slider > nav a.md-current {
46 | background: #aaa;
47 | }
48 |
49 | /* General style for all devices */
50 | .md-device-wrapper {
51 | position: relative;
52 | text-align: center;
53 | width: 760px;
54 | margin: 0 auto;
55 | }
56 |
57 | .md-device {
58 | position: relative;
59 | display: inline-block;
60 | border-radius: 5px;
61 | background-color: #333;
62 | -webkit-transform: translateY(0px);
63 | -moz-transform: translateY(0px);
64 | -ms-transform: translateY(0px);
65 | transform: translateY(0px);
66 | }
67 |
68 | .md-device > a,
69 | .md-device > a img {
70 | display: block;
71 | outline: none;
72 | }
73 |
74 | .md-device > a {
75 | position: relative;
76 | }
77 |
78 | .md-device > a img {
79 | width: 100%;
80 | height: 100%;
81 | position: absolute;
82 | top: 0;
83 | left: 0;
84 | }
85 |
86 | .md-device > a img.md-fadeout {
87 | opacity: 0;
88 | }
89 |
90 | /* reset box sizing for this demo */
91 | /* we want the paddings to be added to our width/height */
92 | .md-device,
93 | .md-device div,
94 | .md-device:before,
95 | .md-device:after {
96 | -webkit-box-sizing: content-box;
97 | -moz-box-sizing: content-box;
98 | box-sizing: content-box;
99 | }
100 |
101 | /* Common pseudo elements' properties */
102 | /* md-device:before -- camera / top element */
103 | /* md-device:after -- home button */
104 | /* md-base-element:after -- socket of base */
105 | /* md-border-element:after -- grey inset opending macbook */
106 | .md-device:before,
107 | .md-device:after,
108 | .md-base-element:after,
109 | .md-border-element:after {
110 | position: absolute;
111 | content: '';
112 | z-index: 1000;
113 | left: 50%;
114 | top: 0;
115 | }
116 |
117 | .md-device:before,
118 | .md-device:after {
119 | background: #000;
120 | }
121 |
122 | .md-device:before {
123 | -webkit-transform: translateY(300%) translateX(-50%);
124 | -moz-transform: translateY(300%) translateX(-50%);
125 | -ms-transform: translateY(300%) translateX(-50%);
126 | transform: translateY(300%) translateX(-50%);
127 | width: 4px;
128 | height: 4px;
129 | border-radius: 50%;
130 | }
131 |
132 | .md-device > div {
133 | position: absolute;
134 | }
135 |
136 | /* button for rotating a device */
137 | .md-device button {
138 | position: absolute;
139 | top: 50%;
140 | left: 50%;
141 | width: 50px;
142 | height: 50px;
143 | border-radius: 50%;
144 | z-index: 1001;
145 | border: none;
146 | color: #fff;
147 | background: #101010;
148 | text-align: center;
149 | cursor: pointer;
150 | margin: -25px 0 0 -25px;
151 | opacity: 0;
152 | outline: none;
153 | }
154 |
155 | .md-device:hover button,
156 | .touch .md-device button {
157 | opacity: 1;
158 | }
159 |
160 | .md-device button:before {
161 | font-family: 'md-icons';
162 | speak: none;
163 | font-style: normal;
164 | font-weight: normal;
165 | font-variant: normal;
166 | text-transform: none;
167 | font-size: 30px;
168 | line-height: 50px;
169 | -webkit-font-smoothing: antialiased;
170 | content: "\e000";
171 | }
172 |
173 | .md-device.md-rotated button {
174 | -webkit-transform: scaleX(-1);
175 | -moz-transform: scaleX(-1);
176 | transform: scaleX(-1);
177 | }
178 |
179 | /* Let's predefine some properties so that transitions happen smoothly */
180 | .md-border-element,
181 | .md-base-element,
182 | .md-border-element:after {
183 | opacity: 0;
184 | }
185 |
186 | /* md-device:after -- home button (device 3 and 4) */
187 | .md-device:after {
188 | width: 24px;
189 | height: 24px;
190 | top: 100%;
191 | border-radius: 50%;
192 | -webkit-transform-origin: 50% 100%;
193 | -moz-transform-origin: 50% 100%;
194 | transform-origin: 50% 100%;
195 | -webkit-transform: translateY(-200%) translateX(-50%) scale(0);
196 | -moz-transform: translateY(-200%) translateX(-50%) scale(0);
197 | -ms-transform: translateY(-200%) translateX(-50%) scale(0);
198 | transform: translateY(-200%) translateX(-50%) scale(0);
199 | }
200 |
201 | /* md-border-element -- border bottom iMac, keyboard/base macbook */
202 | .md-border-element {
203 | height: 60px;
204 | border-radius: 0 0 5px 5px;
205 | top: 100%;
206 | width: 100%;
207 | background: #ddd;
208 | left: 50%;
209 | }
210 |
211 | /* md-border-element:after; -- grey inset opending macbook */
212 | .md-border-element:after {
213 | background: #aaa;
214 | width: 100px;
215 | border-radius: 0 0 6px 6px;
216 | height: 10px;
217 | opacity: 0;
218 | }
219 |
220 | .md-border-element,
221 | .md-border-element:after {
222 | -webkit-transform: translateX(-50%);
223 | -moz-transform: translateX(-50%);
224 | -ms-transform: translateX(-50%);
225 | transform: translateX(-50%);
226 | }
227 |
228 | /* md-base-element -- base imac */
229 | .md-base-element {
230 | top: 100%;
231 | left: 50%;
232 | width: 160px;
233 | height: 0;
234 | background: transparent;
235 | border-bottom: 60px solid #ddd;
236 | border-left: 15px solid transparent;
237 | border-right: 15px solid transparent;
238 | -webkit-transform: translateY(60px) translateX(-50%) translateY(-75%);
239 | -moz-transform: translateY(60px) translateX(-50%) translateY(-75%);
240 | -ms-transform: translateY(60px) translateX(-50%) translateY(-75%);
241 | transform: translateY(60px) translateX(-50%) translateY(-75%);
242 | z-index: -1;
243 | }
244 |
245 | /* md-base-element:after -- socket of base imac */
246 | .md-base-element:after {
247 | background: #ddd;
248 | border-radius: 30px 30px 10px 10px;
249 | width: 260px;
250 | height: 12px;
251 | -webkit-transform: translateY(60px) translateX(-50%);
252 | -moz-transform: translateY(60px) translateX(-50%);
253 | -ms-transform: translateY(60px) translateX(-50%);
254 | transform: translateY(60px) translateX(-50%);
255 | }
256 |
257 | /* Device 1 (large monitor) */
258 | .md-device-1 {
259 | padding: 30px;
260 | border-radius: 5px 5px 0 0;
261 | }
262 |
263 | .md-device-1 > a {
264 | width: 700px;
265 | height: 455px;
266 | }
267 |
268 | .md-device-1 .md-border-element {
269 | opacity: 1;
270 | }
271 |
272 | .md-device-1 .md-base-element {
273 | opacity: 1;
274 | -webkit-transform: translateY(60px) translateX(-50%) translateY(0);
275 | -moz-transform: translateY(60px) translateX(-50%) translateY(0);
276 | -ms-transform: translateY(60px) translateX(-50%) translateY(0);
277 | transform: translateY(60px) translateX(-50%) translateY(0);
278 | }
279 |
280 | /* Device 2 (laptop) */
281 | .md-device-2 {
282 | padding: 30px;
283 | border-radius: 5px 5px 0 0;
284 | }
285 |
286 | .md-device-2 > a {
287 | width: 600px;
288 | height: 390px;
289 | }
290 |
291 | .md-device-2 .md-border-element {
292 | opacity: 1;
293 | width: 125%;
294 | height: 35px;
295 | background: #ddd;
296 | border-radius: 0 0 20px 20px;
297 | }
298 |
299 | .md-device-2 .md-border-element:after {
300 | opacity: 1;
301 | }
302 |
303 | /* Device 3 (tablet) */
304 | .md-device-3 {
305 | padding: 55px 40px;
306 | -webkit-transform: translateY(40px);
307 | -moz-transform: translateY(40px);
308 | -ms-transform: translateY(40px);
309 | transform: translateY(40px);
310 | }
311 |
312 | .md-device-3.md-rotated {
313 | -webkit-transform: translateY(40px) rotate(90deg);
314 | -moz-transform: translateY(40px) rotate(90deg);
315 | -ms-transform: translateY(40px) rotate(90deg);
316 | transform: translateY(40px) rotate(90deg);
317 | }
318 |
319 | .md-device-3 > a {
320 | width: 280px;
321 | height: 375px;
322 | }
323 |
324 | .md-device-3:before {
325 | -webkit-transform: translateY(600%) translateX(-50%);
326 | -moz-transform: translateY(600%) translateX(-50%);
327 | -ms-transform: translateY(600%) translateX(-50%);
328 | transform: translateY(600%) translateX(-50%);
329 | }
330 |
331 | .md-device-3:after {
332 | -webkit-transform: translateY(-175%) translateX(-50%) scale(1);
333 | -moz-transform: translateY(-175%) translateX(-50%) scale(1);
334 | -ms-transform: translateY(-175%) translateX(-50%) scale(1);
335 | transform: translateY(-175%) translateX(-50%) scale(1);
336 | }
337 |
338 | /* Device 4 (smartphone) */
339 | .md-device-4 {
340 | padding: 50px 12px 70px;
341 | -webkit-transform: translateY(50px);
342 | -moz-transform: translateY(50px);
343 | -ms-transform: translateY(50px);
344 | transform: translateY(50px);
345 | }
346 |
347 | .md-device-4.md-rotated {
348 | -webkit-transform: translateY(50px) rotate(90deg);
349 | -moz-transform: translateY(50px) rotate(90deg);
350 | -ms-transform: translateY(50px) rotate(90deg);
351 | transform: translateY(50px) rotate(90deg);
352 | }
353 |
354 | .md-device-4 > a {
355 | width: 200px;
356 | height: 299px;
357 | }
358 |
359 | .md-device-4:before {
360 | width: 20px;
361 | height: 4px;
362 | border-radius: 3px;
363 | -webkit-transform: translateY(600%) translateX(-50%);
364 | -moz-transform: translateY(600%) translateX(-50%);
365 | transform: translateY(600%) translateX(-50%);
366 | }
367 |
368 | .md-device-4:after {
369 | -webkit-transform: translateY(-200%) translateX(-50%) scale(1);
370 | -moz-transform: translateY(-200%) translateX(-50%) scale(1);
371 | transform: translateY(-200%) translateX(-50%) scale(1);
372 | }
373 |
374 | /* Transitions */
375 | .md-device,
376 | .md-device:before,
377 | .md-border-element,
378 | .md-device > a {
379 | -webkit-transition: all 0.3s;
380 | -moz-transition: all 0.3s;
381 | transition: all 0.3s;
382 | }
383 |
384 | .md-base-element,
385 | .md-device:after,
386 | .md-border-element:after {
387 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
388 | -moz-transition: -moz-transform 0.3s, opacity 0.3s;
389 | transition: transform 0.3s, opacity 0.3s;
390 | }
391 |
392 | .md-device,
393 | .md-device:before,
394 | .md-border-element,
395 | .md-device > a,
396 | .md-base-element,
397 | .md-device:after,
398 | .md-border-element:after {
399 | -webkit-transition-timing-function: ease-in-out;
400 | -moz-transition-timing-function: ease-in-out;
401 | transition-timing-function: ease-in-out;
402 | }
403 |
404 | .md-device > a img {
405 | -webkit-transition: opacity 0.5s linear;
406 | -moz-transition: opacity 0.5s linear;
407 | transition: opacity 0.5s linear;
408 | }
409 |
410 | .md-device button {
411 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
412 | -moz-transition: -moz-transform 0.3s, opacity 0.3s;
413 | transition: transform 0.3s, opacity 0.3s;
414 | }
415 |
416 | @media screen and (max-width: 850px){
417 |
418 | .md-slider {
419 | height: 400px;
420 | }
421 |
422 | .md-device-wrapper {
423 | -webkit-transform: scale(0.5) translateX(-50%) translateY(10%);
424 | -moz-transform: scale(0.5) translateX(-50%) translateY(10%);
425 | -ms-transform: scale(0.5) translateX(-50%) translateY(10%);
426 | transform: scale(0.5) translateX(-50%) translateY(10%);
427 | -webkit-transform-origin: 0 0;
428 | -moz-transform-origin: 0 0;
429 | -ms-transform-origin: 0 0;
430 | transform-origin: 0 0;
431 | left: 50%;
432 | }
433 |
434 | }
--------------------------------------------------------------------------------
/css/default.css:
--------------------------------------------------------------------------------
1 | /* General Demo Style */
2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
3 |
4 | @font-face {
5 | font-family: 'codropsicons';
6 | src:url('../fonts/codropsicons/codropsicons.eot');
7 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
8 | url('../fonts/codropsicons/codropsicons.woff') format('woff'),
9 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
10 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
11 | font-weight: normal;
12 | font-style: normal;
13 | }
14 |
15 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
16 | body, html { font-size: 100%; padding: 0; margin: 0;}
17 |
18 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
19 | .clearfix:before, .clearfix:after { content: " "; display: table; }
20 | .clearfix:after { clear: both; }
21 |
22 | body {
23 | font-family: 'Lato', Calibri, Arial, sans-serif;
24 | color: #89867e;
25 | background: #f9f9f9;
26 | overflow-x: hidden;
27 | }
28 |
29 | a {
30 | color: #888;
31 | text-decoration: none;
32 | }
33 |
34 | a:hover,
35 | a:active {
36 | color: #333;
37 | }
38 |
39 | /* Header Style */
40 | .main {
41 | padding: 0 1em;
42 | margin: 0 auto;
43 | }
44 | .container > header {
45 | padding: 1em;
46 | }
47 |
48 | .container > header {
49 | text-align: center;
50 | background: rgba(0,0,0,0.03);
51 | }
52 |
53 | .container > header h1 {
54 | font-size: 2.625em;
55 | line-height: 1.4;
56 | margin: 0;
57 | font-weight: 300;
58 | color: #f57786;
59 | }
60 |
61 | .container > header span {
62 | font-size: 60%;
63 | color: #b3b2ae;
64 | padding: 0 0 0.6em 0.3em;
65 | }
66 |
67 | .container > header span:before {
68 | content: '/ ';
69 | }
70 |
71 | /* Main Content */
72 | .main {
73 | max-width: 69em;
74 | }
75 |
76 | .main p {
77 | font-weight: 300;
78 | font-size: 1.8em;
79 | padding: 10px 0;
80 | margin: 0 auto;
81 | text-align: center;
82 | line-height: 1.5;
83 | max-width: 700px;
84 | }
85 |
86 | .main p:first-of-type {
87 | padding: 0;
88 | }
89 |
90 | .main p i {
91 | font-size: 50%;
92 | color: #aaa;
93 | font-style: normal;
94 | }
95 |
96 | /* To Navigation Style */
97 | .codrops-top {
98 | background: #fff;
99 | background: rgba(255, 255, 255, 0.6);
100 | text-transform: uppercase;
101 | width: 100%;
102 | font-size: 0.69em;
103 | line-height: 2.2;
104 | }
105 |
106 | .codrops-top a {
107 | padding: 0 1em;
108 | letter-spacing: 0.1em;
109 | color: #888;
110 | display: inline-block;
111 | }
112 |
113 | .codrops-top a:hover {
114 | background: rgba(255,255,255,0.95);
115 | color: #333;
116 | }
117 |
118 | .codrops-top span.right {
119 | float: right;
120 | }
121 |
122 | .codrops-top span.right a {
123 | float: left;
124 | display: block;
125 | }
126 |
127 | .codrops-icon:before {
128 | font-family: 'codropsicons';
129 | margin: 0 4px;
130 | speak: none;
131 | font-style: normal;
132 | font-weight: normal;
133 | font-variant: normal;
134 | text-transform: none;
135 | line-height: 1;
136 | -webkit-font-smoothing: antialiased;
137 | }
138 |
139 | .codrops-icon-drop:before {
140 | content: "\e001";
141 | }
142 |
143 | .codrops-icon-prev:before {
144 | content: "\e004";
145 | }
146 |
147 | .codrops-icon-archive:before {
148 | content: "\e002";
149 | }
150 |
151 | .codrops-icon-next:before {
152 | content: "\e000";
153 | }
154 |
155 | .codrops-icon-about:before {
156 | content: "\e003";
157 | }
158 |
159 | /* Demo Buttons Style */
160 | .codrops-demos {
161 | padding-top: 1em;
162 | font-size: 0.9em;
163 | }
164 |
165 | .codrops-demos a {
166 | display: inline-block;
167 | margin: 0.5em;
168 | padding: 0.7em 1.1em;
169 | border: 3px solid #b1aea6;
170 | color: #b1aea6;
171 | font-weight: 700;
172 | }
173 |
174 | .codrops-demos a:hover,
175 | .codrops-demos a.current-demo,
176 | .codrops-demos a.current-demo:hover {
177 | border-color: #89867e;
178 | color: #89867e;
179 | }
180 |
181 | @media screen and (max-width: 25em) {
182 |
183 | .codrops-icon span {
184 | display: none;
185 | }
186 |
187 | .main p {
188 | font-size: 1.4em;
189 | }
190 |
191 | }
--------------------------------------------------------------------------------
/fonts/codropsicons/codropsicons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MorphingDevices/ff3ff88db4a637dd0cf4a7a8b2726938f16b0039/fonts/codropsicons/codropsicons.eot
--------------------------------------------------------------------------------
/fonts/codropsicons/codropsicons.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | This is a custom SVG font generated by IcoMoon.
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
17 |
18 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/fonts/codropsicons/codropsicons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MorphingDevices/ff3ff88db4a637dd0cf4a7a8b2726938f16b0039/fonts/codropsicons/codropsicons.ttf
--------------------------------------------------------------------------------
/fonts/codropsicons/codropsicons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MorphingDevices/ff3ff88db4a637dd0cf4a7a8b2726938f16b0039/fonts/codropsicons/codropsicons.woff
--------------------------------------------------------------------------------
/fonts/codropsicons/license.txt:
--------------------------------------------------------------------------------
1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/
2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
3 |
4 |
5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/
--------------------------------------------------------------------------------
/fonts/mdicons/license.txt:
--------------------------------------------------------------------------------
1 | Icon Set: Iconic -- http://somerandomdude.com/work/iconic/
2 | License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/us/
--------------------------------------------------------------------------------
/fonts/mdicons/md-icons.dev.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | This is a custom SVG font generated by IcoMoon.
6 |
7 |
8 |
9 |
10 |
11 |
12 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/fonts/mdicons/md-icons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MorphingDevices/ff3ff88db4a637dd0cf4a7a8b2726938f16b0039/fonts/mdicons/md-icons.eot
--------------------------------------------------------------------------------
/fonts/mdicons/md-icons.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | This is a custom SVG font generated by IcoMoon.
6 |
7 |
8 |
9 |
10 |
11 |
12 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/fonts/mdicons/md-icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MorphingDevices/ff3ff88db4a637dd0cf4a7a8b2726938f16b0039/fonts/mdicons/md-icons.ttf
--------------------------------------------------------------------------------
/fonts/mdicons/md-icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MorphingDevices/ff3ff88db4a637dd0cf4a7a8b2726938f16b0039/fonts/mdicons/md-icons.woff
--------------------------------------------------------------------------------
/images/site1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MorphingDevices/ff3ff88db4a637dd0cf4a7a8b2726938f16b0039/images/site1.jpg
--------------------------------------------------------------------------------
/images/site2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MorphingDevices/ff3ff88db4a637dd0cf4a7a8b2726938f16b0039/images/site2.jpg
--------------------------------------------------------------------------------
/images/site3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MorphingDevices/ff3ff88db4a637dd0cf4a7a8b2726938f16b0039/images/site3.jpg
--------------------------------------------------------------------------------
/images/site3r.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MorphingDevices/ff3ff88db4a637dd0cf4a7a8b2726938f16b0039/images/site3r.jpg
--------------------------------------------------------------------------------
/images/site4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MorphingDevices/ff3ff88db4a637dd0cf4a7a8b2726938f16b0039/images/site4.jpg
--------------------------------------------------------------------------------
/images/site4r.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MorphingDevices/ff3ff88db4a637dd0cf4a7a8b2726938f16b0039/images/site4r.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Morphing Devices
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
32 |
33 | Morphing DevicesDevice transitions for showcasing responsive websites
34 |
35 |
36 |
The last two devices may be rotated by hovering and clicking the rotate button.
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
A slideshow concept where different screenshots are shown on morphing devices. One main element and two additional division are used for the parts of the devices, along with some pseudo-elements and the image anchor.
47 |
48 |
49 |
50 |
95 |
96 |
--------------------------------------------------------------------------------
/js/modernizr.custom.js:
--------------------------------------------------------------------------------
1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
2 | * Build: http://modernizr.com/download/#-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load
3 | */
4 | ;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f img' );
25 |
26 | function init() {
27 | rotateDevice.style.display = 'none' ;
28 | rotateDevice.onclick = function() {
29 | stopSlideshow();
30 | device.className = rotated ? device.className.replace(/\b md-rotated\b/,'') : device.className + ' md-rotated';
31 | // change images
32 | var newsrc = rotated ? settings.devices[current].imgsrc : settings.devices[current].rotatedsrc;
33 | changeImages( newsrc );
34 | rotated = !rotated;
35 | return false;
36 | }
37 | device.appendChild( rotateDevice );
38 |
39 | // HTML5 PageVisibility API
40 | // http://www.html5rocks.com/en/tutorials/pagevisibility/intro/
41 | // by Joe Marini (@joemarini)
42 |
43 | // use the property name to generate the prefixed event name
44 | var visProp = getHiddenProp();
45 | if (visProp) {
46 | var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
47 | document.addEventListener( evtname, function() {
48 | if( isSlideshowRunning ) {
49 | isHidden() ? (stopSlideshow(), isSlideshowRunning = true) : startSlideshow();
50 | }
51 | } );
52 | }
53 | }
54 |
55 | function changeDevice() {
56 | device.className = 'md-device ' + settings.devices[current].cName;
57 | rotated = false;
58 | rotateDevice.style.display = settings.devices[current].canRotate ? '' : 'none';
59 | // change images
60 | changeImages( settings.devices[current].imgsrc );
61 | }
62 |
63 | function changeImages( newsrc ) {
64 | var imgwrapper = img.parentNode,
65 | newimg = document.createElement( 'img' );
66 |
67 | newimg.setAttribute( 'src', newsrc );
68 |
69 | if( imgwrapper.childNodes.length > 1 ) {
70 | imgwrapper.removeChild( imgwrapper.firstChild );
71 | }
72 | imgwrapper.insertBefore( newimg, img );
73 | img.className = 'md-fadeout';
74 |
75 | img.addEventListener( transEndEventName, function( event ) {
76 | img = newimg;
77 | if( this.parentNode != null ) {
78 | this.parentNode.removeChild( this );
79 | }
80 | }, false );
81 | }
82 |
83 | function startSlideshow() {
84 | isSlideshowRunning = true;
85 | runSlideshow();
86 | }
87 |
88 | function runSlideshow() {
89 | slideshow = setTimeout( function() {
90 | var pos = current < devicesTotal - 1 ? current + 1 : 0;
91 | updateCurrentTrigger( nav.children[pos] );
92 | current = pos;
93 | changeDevice();
94 | if ( settings.autoplay ) {
95 | runSlideshow();
96 | }
97 | }, settings.interval );
98 | }
99 |
100 | function stopSlideshow() {
101 | isSlideshowRunning = false;
102 | clearTimeout( slideshow );
103 | }
104 |
105 | function setCurrent(c) {
106 | current = c;
107 | }
108 |
109 | function getCurrent() {
110 | return current;
111 | }
112 |
113 | function updateCurrentTrigger( trigger ) {
114 | var triggers = nav.children;
115 | triggers[current].className = triggers[current].className.replace(/\bmd-current\b/,'');
116 | trigger.className = 'md-current';
117 | }
118 |
119 | init();
120 |
121 | return {
122 | init : init,
123 | setCurrent : setCurrent,
124 | getCurrent : getCurrent,
125 | changeDevice : changeDevice,
126 | startSlideshow : startSlideshow,
127 | stopSlideshow : stopSlideshow,
128 | updateCurrentTrigger : updateCurrentTrigger
129 | }
130 |
131 | };
132 |
133 | // HTML5 PageVisibility API
134 | // http://www.html5rocks.com/en/tutorials/pagevisibility/intro/
135 | // by Joe Marini (@joemarini)
136 | function getHiddenProp(){
137 | var prefixes = ['webkit','moz','ms','o'];
138 |
139 | // if 'hidden' is natively supported just return it
140 | if ('hidden' in document) return 'hidden';
141 |
142 | // otherwise loop over all the known prefixes until we find one
143 | for (var i = 0; i < prefixes.length; i++){
144 | if ((prefixes[i] + 'Hidden') in document)
145 | return prefixes[i] + 'Hidden';
146 | }
147 |
148 | // otherwise it's not supported
149 | return null;
150 | }
151 | function isHidden() {
152 | var prop = getHiddenProp();
153 | if (!prop) return false;
154 |
155 | return document[prop];
156 | }
--------------------------------------------------------------------------------