-
Notifications
You must be signed in to change notification settings - Fork 16
/
index2.html
137 lines (135 loc) · 8.24 KB
/
index2.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
<!DOCTYPE html>
<html lang="en" class="no-js loading">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Line Text Hover Animations | Demo 2 | Codrops</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";</script>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="demo-2">
<main>
<header class="frame">
<h1 class="frame__title hover-effect hover-effect--bg"><a class="hover-effect hover-effect--bg" href="https://tympanus.net/codrops/demos/?tag=hover">#Hover</a> Animations on Line <a class="hover-effect hover-effect--bg" href="https://tympanus.net/codrops/demos/?tag=typography">#Typography</a></h1>
<a class="frame__back hover-effect hover-effect--bg" href="https://tympanus.net/codrops/?p=78645">Article</a>
<a class="frame__archive hover-effect hover-effect--bg" href="https://tympanus.net/codrops/demos/">All demos</a>
<a class="frame__github hover-effect hover-effect--bg" href="https://github.com/codrops/LineTextHoverAnimations/">GitHub</a>
<nav class="frame__demos">
<span>Variations:</span>
<a class="hover-effect hover-effect--bg" href="index.html">V1</a>
<span>V2</span>
<a class="hover-effect hover-effect--bg" href="index3.html">V3</a>
<a class="hover-effect hover-effect--bg" href="index4.html">V4</a>
</nav>
</header>
<section class="content">
<h2 class="content__title">Volcanic Eruptions</h2>
<ul class="list list--bg list--bg-west">
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">Mount Vespera</span>
<span class="list__item-col hover-effect hover-effect--bg">Planet Thalassa</span>
<span class="list__item-col hover-effect hover-effect--bg">2157-03-14</span>
<span class="list__item-col hover-effect hover-effect--bg">6</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">Kraxion</span>
<span class="list__item-col hover-effect hover-effect--bg">Exo-Planet Zyra</span>
<span class="list__item-col hover-effect hover-effect--bg">2243-11-09</span>
<span class="list__item-col hover-effect hover-effect--bg">7</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">Helion Peak</span>
<span class="list__item-col hover-effect hover-effect--bg">Planet Elara</span>
<span class="list__item-col hover-effect hover-effect--bg">2180-05-18</span>
<span class="list__item-col hover-effect hover-effect--bg">5</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">Pyrosphere</span>
<span class="list__item-col hover-effect hover-effect--bg">Moon Xanthe</span>
<span class="list__item-col hover-effect hover-effect--bg">2291-06-15</span>
<span class="list__item-col hover-effect hover-effect--bg">6</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">Vulcanus</span>
<span class="list__item-col hover-effect hover-effect--bg">Asteroid B-612</span>
<span class="list__item-col hover-effect hover-effect--bg">2312-08-22</span>
<span class="list__item-col hover-effect hover-effect--bg">5</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">Tarkon's Fury</span>
<span class="list__item-col hover-effect hover-effect--bg">Planet Drakonis</span>
<span class="list__item-col hover-effect hover-effect--bg">2455-12-01</span>
<span class="list__item-col hover-effect hover-effect--bg">8</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">Aether Plume</span>
<span class="list__item-col hover-effect hover-effect--bg">Planet Ganymede</span>
<span class="list__item-col hover-effect hover-effect--bg">2379-04-10</span>
<span class="list__item-col hover-effect hover-effect--bg">4</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">Mount Zenith</span>
<span class="list__item-col hover-effect hover-effect--bg">Planet Lumina</span>
<span class="list__item-col hover-effect hover-effect--bg">2392-09-21</span>
<span class="list__item-col hover-effect hover-effect--bg">6</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">Inferno Crest</span>
<span class="list__item-col hover-effect hover-effect--bg">Moon Rhea</span>
<span class="list__item-col hover-effect hover-effect--bg">2410-03-08</span>
<span class="list__item-col hover-effect hover-effect--bg">5</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">Jacob's Hill</span>
<span class="list__item-col hover-effect hover-effect--bg">Exoplanet HU5</span>
<span class="list__item-col hover-effect hover-effect--bg">2205-12-09</span>
<span class="list__item-col hover-effect hover-effect--bg">7</span>
</li>
</ul>
<h2 class="content__title spacer">Event Codes</h2>
<ul class="list list--alt">
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">2178-04-21</span>
<span class="list__item-col hover-effect hover-effect--bg">2190-07-16</span>
<span class="list__item-col hover-effect hover-effect--bg">X7</span>
<span class="list__item-col hover-effect hover-effect--bg">2205-12-08</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">2234-02-11</span>
<span class="list__item-col hover-effect hover-effect--bg">2241-09-25</span>
<span class="list__item-col hover-effect hover-effect--bg">A5</span>
<span class="list__item-col hover-effect hover-effect--bg">2253-01-30</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">2301-06-17</span>
<span class="list__item-col hover-effect hover-effect--bg">2312-03-05</span>
<span class="list__item-col hover-effect hover-effect--bg">B9</span>
<span class="list__item-col hover-effect hover-effect--bg">2320-08-14</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect hover-effect--bg">2404-11-19</span>
<span class="list__item-col hover-effect hover-effect--bg">2415-07-22</span>
<span class="list__item-col hover-effect hover-effect--bg">L0</span>
<span class="list__item-col hover-effect hover-effect--bg">2428-05-29</span>
</li>
</ul>
</section>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<!-- JavaScript dependencies -->
<!-- GSAP library -->
<script src="js/gsap.min.js"></script>
<!-- SplitType for text manipulation: https://github.com/lukePeavey/SplitType -->
<script src="js/split-type.min.js"></script>
<!-- Scripts for the effect -->
<script type="module" src="js/effect-2/index.js"></script>
</body>
</html>