-
Notifications
You must be signed in to change notification settings - Fork 20
/
Copy pathindex3.html
executable file
·135 lines (135 loc) · 7.12 KB
/
index3.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
<!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 3 | 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-3">
<main>
<header class="frame">
<h1 class="frame__title"><a class="hover-effect" href="https://tympanus.net/codrops/demos/?tag=hover">#Hover</a> Animations on Line <a class="hover-effect" href="https://tympanus.net/codrops/demos/?tag=typography">#Typography</a></h1>
<a class="frame__back hover-effect" href="https://tympanus.net/codrops/?p=78645">Article</a>
<a class="frame__archive hover-effect" href="https://tympanus.net/codrops/demos/">All demos</a>
<a class="frame__github hover-effect" href="https://github.com/codrops/LineTextHoverAnimations/">GitHub</a>
<nav class="frame__demos">
<span>Variations:</span>
<a class="hover-effect" href="index.html">V1</a>
<a class="hover-effect" href="index2.html">V2</a>
<span>V3</span>
<a class="hover-effect" href="index4.html">V4</a>
</nav>
</header>
<section class="content">
<h2 class="content__title">Volcanic Eruptions</h2>
<ul class="list">
<li class="list__item">
<span class="list__item-col hover-effect">Mount Vespera</span>
<span class="list__item-col hover-effect">Planet Thalassa</span>
<span class="list__item-col hover-effect">2157-03-14</span>
<span class="list__item-col hover-effect">6</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect">Kraxion</span>
<span class="list__item-col hover-effect">Exo-Planet Zyra</span>
<span class="list__item-col hover-effect">2243-11-09</span>
<span class="list__item-col hover-effect">7</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect">Helion Peak</span>
<span class="list__item-col hover-effect">Planet Elara</span>
<span class="list__item-col hover-effect">2180-05-18</span>
<span class="list__item-col hover-effect">5</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect">Pyrosphere</span>
<span class="list__item-col hover-effect">Moon Xanthe</span>
<span class="list__item-col hover-effect">2291-06-15</span>
<span class="list__item-col hover-effect">6</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect">Vulcanus</span>
<span class="list__item-col hover-effect">Asteroid B-612</span>
<span class="list__item-col hover-effect">2312-08-22</span>
<span class="list__item-col hover-effect">5</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect">Tarkon's Fury</span>
<span class="list__item-col hover-effect">Planet Drakonis</span>
<span class="list__item-col hover-effect">2455-12-01</span>
<span class="list__item-col hover-effect">8</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect">Aether Plume</span>
<span class="list__item-col hover-effect">Planet Ganymede</span>
<span class="list__item-col hover-effect">2379-04-10</span>
<span class="list__item-col hover-effect">4</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect">Mount Zenith</span>
<span class="list__item-col hover-effect">Planet Lumina</span>
<span class="list__item-col hover-effect">2392-09-21</span>
<span class="list__item-col hover-effect">6</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect">Inferno Crest</span>
<span class="list__item-col hover-effect">Moon Rhea</span>
<span class="list__item-col hover-effect">2410-03-08</span>
<span class="list__item-col hover-effect">5</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect">Jacob's Hill</span>
<span class="list__item-col hover-effect">Exoplanet HU5</span>
<span class="list__item-col hover-effect">2205-12-09</span>
<span class="list__item-col hover-effect">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">2178-04-21</span>
<span class="list__item-col hover-effect">2190-07-16</span>
<span class="list__item-col hover-effect">X7</span>
<span class="list__item-col hover-effect">2205-12-08</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect">2234-02-11</span>
<span class="list__item-col hover-effect">2241-09-25</span>
<span class="list__item-col hover-effect">A5</span>
<span class="list__item-col hover-effect">2253-01-30</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect">2301-06-17</span>
<span class="list__item-col hover-effect">2312-03-05</span>
<span class="list__item-col hover-effect">B9</span>
<span class="list__item-col hover-effect">2320-08-14</span>
</li>
<li class="list__item">
<span class="list__item-col hover-effect">2404-11-19</span>
<span class="list__item-col hover-effect">2415-07-22</span>
<span class="list__item-col hover-effect">L0</span>
<span class="list__item-col hover-effect">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-3/index.js"></script>
</body>
</html>