forked from codrops/OnScrollTextHighlight
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·111 lines (109 loc) · 6.11 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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Text Highlight Effects | Codrops</title>
<meta name="description" content="Some scroll-based effects for text highlights" />
<meta name="keywords" content="text highlight, animation for text, mark, scroll text highlight, gsap" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="https://use.typekit.net/sem5iwx.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">On-Scroll Text Highlight Effects</h1>
<a class="frame__back" href="https://tympanus.net/codrops/?p=76961">Back to the article</a>
<a class="frame__archive" href="https://tympanus.net/codrops/demos/">All demos</a>
<a class="frame__github" href="https://github.com/codrops/OnScrollTextHighlight/">GitHub</a>
<nav class="frame__tags">
<a href="https://tympanus.net/codrops/demos/?tag=scroll">#scroll</a>
<a href="https://tympanus.net/codrops/demos/?tag=typography">#typography</a>
</nav>
</header>
<div class="intro">
<h2>On-Scroll Animations <br>for <span>Highlighted</span> Text</h2>
</div>
<div class="content">
<div class="content__inner">
<p>Organised crowds have always played an
<mark class="hx hx-1">important</mark> part in the life of peoples,
but this part has never been of such moment as at present.</p>
</div>
<div class="content__inner">
<p>The substitution of the
<mark class="hx hx-2">unconscious</mark> action of crowds for the
conscious activity of individuals is one of the principal
characteristics of the present age.</p>
</div>
<div class="content__inner">
<p>The key features of an individual in a crowd are the
<mark class="hx hx-3">vanishing</mark> conscious personality, the rise
of the unconscious, and the swift conversion of suggested ideas into
actions through suggestion and contagion.</p>
</div>
<div class="content__inner">
<p>He is no longer himself, but has <mark class="hx hx-4">become an
automaton</mark> who has ceased to be guided by his will.</p>
</div>
<div class="content__inner">
<p>In the midst of the crowd, <mark class="hx hx-5">individual</mark> judgment is swamped by the
overwhelming force of the group's influence.</p>
</div>
<div class="content__inner">
<p>Once submerged in a crowd, the individual becomes more susceptible to
the <mark class="hx hx-6">dynamics</mark> of group think, losing his personal ethical moorings.</p>
</div>
<div class="content__inner">
<p>As part of the crowd, he is swept away by a <mark class="hx hx-7">collective</mark> stream, often
adopting extreme ideas or measures that he alone might not consider.</p>
</div>
<div class="content__inner">
<p>In this <mark class="hx hx-8">transformed state</mark>, the crowd member experiences a diminishing
of personal fear as anonymity provides a <mark class="hx hx-8">comforting shield</mark>.</p>
</div>
<div class="content__inner">
<p>Crowd <mark class="hx hx-9">psychology</mark> facilitates a bizarre unity, melding disparate individuals
into a single entity with a common <mark class="hx hx-9">focus</mark>.</p>
</div>
<div class="content__inner">
<p>This unity is often directed by <mark class="hx hx-10">charismatic</mark> or influential figures who
can steer the crowd's emotions and actions with alarming ease.</p>
</div>
<div class="content__inner">
<h2 class="hx-flip">
<mark class="hx-flip__placeholder">vulnarable</mark>
<mark class="hx-flip__inner">vulnarable</mark>
</h2>
<p>In this sea of sameness, the individual becomes startlingly easy to manipulate. Without the anchor of personal convictions, they drift, <mark class="hx hx-11"><span class="hx__placeholder">vulnerable</span></mark> to whoever steers the crowd's will. It is here, in the pulse of the crowd, where manipulation is not only easy but often goes unnoticed.</p>
</div>
<div class="content__inner">
<p>The vulnerability of individuals within crowds extends beyond mere <mark class="hx hx-12">manipulation</mark>. Within the collective consciousness, moral responsibility becomes diffuse, diluted among the multitude.</p>
</div>
<div class="content__inner">
<p>Actions that would be deemed unethical or <mark class="hx hx-13"><span class="hx__select"></span>reprehensible</mark> on an individual level can be rationalized and justified within the context of the crowd.</p>
</div>
</div>
<footer class="frame frame--footer">
<span>Created by <a href="https://x.com/codrops">@codrops</a> 2024</span>
<a href="https://tympanus.net/codrops/collective/">Subscribe to our frontend newsletter</a>
</footer>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script src="js/gsap.min.js"></script>
<script src="js/splitting.min.js"></script>
<script src="js/ScrollTrigger.min.js"></script>
<script src="js/Flip.min.js"></script>
<!-- Remove the following two lines if you don't want smooth scrolling -->
<script src="js/lenis.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script type="module" src="js/index.js"></script>
</body>
</html>