-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathindex.html
executable file
·132 lines (132 loc) · 7.48 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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Connected Grid Layout Animation | Demo 1 | Codrops</title>
<meta name="description" content="Simple on-scroll animations for connected grid items" />
<meta name="keywords" content="on-scroll, animation, gsap, scrolltrigger, css, grid, layout, effect" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/pdt4wgm.css">
<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="demo-1 loading">
<main>
<div class="frame">
<h1 class="frame__title">Connected Grid Layout Animation</h1>
<a class="frame__back" href="https://tympanus.net/codrops/?p=73283">Back to the article</a>
<a class="frame__prev" href="https://tympanus.net/Development/OnScrollColumnsRows/">Previous demo</a>
<nav class="frame__demos">
<span class="frame__demos-item">Variations </span>
<span class="frame__demos-item">1</span>
<a class="frame__demos-item" href="index2.html">2</a>
<a class="frame__demos-item" href="index3.html">3</a>
<a class="frame__demos-item" href="index4.html">4</a>
</nav>
</div>
<div class="grid">
<figure class="grid__item" style="--r: 1;--c: 1;--s:4;">
<div class="grid__item-img">
<div class="grid__item-img-inner" style="background-image:url(img/1.jpg);"></div>
</div>
<figcaption class="grid__item-caption"><h3>Warm Oasis Retreat</h3> <span>2023</span></figcaption>
</figure>
<figure class="grid__item" style="--r: 2;--c: 5;--s:3;">
<div class="grid__item-img">
<div class="grid__item-img-inner" style="background-image:url(img/2.jpg);"></div>
</div>
<figcaption class="grid__item-caption"><h3>Desert Serenity Suites</h3> <span>2022</span></figcaption>
</figure>
<figure class="grid__item" style="--r: 3;--c: 3;--s:2;">
<div class="grid__item-img">
<div class="grid__item-img-inner" style="background-image:url(img/3.jpg);"></div>
</div>
<figcaption class="grid__item-caption"><h3>Sandscape Elegance</h3> <span>2024</span></figcaption>
</figure>
<figure class="grid__item" style="--r: 4;--c: 1;--s:2;">
<div class="grid__item-img">
<div class="grid__item-img-inner" style="background-image:url(img/4.jpg);"></div>
</div>
<figcaption class="grid__item-caption"><h3>Dune Mirage Retreat</h3> <span>2021</span></figcaption>
</figure>
<figure class="grid__item" style="--r: 5;--c: 3;--s:5;">
<div class="grid__item-img">
<div class="grid__item-img-inner" style="background-image:url(img/5.jpg);"></div>
</div>
<figcaption class="grid__item-caption"><h3>Sahara Luxury Oasis</h3> <span>2023</span></figcaption>
</figure>
<figure class="grid__item" style="--r: 6;--c: 2;">
<div class="grid__item-img">
<div class="grid__item-img-inner" style="background-image:url(img/6.jpg);"></div>
</div>
<figcaption class="grid__item-caption"><h3>Arabian Haven</h3> <span>2022</span></figcaption>
</figure>
<figure class="grid__item" style="--r: 7;--c: 3;--s:3;">
<div class="grid__item-img">
<div class="grid__item-img-inner" style="background-image:url(img/7.jpg);"></div>
</div>
<figcaption class="grid__item-caption"><h3>Desert Dreamscape Lodges</h3> <span>2024</span></figcaption>
</figure>
<figure class="grid__item" style="--r: 8;--c: 6;--s:2;">
<div class="grid__item-img">
<div class="grid__item-img-inner" style="background-image:url(img/8.jpg);"></div>
</div>
<figcaption class="grid__item-caption"><h3>Golden Sands Interiors</h3> <span>2021</span></figcaption>
</figure>
<figure class="grid__item" style="--r: 9;--c: 1;--s:5;">
<div class="grid__item-img">
<div class="grid__item-img-inner" style="background-image:url(img/9.jpg);"></div>
</div>
<figcaption class="grid__item-caption"><h3>Desert Mirage Suites</h3> <span>2023</span></figcaption>
</figure>
<figure class="grid__item" style="--r: 10;--c: 6;--s:3;">
<div class="grid__item-img">
<div class="grid__item-img-inner" style="background-image:url(img/10.jpg);"></div>
</div>
<figcaption class="grid__item-caption"><h3>Oasis Tranquility</h3> <span>2022</span></figcaption>
</figure>
<figure class="grid__item" style="--r: 11;--c: 4;--s: 2;">
<div class="grid__item-img">
<div class="grid__item-img-inner" style="background-image:url(img/11.jpg);"></div>
</div>
<figcaption class="grid__item-caption"><h3>Desert Zen Retreat</h3> <span>2024</span></figcaption>
</figure>
<figure class="grid__item" style="--r: 12;--c: 1;--s:3;">
<div class="grid__item-img">
<div class="grid__item-img-inner" style="background-image:url(img/12.jpg);"></div>
</div>
<figcaption class="grid__item-caption"><h3>Sandscape Luxury</h3> <span>2021</span></figcaption>
</figure>
<figure class="grid__item" style="--r: 13;--c: 4;--s: 5;">
<div class="grid__item-img">
<div class="grid__item-img-inner" style="background-image:url(img/13.jpg);"></div>
</div>
<figcaption class="grid__item-caption"><h3>Desert Elegance Escapes</h3> <span>2023</span></figcaption>
</figure>
</div>
<section class="outro">
<h2 class="outro__title">More you might like</h2>
<div class="card-wrap">
<div class="card">
<a href="http://tympanus.net/Development/GridToSlider/" class="card__image" style="background-image:url(https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2023/05/gridtoslider_feat.jpg?x15297"></a>
<h3 class="card__title"><a href="http://tympanus.net/Development/GridToSlider/">Grid to Slideshow Switch Animations</a></h3>
</div>
<div class="card">
<a href="https://tympanus.net/Development/GridFlowEffect/" class="card__image" style="background-image:url(https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2023/07/gridflow_featured-1.jpg)"></a>
<h3 class="card__title"><a href="http://tympanus.net/Development/GridFlowEffect/">Grid Flow Animation</a></h3>
</div>
</div>
</section>
<p class="credits">Made by <a href="https://twitter.com/codrops">@codrops</a></p>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script src="js/gsap.min.js"></script>
<script src="js/ScrollTrigger.min.js"></script>
<script src="js/lenis.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script type="module" src="js/index.js"></script>
</body>
</html>