-
Notifications
You must be signed in to change notification settings - Fork 43
/
Copy pathindex.html
executable file
·133 lines (130 loc) · 6.92 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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wave Motion Effect | Demo 1 | Codrops</title>
<meta name="description" content="Wave motion effects on images with Three.js using simplex noise." />
<meta name="keywords" content="three.js, wave, motion, distortion, simplex noise, slideshow, javascript" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/xjr3lgi.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="demo-1 loading">
<div class="frame">
<div class="frame__title-wrap">
<h1 class="frame__title">Wave Motion Effect</h1>
<div class="frame__links">
<a href="https://tympanus.net/Development/BackgroundScaleHoverEffect/">Previous demo</a>
<a href="https://tympanus.net/codrops/?p=48418">Article</a>
<a href="https://github.com/marioecg/codrops-wave-motion">GitHub</a>
</div>
</div>
<div class="frame__demos">
<a href="index.html" class="frame__demo frame__demo--current">demo 1</a>
<a href="index2.html" class="frame__demo">demo 2</a>
</div>
</div>
<div data-scroll>
<div data-scroll-content>
<div class="content">
<div class="item">
<figure class="item__fig js-plane">
<div class="aspect" style="--aspect: 151.75%"></div>
<img class="item__img" src="img/img-01.jpg" alt="Some image" />
</figure>
<span class="item__pretitle">Cartesian man</span>
<h2 class="item__title">Actuator</h2>
<span class="item__counter">01</span>
<p class="item__description">Life lived in the absence of the psychedelic experience is life trivialized, life denied, life enslaved to the ego.</p>
</div>
<div class="item">
<figure class="item__fig js-plane">
<div class="aspect" style="--aspect: 104.25%"></div>
<img class="item__img" src="img/img-02.jpg" alt="Some image" />
</figure>
<span class="item__pretitle">Assembly fix</span>
<h2 class="item__title">Random</h2>
<span class="item__counter">02</span>
<p class="item__description">You are a divine being. You matter, you count. You come from realms of unimaginable power and light, and you will return to those realms.</p>
</div>
<div class="item">
<figure class="item__fig js-plane">
<div class="aspect" style="--aspect: 147.25%"></div>
<img class="item__img" src="img/img-03.jpg" alt="Some image" />
</figure>
<span class="item__pretitle">Dead head</span>
<h2 class="item__title">Uplinking</h2>
<span class="item__counter">03</span>
<p class="item__description">You simply have to turn your back on a culture that has gone sterile and dead and get with the program of a living world and the imagination.</p>
</div>
<div class="item">
<figure class="item__fig js-plane">
<div class="aspect" style="--aspect: 95.25%"></div>
<img class="item__img" src="img/img-04.jpg" alt="Some image" />
</figure>
<span class="item__pretitle">Absence</span>
<h2 class="item__title">Half time</h2>
<span class="item__counter">04</span>
<p class="item__description">The syntactical nature of reality, the real secret of magic, is that the world is made of words. And if you know the words that the world is made of, you can make of it whatever you wish.</p>
</div>
<div class="item">
<figure class="item__fig js-plane">
<div class="aspect" style="--aspect: 131.5%"></div>
<img class="item__img" src="img/img-05.jpg" alt="Some image" />
</figure>
<span class="item__pretitle">Material Handling</span>
<h2 class="item__title">Operator</h2>
<span class="item__counter">05</span>
<p class="item__description">We tend to disempower ourselves. We tend to believe that we don’t matter. And in the act of taking that idea to ourselves we give everything away to somebody else, to something else.</p>
</div>
<div class="item">
<figure class="item__fig js-plane">
<div class="aspect" style="--aspect: 84%"></div>
<img class="item__img" src="img/img-06.jpg" alt="Some image" />
</figure>
<span class="item__pretitle">Quality Assurance</span>
<h2 class="item__title">Remote</h2>
<span class="item__counter">06</span>
<p class="item__description">We are so much the victims of abstraction that with the Earth in flames we can barely rouse ourselves to wander across the room and look at the thermostat.</p>
</div>
<div class="item">
<figure class="item__fig js-plane">
<div class="aspect" style="--aspect: 133.5%"></div>
<img class="item__img" src="img/img-07.jpg" alt="Some image" />
</figure>
<span class="item__pretitle">Teach Mode</span>
<h2 class="item__title">SLURBT</h2>
<span class="item__counter">07</span>
<p class="item__description">The cost of sanity, in this society, is a certain level of alienation.</p>
</div>
<div class="item">
<figure class="item__fig js-plane">
<div class="aspect" style="--aspect: 90.75%"></div>
<img class="item__img" src="img/img-08.jpg" alt="Some image" />
</figure>
<span class="item__pretitle">World Model</span>
<h2 class="item__title">Cybark</h2>
<span class="item__counter">08</span>
<p class="item__description">Our need to feel part of the world seems to demand that we express ourselves through creative activity.</p>
</div>
<div class="item">
<figure class="item__fig js-plane">
<div class="aspect" style="--aspect: 121.25%"></div>
<img class="item__img" src="img/img-09.jpg" alt="Some image" />
</figure>
<span class="item__pretitle">Sensory guide</span>
<h2 class="item__title">Alt Touch</h2>
<span class="item__counter">09</span>
<p class="item__description">We are caged by our cultural programming. Culture is a mass hallucination, and when you step outside the mass hallucination you see it for what it’s worth.</p>
</div>
</div>
</div>
</div>
</body>
</html>