-
Notifications
You must be signed in to change notification settings - Fork 61
/
step3.html
73 lines (67 loc) · 3.33 KB
/
step3.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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interactive Hover Effects with Three.js | Demo 3</title>
<meta name="description" content="Interactive Hover Effects with Three.js" />
<meta name="keywords" content="three.js, webgl, hover, image, effect, website, web development" />
<meta name="author" content="Codrops" />
<link rel="stylesheet" href="https://use.typekit.net/yae0eed.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 in a modern browser that supports CSS Variables.");
</script>
</head>
<body class="loading">
<main>
<!-- begin scrollable -->
<div data-scroll>
<header class="header">
<h1 class="header__title">Interactive Mouse Effects with Three.js</h1>
<div class="info">
<a class="info__link" href="https://tympanus.net/codrops/?p=49069">Article</a>
<a class="info__link" href="https://github.com/akella/webgl-mouseover-effects">GitHub</a>
</div>
</header>
<!-- begin section -->
<section class="section spaced">
<!-- begin item -->
<div class="item">
<div class="item__image">
<img src="img/3.jpg" class="js-image" alt="Some image">
</div>
<h2>Cultural diversion</h2>
<p>We have to create culture, don't watch TV, don't read magazines, don't even listen to NPR. Create your own roadshow. The nexus of space and time where you are now is the most immediate sector of your universe, and if you're worrying about Michael Jackson or Bill Clinton or somebody else, then you are disempowered, you're giving it all away to icons, icons which are maintained by an electronic media so that you want to dress like X or have lips like Y.
</p>
</div>
<!-- end item -->
<!-- begin item -->
<div class="item">
<div class="item__image">
<img src="img/2.jpg" class="js-image" alt="Some image">
</div>
<h2>Shamanic dance</h2>
<p>This is shit-brained, this kind of thinking. That is all cultural diversion, and what is real is you and your friends and your associations, your highs, your orgasms, your hopes, your plans, your fears. And we are told 'no', we're unimportant, we're peripheral. 'Get a degree, get a job, get a this, get a that.'</p>
</div>
<!-- end item -->
<!-- begin item -->
<div class="item">
<div class="item__image">
<img src="img/1.jpg" class="js-image" alt="Some image">
</div>
<h2>Conditioning</h2>
<p>And then you're a player, you don't want to even play in that game. You want to reclaim your mind and get it out of the hands of the cultural engineers who want to turn you into a half-baked moron consuming all this trash that's being manufactured out of the bones of a dying world.</p>
</div>
<!-- end item -->
</section>
<!-- end section -->
</section>
<!-- end scrollable -->
</main>
<div id="container"></div>
<script src="js/app.js"></script>
</body>
</html>