-
Notifications
You must be signed in to change notification settings - Fork 54
/
index.html
executable file
·149 lines (149 loc) · 9.88 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
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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated Grid Previews | Codrops</title>
<meta name="description" content="A layout where one can switch between image grid previews." />
<meta name="keywords" content="image grid, css grid, animation, parallax, layout, template" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Anton|Niramit:400,600,700" rel="stylesheet">
<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>
<!--script src="//tympanus.net/codrops/adpacks/analytics.js"></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>
</svg>
<main>
<div class="frame">
<header class="codrops-header">
<h1 class="codrops-header__title">Animated Grid Previews</h1>
<div class="codrops-header__links">
<a href="https://tympanus.net/Development/FullscreenHoverLoop/" title="Previous Demo">Previous demo</a>
<a href="https://tympanus.net/codrops/?p=36291" title="Back to the article">Article</a>
<a href="https://github.com/codrops/AnimatedGridPreviews/" title="Find this project on GitHub">GitHub</a>
</div>
</header>
<h2 class="pageheader">Lupinus</h2>
<nav class="menutop">
<a class="menutop__item">about</a>
<a class="menutop__item">contact</a>
<a class="menutop__item menutop__item--social">tw</a>
<a class="menutop__item menutop__item--social">fb</a>
<a class="menutop__item menutop__item--social">ig</a>
</nav>
</div>
<nav class="menu">
<div class="menu__item">
<span class="menu__item-number">01</span>
<span class="menu__item-textwrap"><span class="menu__item-text">Studio</span></span>
<a class="menu__item-link">explore</a>
</div>
<div class="menu__item">
<span class="menu__item-number">02</span>
<span class="menu__item-textwrap"><span class="menu__item-text">Mixer</span></span>
<a class="menu__item-link">explore</a>
</div>
<div class="menu__item">
<span class="menu__item-number">03</span>
<span class="menu__item-textwrap"><span class="menu__item-text">Objects</span></span>
<a class="menu__item-link">explore</a>
</div>
<div class="menu__item">
<span class="menu__item-number">04</span>
<span class="menu__item-textwrap"><span class="menu__item-text">Delta</span></span>
<a class="menu__item-link">explore</a>
</div>
<div class="menu__item">
<span class="menu__item-number">05</span>
<span class="menu__item-textwrap"><span class="menu__item-text">Express</span></span>
<a class="menu__item-link">explore</a>
</div>
</nav>
<div class="page page--preview">
<div class="gridwrap">
<div class="grid grid--layout-1">
<div class="grid__item" style="background-image: url(img/1.jpg)"></div>
<div class="grid__item" style="background-image: url(img/2.jpg)"></div>
<div class="grid__item" style="background-image: url(img/3.jpg)"></div>
<div class="grid__item" style="background-image: url(img/4.jpg)"></div>
<div class="grid__item" style="background-image: url(img/5.jpg)"></div>
<div class="grid__item" style="background-image: url(img/6.jpg)"></div>
<div class="grid__item" style="background-image: url(img/7.jpg)"></div>
<div class="grid__item" style="background-image: url(img/8.jpg)"></div>
<div class="grid__item" style="background-image: url(img/9.jpg)"></div>
</div>
<div class="grid grid--layout-2">
<div class="grid__item" style="background-image: url(img/10.jpg)"></div>
<div class="grid__item" style="background-image: url(img/11.jpg)"></div>
<div class="grid__item" style="background-image: url(img/12.jpg)"></div>
<div class="grid__item" style="background-image: url(img/13.jpg)"></div>
<div class="grid__item" style="background-image: url(img/14.jpg)"></div>
<div class="grid__item" style="background-image: url(img/15.jpg)"></div>
<div class="grid__item" style="background-image: url(img/16.jpg)"></div>
<div class="grid__item" style="background-image: url(img/17.jpg)"></div>
</div>
<div class="grid grid--layout-3">
<div class="grid__item" style="background-image: url(img/18.jpg)"></div>
<div class="grid__item" style="background-image: url(img/19.jpg)"></div>
<div class="grid__item" style="background-image: url(img/20.jpg)"></div>
<div class="grid__item" style="background-image: url(img/21.jpg)"></div>
<div class="grid__item" style="background-image: url(img/22.jpg)"></div>
<div class="grid__item" style="background-image: url(img/23.jpg)"></div>
<div class="grid__item" style="background-image: url(img/24.jpg)"></div>
<div class="grid__item" style="background-image: url(img/42.jpg)"></div>
<div class="grid__item" style="background-image: url(img/43.jpg)"></div>
</div>
<div class="grid grid--layout-4">
<div class="grid__item" style="background-image: url(img/25.jpg)"></div>
<div class="grid__item" style="background-image: url(img/26.jpg)"></div>
<div class="grid__item" style="background-image: url(img/27.jpg)"></div>
<div class="grid__item" style="background-image: url(img/28.jpg)"></div>
<div class="grid__item" style="background-image: url(img/29.jpg)"></div>
<div class="grid__item" style="background-image: url(img/30.jpg)"></div>
<div class="grid__item" style="background-image: url(img/31.jpg)"></div>
<div class="grid__item" style="background-image: url(img/32.jpg)"></div>
</div>
<div class="grid grid--layout-5">
<div class="grid__item" style="background-image: url(img/33.jpg)"></div>
<div class="grid__item" style="background-image: url(img/34.jpg)"></div>
<div class="grid__item" style="background-image: url(img/35.jpg)"></div>
<div class="grid__item" style="background-image: url(img/36.jpg)"></div>
<div class="grid__item" style="background-image: url(img/37.jpg)"></div>
<div class="grid__item" style="background-image: url(img/38.jpg)"></div>
<div class="grid__item" style="background-image: url(img/39.jpg)"></div>
<div class="grid__item" style="background-image: url(img/40.jpg)"></div>
<div class="grid__item" style="background-image: url(img/41.jpg)"></div>
</div>
<button class="gridback"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></button>
</div><!-- /gridwrap -->
<div class="content">
<div class="content__item">
Emerged into consciousness tesseract invent the universe Cambrian explosion how far away from which we spring? Brain is the seed of intelligence white dwarf inconspicuous motes of rock and gas two ghostly white figures in coveralls and helmets are soflty dancing extraordinary claims require extraordinary evidence dispassionate extraterrestrial observer. Hundreds of thousands great turbulent clouds concept of the number one made in the interiors of collapsing stars the sky calls to us encyclopaedia galactica.
</div>
<div class="content__item">
Billions upon billions cosmic ocean prime number descended from astronomers finite but unbounded Euclid? White dwarf hearts of the stars the carbon in our apple pies a very small stage in a vast cosmic arena brain is the seed of intelligence permanence of the stars? Vastness is bearable only through love concept of the number one Sea of Tranquility courage of our questions how far away a still more glorious dawn awaits.
</div>
<div class="content__item">
At the edge of forever white dwarf a mote of dust suspended in a sunbeam citizens of distant epochs take root and flourish tesseract. Bits of moving fluff rings of Uranus across the centuries tendrils of gossamer clouds made in the interiors of collapsing stars muse about. A very small stage in a vast cosmic arena emerged into consciousness network of wormholes network of wormholes dispassionate extraterrestrial observer emerged into consciousness.
</div>
<div class="content__item">
Explorations Apollonius of Perga Sea of Tranquility great turbulent clouds realm of the galaxies two ghostly white figures in coveralls and helmets are soflty dancing. Dispassionate extraterrestrial observer are creatures of the cosmos a mote of dust suspended in a sunbeam hundreds of thousands extraordinary claims require extraordinary evidence something incredible is waiting to be known. Citizens of distant epochs dispassionate extraterrestrial observer something incredible is waiting to be known of brilliant syntheses network of wormholes rich in heavy atoms.
</div>
<div class="content__item">
Hundreds of thousands take root and flourish tingling of the spine consciousness ship of the imagination paroxysm of global death. Rich in mystery realm of the galaxies realm of the galaxies something incredible is waiting to be known hearts of the stars rich in mystery? Kindling the energy hidden in matter the carbon in our apple pies Cambrian explosion the sky calls to us encyclopaedia galactica citizens of distant epochs.
</div>
</div>
</div><!-- /page -->
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/demo.js"></script>
</body>
</html>