animtext
Version:
AnimText is a JavaScript library for letter, word, & line animations. Easily create dynamic text effects with simple HTML data attributes.
114 lines (101 loc) • 2.99 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GlyphFX Demo</title>
<style>
body {
font-family: sans-serif;
padding: 2rem;
line-height: 1.6;
}
.demo-section {
margin-bottom: 3rem;
}
h2 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
color: #444;
}
.cssanimation {
font-size: 2rem;
display: block;
margin-top: 0.5rem;
}
/* Simple animation classes */
.fadeIn {
animation-name: fadeIn;
}
.bounceIn {
animation-name: bounceIn;
}
.slideUp {
animation-name: slideUp;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes bounceIn {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.1); }
70% { transform: scale(0.9); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
</head>
<body>
<h1>AnimText Animation Demo</h1>
<!-- Letter Sequence Animation -->
<div class="demo-section">
<h2>Letter Sequence Animation</h2>
<span class="cssanimation" data-at-sequence="fadeIn">Animate Letters
in Sequence</span>
</div>
<!-- Letter Reverse Animation -->
<div class="demo-section">
<h2>Letter Reverse Animation</h2>
<span class="cssanimation" data-at-reverse="fadeIn"
data-at-delay="100">Reverse Animation Order</span>
</div>
<!-- Letter Random Animation -->
<div class="demo-section">
<h2>Letter Random Animation</h2>
<span class="cssanimation" data-at-random="fadeIn"
data-at-delay="40">Random Letter Entry</span>
</div>
<!-- Word Animation (Bounce) -->
<div class="demo-section">
<h2>Word Animation (Bounce)</h2>
<span class="cssanimation" data-at-word="bounceIn"
data-at-delay="120">Animate by Word with Bounce</span>
</div>
<!-- Line Animation (Default BR) -->
<div class="demo-section">
<h2>Line Animation (Default BR)</h2>
<span class="cssanimation" data-at-line="slideUp bounceIn fadeIn"
data-at-delay="300">
Line one<br>
Line two<br>
Line three
Line Four
Line Five
</span>
</div>
<!-- Line Animation with Dot Separator -->
<div class="demo-section">
<h2>Line Animation with Dot Separator</h2>
<span class="cssanimation" data-at-line="slideUp bounceIn"
data-at-delay="500"
data-at-separator="dot">
First line. Second line. Final line. Test Line.
</span>
</div>
<script src="./animtext.dev.js"></script>
</body>
</html>