├── 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 |
29 | Previous Demo 30 | Back to the Codrops Article 31 |
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 | } --------------------------------------------------------------------------------