DynamicGrid/index3.html at master · ifa6/DynamicGrid · GitHub

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
<!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>Dynamic Grid with Transitions | Demo 3</title>
		<meta name="description" content="Dynamic Grid with CSS Transitions inspired by the Google Trends Grid Visualization" />
		<meta name="keywords" content="google trends, dynamic grid, css transitions, javascript, responsive, fluid, layout" />
		<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-3">
			<div id="gt-grid-selector" class="gt-grid-control">
				<span class="gt-grid-icon"></span>
				<div class="gt-grid-select">
					<div></div><div></div><div></div><div></div><div></div>
					<div></div><div></div><div></div><div></div><div></div>
					<div></div><div></div><div></div><div></div><div></div>
					<div></div><div></div><div></div><div></div><div></div>
					<div></div><div></div><div></div><div></div><div></div>
				</div>
			</div>
			<div id="gt-grid" class="gt-grid">
				<div><h1>Dynamic Grid</h1></div>
				<div>
					<div class="codrops-top">
						<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/CaptionHoverEffects/"><span>Previous Demo</span></a>
						<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=15468"><span>Codrops Article</span></a></span>
					</div>
				</div>
				<div><h3>wakame</h3></div>
				<div><h3>lettuce water</h3></div>
				<div><h3>turnip maize</h3></div>
				<div class="special"><h3><a href="index.html">Demo 1: No transitions</a></h3></div>
				<div class="special"><h3><a href="index2.html">Demo 2: Grid transitions</a></h3></div>
				<div class="special"><h3><a class="current-demo" href="index3.html">Demo 3: Delayed transitions</a></h3></div>
				<div><h3>bunya nuts</h3></div>
				<div><h3>celery</h3></div>
				<div><h3>greens lotus</h3></div>
				<div><h3>arugula beet</h3></div>
				<div><h3>desert raisin</h3></div>
				<div><h3>mustard burdock</h3></div>
				<div><h3>potato bush</h3></div>
				<div><h3>catsear</h3></div>
				<div><h3>water chestnut</h3></div>
				<div><h3>bok choy</h3></div>
				<div><h3>pea sprouts</h3></div>
				<div><h3>gumbo parsley</h3></div>
				<div><h3>bitterleaf</h3></div>
				<div><h3>spinach rock</h3></div>
				<div><h3>tigernut garlic</h3></div>
				<div><h3>caulie</h3></div>
				<div><h3>seakale</h3></div>
			</div>

		</div><!-- /container -->
		<!-- classie.js by @desandro: https://github.com/desandro/classie -->
		<script src="js/classie.js"></script>
		<script src="js/gridSelector.js"></script>
		<script src="js/grid.js"></script>
		<script>
			Grid.init( {
				transition : true,
				speed : 450,
				delay: 20
			} );
		</script>
	</body>
</html>