-
Notifications
You must be signed in to change notification settings - Fork 29
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·151 lines (151 loc) · 9.34 KB
/
index.html
File metadata and controls
executable file
·151 lines (151 loc) · 9.34 KB
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Motion Reveal Slideshow | Codrops</title>
<meta name="description" content="A simple slideshow with a reveal transition and a fullscreen content view" />
<meta name="keywords" content="slideshow, reveal, effect, animation, web design, template, demo" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="loading">
<svg class="hidden">
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
</symbol>
<svg id="icon-github" viewBox="0 0 33 33">
<title>github</title>
<path d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.353 1.112-.785 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184-.741-1.882-1.809-2.383-1.809-2.383-1.479-1.01.112-.99.112-.99 1.635.115 2.495 1.679 2.495 1.679 1.453 2.489 3.813 1.77 4.741 1.353.148-1.052.569-1.77 1.034-2.177-3.617-.411-7.42-1.809-7.42-8.051 0-1.778.635-3.233 1.677-4.371-.168-.412-.727-2.069.16-4.311 0 0 1.367-.438 4.479 1.67a15.602 15.602 0 0 1 4.078-.549 15.62 15.62 0 0 1 4.078.549c3.11-2.108 4.475-1.67 4.475-1.67.889 2.242.33 3.899.163 4.311C26.37 12.66 27 14.115 27 15.893c0 6.258-3.809 7.635-7.437 8.038.584.503 1.105 1.497 1.105 3.017 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.159 11.131-8.26 11.131-15.455 0-8.997-7.294-16.29-16.291-16.29"></path>
</svg>
<symbol id="icon-caret" viewBox="0 0 24 13">
<title>caret</title>
<path d="M23.646.328a.842.842 0 0 0-1.19 0l-10.459 10.48L1.517.328a.842.842 0 0 0-1.189 1.19L11.382 12.57c.164.164.369.246.595.246.205 0 .43-.082.594-.246L23.625 1.518a.824.824 0 0 0 .02-1.19z"/>
</symbol>
</svg>
<main>
<div class="content content--fixed">
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/RevealSlideshow/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=35450" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
</div>
<h1 class="codrops-header__title">Motion Reveal Slideshow</h1>
</header>
<p class="info">Inspired by <a href="https://www.instagram.com/p/Bjr-3Gbj_ZE/?taken-by=louis_ansa">"Paradis - Reprise"</a> by Louis Ansa</p>
<a class="github" href="https://github.com/codrops/MotionRevealSlideshow/" title="Find this project on GitHub"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a>
</div>
<div class="slideshow">
<div class="slide">
<div class="preview">
<div class="preview__img-wrap">
<div class="preview__img" style="background-image: url(img/project1.jpg);"></div>
<div class="preview__img-reveal"></div>
</div>
<h3 class="preview__title">Carmino Burano</h3>
<div class="preview__content">
<p>You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.</p>
</div>
</div>
<div class="slide__img-wrap">
<div class="slide__img" style="background-image: url(img/1.jpg);"></div>
<div class="slide__img-reveal"></div>
</div>
<span class="slide__number">#01</span>
<h3 class="slide__title">Carmino</h3>
</div>
<div class="slide">
<div class="preview">
<div class="preview__img-wrap">
<div class="preview__img" style="background-image: url(img/project2.jpg);"></div>
<div class="preview__img-reveal"></div>
</div>
<h3 class="preview__title">Jackardi Jack</h3>
<div class="preview__content">
<p>You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.</p>
</div>
</div>
<div class="slide__img-wrap">
<div class="slide__img" style="background-image: url(img/2.jpg);"></div>
<div class="slide__img-reveal"></div>
</div>
<span class="slide__number">#02</span>
<h3 class="slide__title">Jackardi</h3>
</div>
<div class="slide">
<div class="preview">
<div class="preview__img-wrap">
<div class="preview__img" style="background-image: url(img/project3.jpg);"></div>
<div class="preview__img-reveal"></div>
</div>
<h3 class="preview__title">Hostabili Hell</h3>
<div class="preview__content">
<p>You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.</p>
</div>
</div>
<div class="slide__img-wrap">
<div class="slide__img" style="background-image: url(img/3.jpg);"></div>
<div class="slide__img-reveal"></div>
</div>
<span class="slide__number">#03</span>
<h3 class="slide__title">Hostabili</h3>
</div>
<div class="slide">
<div class="preview">
<div class="preview__img-wrap">
<div class="preview__img" style="background-image: url(img/project4.jpg);"></div>
<div class="preview__img-reveal"></div>
</div>
<h3 class="preview__title">Tellawa Tell</h3>
<div class="preview__content">
<p>You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.</p>
</div>
</div>
<div class="slide__img-wrap">
<div class="slide__img" style="background-image: url(img/4.jpg);"></div>
<div class="slide__img-reveal"></div>
</div>
<span class="slide__number">#04</span>
<h3 class="slide__title">Tellawa</h3>
</div>
<div class="slide">
<div class="preview">
<div class="preview__img-wrap">
<div class="preview__img" style="background-image: url(img/project5.jpg);"></div>
<div class="preview__img-reveal"></div>
</div>
<h3 class="preview__title">Lochnox Lox</h3>
<div class="preview__content">
<p>You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.</p>
</div>
</div>
<div class="slide__img-wrap">
<div class="slide__img" style="background-image: url(img/5.jpg);"></div>
<div class="slide__img-reveal"></div>
</div>
<span class="slide__number">#05</span>
<h3 class="slide__title">Lochnox</h3>
</div>
<nav class="slidenav">
<button class="slidenav__item slidenav__item--prev">Previous</button>
<button class="slidenav__item slidenav__item--next">Next</button>
<button class="slidenav__preview">
<svg class="icon icon--caret">
<use xlink:href="#icon-caret"></use>
</svg>
</button>
</nav>
</div>
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/demo.js"></script>
</body>
</html>