-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathindex.html
executable file
·154 lines (148 loc) · 7.98 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sliced Text Effect | Codrops</title>
<meta name="description" content="A scroll-based sliced text animation inspired by academyux.com" />
<meta name="keywords" content="text effect, sliced text, segmented text, animation, typography, javascript" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/ejh4sem.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>document.documentElement.className="js";</script>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="loading">
<main>
<header class="frame frame--header">
<h1 class="frame__title">Sliced Text Effect</h1>
<a class="frame__back" href="https://tympanus.net/codrops/?p=74735">Back to the article</a>
<a class="frame__prev" href="https://tympanus.net/Development/3DPortalCard">Previous demo</a>
<a class="frame__sub" href="https://tympanus.net/codrops/collective/">Subscribe</a>
</header>
<div class="deco">
<div class="deco__item" style="background-image:url(img/1.jpg)"></div>
<div class="deco__item" style="background-image:url(img/2.jpg)"></div>
<div class="deco__item" style="background-image:url(img/3.jpg)"></div>
<div class="deco__item" style="background-image:url(img/4.jpg)"></div>
<div class="deco__item" style="background-image:url(img/5.jpg)"></div>
<div class="deco__item" style="background-image:url(img/6.jpg)"></div>
<div class="deco__item" style="background-image:url(img/7.jpg)"></div>
<div class="deco__item" style="background-image:url(img/8.jpg)"></div>
<div class="deco__item" style="background-image:url(img/9.jpg)"></div>
<div class="deco__item" style="background-image:url(img/1.jpg)"></div>
<div class="deco__item" style="background-image:url(img/2.jpg)"></div>
<div class="deco__item" style="background-image:url(img/3.jpg)"></div>
<div class="deco__item" style="background-image:url(img/4.jpg)"></div>
<div class="deco__item" style="background-image:url(img/5.jpg)"></div>
<div class="deco__item" style="background-image:url(img/6.jpg)"></div>
<div class="deco__item" style="background-image:url(img/7.jpg)"></div>
<div class="deco__item" style="background-image:url(img/8.jpg)"></div>
<div class="deco__item" style="background-image:url(img/9.jpg)"></div>
<div class="deco__item" style="background-image:url(img/1.jpg)"></div>
<div class="deco__item" style="background-image:url(img/2.jpg)"></div>
<div class="deco__item" style="background-image:url(img/3.jpg)"></div>
<div class="deco__item" style="background-image:url(img/4.jpg)"></div>
<div class="deco__item" style="background-image:url(img/5.jpg)"></div>
<div class="deco__item" style="background-image:url(img/6.jpg)"></div>
<div class="deco__item" style="background-image:url(img/7.jpg)"></div>
<div class="deco__item" style="background-image:url(img/8.jpg)"></div>
<div class="deco__item" style="background-image:url(img/9.jpg)"></div>
<div class="deco__item" style="background-image:url(img/1.jpg)"></div>
<div class="deco__item" style="background-image:url(img/2.jpg)"></div>
<div class="deco__item" style="background-image:url(img/3.jpg)"></div>
<div class="deco__item" style="background-image:url(img/4.jpg)"></div>
<div class="deco__item" style="background-image:url(img/5.jpg)"></div>
<div class="deco__item" style="background-image:url(img/6.jpg)"></div>
<div class="deco__item" style="background-image:url(img/7.jpg)"></div>
<div class="deco__item" style="background-image:url(img/8.jpg)"></div>
<div class="deco__item" style="background-image:url(img/9.jpg)"></div>
</div>
<div class="content">
<p>I have lived in darkness<br>
For all my life, I've been pursued<br>
You'd be afraid if you could feel my pain<br>
And if you could see the things I am able to see</p>
<h2 class="gtext size-s font-4 end" data-text="Break me out">Break me out</h2>
<h2 class="gtext size-s font-4 end" data-text="Break me out">Break me out</h2>
</div>
<div class="content content--full">
<h3 class="gtext size-xxl font-5 shadow-1 spaced" data-text="saved" data-effect="1">saved</h3>
</div>
<div class="content">
<p>I hail from the dark side<br>
For all my life, I've been besieged<br>
You'd be scared living with my despair<br>
And if you could feel the things, I am able to feel</p>
<h2 class="gtext size-s font-5 end" data-text="Let me flee">Let me flee</h2>
</div>
<div class="content content--full">
<h3 class="gtext size-xl font-4 shadow-2 color-1 spaced" data-text="loved" data-effect="2">loved</h3>
</div>
<div class="content">
<p>In the abyss of time's cold embrace,<br>
Where echoes of hope are cruelly erased,<br>
You'd shiver in the silence of my cries,<br>
If you could traverse the shadows I've embraced.</p>
<h2 class="gtext size-s font-1 end" data-text="Break me out">Break me out</h2>
<h2 class="gtext size-s font-1 end" data-text="Break me out">Break me out</h2>
</div>
<div class="content content--full">
<h3 class="gtext size-xl font-7 shadow-1 spaced" data-text="freed" data-effect="3">freed</h3>
</div>
<div class="content content--full">
<h2 class="gtext size-m font-7 end end" data-text="Set me free">Set me free</h2>
</div>
<div class="content">
<p>In the labyrinth of fabricated truths,<br>
Where echoes of deception distort our roots,<br>
You'd question the illusions I've uncovered,<br>
And if you could decipher the lies I've rediscovered.</p>
</div>
<div class="content content--full">
<h3 class="gtext size-xl font-2 shadow-2 color-1 blendmode-1 spaced" data-text="bold" data-effect="4">bold</h3>
</div>
<div class="content content--full">
<h2 class="gtext size-m font-4 end end" data-text="Unbreak me">Unbreak me</h2>
</div>
<div class="content">
<p>Beyond the confines of my mind's maze,<br>
Where echoes of dreams shimmer like sun rays,<br>
You'd marvel at the wonders I've conceived,<br>
And if you could dream the dreams I've believed.</p>
<h2 class="gtext size-s font-1 end" data-text="Awaken me">Awaken me</h2>
<h2 class="gtext size-s font-1 end" data-text="Awaken me">Awaken me</h2>
</div>
<div class="content content--full">
<h3 class="gtext size-xxl font-6 shadow-1 spaced" data-text="inspired" data-effect="5">inspired</h3>
<p>In the canvas of creativity's delight,<br>
Where echoes of imagination take flight,<br>
You'd paint the strokes of ideas embraced,<br>
And if you could feel the visions I've chased.</p>
</div>
<div class="content">
<h2 class="gtext size-s font-1 end" data-text="Revive me">Revive me</h2>
<h2 class="gtext size-s font-1 end" data-text="Revive me">Revive me</h2>
</div>
<div class="content content--full">
<h3 class="gtext size-xl font-3 shadow-1 spaced" data-text="clear" data-effect="6">clear</h3>
<p>In the symphony of nostalgia's refrain,<br>
Where echoes of moments forever remain,<br>
You'd dance in the rhythm of joys and sorrows,<br>
And if you could feel the yesterdays I borrow.</p>
</div>
<footer class="frame frame--footer">
<span>Created by <a href="https://x.com/codrops">@codrops</a></span>
<a href="https://tympanus.net/codrops/collective/">Subscribe</a>
</footer>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/gsap.min.js"></script>
<script src="js/ScrollTrigger.min.js"></script>
<script src="js/lenis.min.js"></script>
<script type="module" src="js/index.js"></script>
</body>
</html>