forked from opt-luo/DemoHouse
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·96 lines (90 loc) · 3.71 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Morphing Devices</title>
<meta name="description" content="Morphing Devices: Device transition slideshow for showcasing work" />
<meta name="keywords" content="morphing, device, css3, transition, slideshow, autoplay, portfolio, showcase, concept" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container demo-1">
<!-- a low-tech hack for pre-loading the images -->
<div class="preload" style="overflow: hidden; width: 0px; height: 0px">
<img src="images/site1.jpg" />
<img src="images/site2.jpg" />
<img src="images/site3.jpg" />
<img src="images/site3r.jpg" />
<img src="images/site4.jpg" />
<img src="images/site4r.jpg" />
</div>
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/"><span>Previous Demo</span></a>
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=15036"><span>Back to the Codrops Article</span></a></span>
</div>
<header>
<h1>Morphing Devices<span>Device transitions for showcasing responsive websites</span></h1>
</header>
<div class="main clearfix">
<p><i>The last two devices may be rotated by hovering and clicking the rotate button.</i></p>
<div class="md-slider">
<div class="md-device-wrapper">
<div class="md-device md-device-1">
<a href="#"><img src="images/site1.jpg" /></a>
<div class="md-border-element"></div>
<div class="md-base-element"></div>
</div>
</div>
</div>
<p>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. </p>
</div>
</div><!-- /container -->
<script src="js/morphingdevice.js"></script>
<script>
var el = document.querySelector( '.md-slider' ),
settings = {
autoplay : true,
interval : 3000,
devices : [
{ cName : 'md-device-1', canRotate : false, imgsrc : 'images/site1.jpg' },
{ cName : 'md-device-2', canRotate : false, imgsrc : 'images/site2.jpg' },
{ cName : 'md-device-3', canRotate : true, imgsrc : 'images/site3.jpg', rotatedsrc : 'images/site3r.jpg' },
{ cName : 'md-device-4', canRotate : true, imgsrc : 'images/site4.jpg', rotatedsrc : 'images/site4r.jpg' }
]
},
devicesTotal = settings.devices.length,
ds = MorphingDevice( el, settings );
// create navigation triggers
var nav = document.createElement( 'nav' );
for( var i = 0; i < devicesTotal; ++i ) {
var trigger = document.createElement( 'a' );
trigger.className = i === 0 ? 'md-current' : '';
trigger.setAttribute( 'href', '#' );
trigger.setAttribute( 'pos', i );
trigger.onclick = function( event ) {
ds.stopSlideshow();
var pos = Number( event.target.getAttribute( 'pos' ) );
if( pos === ds.getCurrent() ) {
return false;
}
ds.updateCurrentTrigger( event.target );
ds.setCurrent( pos );
ds.changeDevice();
return false;
};
nav.appendChild( trigger );
}
el.appendChild( nav );
if( settings.autoplay ) {
ds.startSlideshow();
}
</script>
</body>
</html>