animtext
Version:
AnimText is a JavaScript library for letter, word, & line animations. Easily create dynamic text effects with simple HTML data attributes.
150 lines (138 loc) • 6.11 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>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom animation classes */
.cssanimation {
display: inline-block;
font-size: 2.25rem;
font-weight: 600;
transition: all 0.3s ease; /* Smooth Tailwind transition */
}
/* Simple animation classes */
.ca__fx-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 class="bg-gray-50 font-sans text-gray-800 antialiased">
<div class="min-h-screen py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto">
<header class="text-center mb-16">
<h1
class="text-4xl font-extrabold text-gray-900 sm:text-5xl md:text-6xl">AnimText
Animation Demo</h1>
<p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">Discover
dynamic text animations with AnimText. Watch letters, words, and
lines come to life!</p>
</header>
<!-- Letter Sequence Animation -->
<section
class="bg-white rounded-xl shadow-md p-8 mb-10 hover:shadow-lg transition-shadow duration-300">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Letter Sequence
Animation</h2>
<span class="cssanimation text-indigo-600 animate"
data-at-sequence="ca__fx-FadeIn">Animates each letter into view
sequentially.</span>
</section>
<!-- Letter Reverse Animation -->
<section
class="bg-white rounded-xl shadow-md p-8 mb-10 hover:shadow-lg transition-shadow duration-300">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Letter Reverse
Animation</h2>
<span class="cssanimation text-indigo-600 animate"
data-at-reverse="ca__fx-FadeIn" data-at-delay="100"> Reveals
Characters in Reverse</span>
</section>
<!-- Letter Random Animation -->
<section
class="bg-white rounded-xl shadow-md p-8 mb-10 hover:shadow-lg transition-shadow duration-300">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Letter Random
Animation</h2>
<span class="cssanimation text-indigo-600 animate"
data-at-random="ca__fx-FadeIn" data-at-delay="40">Reveals characters
in a non-sequential, random order.</span>
</section>
<!-- Word Animation (Bounce) -->
<section
class="bg-white rounded-xl shadow-md p-8 mb-10 hover:shadow-lg transition-shadow duration-300">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Word-by-Word
Animation</h2>
<span class="cssanimation text-indigo-600 animate"
data-at-word="bounceIn" data-at-delay="120">Animates each word into
position, featuring a lively bounce.</span>
</section>
<!-- Line Animation (Default BR) -->
<section
class="bg-white rounded-xl shadow-md p-8 mb-10 hover:shadow-lg transition-shadow duration-300">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Line-by-Line
Animation (BR and \n Tag Separated)</h2>
<span class="cssanimation text-indigo-600 animate"
data-at-line="slideUp bounceIn ca__fx-FadeIn" data-at-delay="300">
This is the first animated line.
Here comes the second line of text.
A third line demonstrates the effect.
The fourth line continues the sequence.<br />
And finally, the fifth line animates.
</span>
</section>
<!-- Line Animation with Dot Separator -->
<section
class="bg-white rounded-xl shadow-md p-8 mb-10 hover:shadow-lg transition-shadow duration-300">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Line Animation
with Dot Separator</h2>
<span class="cssanimation text-indigo-600 animate"
data-at-line="slideUp bounceIn" data-at-delay="500"
data-at-separator="dot">
This is the first segment. Here's the second phrase to appear. The
third part follows. And this is the final animated line.
</span>
</section>
</div>
</div>
<!-- Fallback JavaScript to trigger animations -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('.cssanimation');
elements.forEach((el, index) => {
const animation = el.dataset.atSequence || el.dataset.atReverse || el.dataset.atRandom || el.dataset.atWord || el.dataset.atLine;
if (animation) {
// Split animations if multiple are provided (e.g., "slideUp bounceIn ca__fx-FadeIn")
const animations = animation.split(' ');
const delay = parseInt(el.dataset.atDelay || '0', 10);
// Apply the first animation as a fallback
setTimeout(() => {
el.classList.add(animations[0]);
}, delay + index * 100); // Stagger animations slightly
}
});
});
</script>
<!-- External animation script (ensure this path is correct) -->
<script src="./animtext.dev.js"></script>
</body>
</html>