xt-animations
Version:
XT Animations - A lightweight scroll animation library using pure CSS and JavaScript.
392 lines (341 loc) • 12.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XT-Animate Global Demo</title>
<!-- Include XT-Animate CSS locally -->
<link rel="stylesheet" href="xt-animate.css">
<style>
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
padding: 4rem 0;
}
.card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 2rem;
margin: 1rem;
max-width: 300px;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0;
width: 100%;
}
h1 {
font-size: clamp(2.5rem, 8vw, 4rem);
margin-bottom: 1rem;
font-weight: 900;
}
h2 {
font-size: clamp(2rem, 6vw, 2.5rem);
margin-bottom: 1rem;
font-weight: 700;
}
h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
font-weight: 600;
}
p {
font-size: 1.1rem;
opacity: 0.9;
line-height: 1.6;
}
.counter {
font-size: 3rem;
font-weight: bold;
color: #f093fb;
display: block;
margin-bottom: 0.5rem;
}
.btn {
display: inline-block;
padding: 1rem 2rem;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
color: white;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 600;
margin-top: 1rem;
}
.btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.debug-panel {
position: fixed;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 1rem;
border-radius: 10px;
font-family: monospace;
font-size: 0.9rem;
z-index: 1000;
backdrop-filter: blur(10px);
}
.controls {
position: fixed;
top: 20px;
left: 20px;
z-index: 1000;
}
.control-btn {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
cursor: pointer;
margin: 0.25rem;
font-size: 0.9rem;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.control-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
.controls, .debug-panel {
position: relative;
top: auto;
right: auto;
left: auto;
margin: 1rem 0;
}
}
</style>
</head>
<body>
<!-- Controls -->
<div class="controls">
<button class="control-btn" onclick="XTAnimate.enableDebug()">Enable Debug</button>
<button class="control-btn" onclick="XTAnimate.resetAll()">Reset All</button>
<button class="control-btn" onclick="showStats()">Show Stats</button>
</div>
<!-- Debug Panel -->
<div class="debug-panel" id="debugPanel" style="display: none;">
<div><strong>XT-Animate Debug</strong></div>
<div id="debugInfo">Loading...</div>
</div>
<!-- Hero Section -->
<section class="section">
<div class="container">
<h1 xt-animate="fade-up duration-slow">XT-Animate</h1>
<p xt-animate="fade-up delay-200">Global Animation System for Any Website</p>
<a href="#demo" class="btn" xt-animate="bounce-in delay-400">Explore Animations</a>
</div>
</section>
<!-- Demo Section -->
<section class="section" id="demo">
<div class="container">
<h2 xt-animate="slide-down">Animation Examples</h2>
<div class="grid">
<div class="card" xt-animate="fade-left delay-100">
<h3>Fade Left</h3>
<p>Smooth fade from left side with elegant timing</p>
</div>
<div class="card" xt-animate="fade-right delay-200">
<h3>Fade Right</h3>
<p>Elegant fade from right side with perfect easing</p>
</div>
<div class="card" xt-animate="scale-up delay-300">
<h3>Scale Up</h3>
<p>Growing scale animation with smooth transition</p>
</div>
<div class="card" xt-animate="rotate-left delay-400">
<h3>Rotate Left</h3>
<p>Rotating entrance effect with 3D perspective</p>
</div>
<div class="card" xt-animate="flip-x delay-500">
<h3>Flip X</h3>
<p>3D flip animation on X-axis with depth</p>
</div>
<div class="card" xt-animate="morph-up delay-600">
<h3>Morph Up</h3>
<p>Advanced 3D morphing effect with rotation</p>
</div>
</div>
</div>
</section>
<!-- Counter Section -->
<section class="section">
<div class="container">
<h2 xt-animate="fade-up">Live Counters</h2>
<div class="grid">
<div class="card" xt-animate="bounce-in delay-100">
<div class="counter" data-counter="1250">0</div>
<p>Happy Clients</p>
</div>
<div class="card" xt-animate="bounce-in delay-200">
<div class="counter" data-counter="99.9">0</div>
<p>Success Rate %</p>
</div>
<div class="card" xt-animate="bounce-in delay-300">
<div class="counter" data-counter="500">0</div>
<p>Projects Done</p>
</div>
</div>
</div>
</section>
<!-- Advanced Animations -->
<section class="section">
<div class="container">
<h2 xt-animate="elastic-up">Advanced Effects</h2>
<div class="grid">
<div class="card" xt-animate="blur-in duration-slow">
<h3>Blur In</h3>
<p>Smooth blur to focus transition with perfect timing</p>
</div>
<div class="card" xt-animate="elastic-scale ease-elastic">
<h3>Elastic Scale</h3>
<p>Bouncy elastic animation with spring physics</p>
</div>
<div class="card" xt-animate="glow fade-up">
<h3>Glow Effect</h3>
<p>Glowing entrance animation with light effects</p>
</div>
</div>
</div>
</section>
<!-- Stagger Example -->
<section class="section">
<div class="container">
<h2 xt-animate="fade-up">Stagger Animations</h2>
<div class="grid xt-stagger">
<div class="card" xt-animate="slide-up">
<h3>Stagger 1</h3>
<p>First in sequence</p>
</div>
<div class="card" xt-animate="slide-up">
<h3>Stagger 2</h3>
<p>Second in sequence</p>
</div>
<div class="card" xt-animate="slide-up">
<h3>Stagger 3</h3>
<p>Third in sequence</p>
</div>
</div>
</div>
</section>
<!-- Include XT-Animate JavaScript locally -->
<script src="xt-animate.js"></script>
<!-- Demo JavaScript -->
<script>
// Global functions for controls
function showStats() {
const stats = XTAnimate.getStats();
alert(`📊 Animation Statistics:
Total Elements: ${stats.totalElements}
Animated Elements: ${stats.animatedElements}
Counters: ${stats.counters}
Version: ${stats.version}`);
}
// Update debug panel
function updateDebugPanel() {
const debugPanel = document.getElementById('debugPanel');
const debugInfo = document.getElementById('debugInfo');
const stats = XTAnimate.getStats();
debugInfo.innerHTML = `
Elements: ${stats.totalElements}<br>
Animated: ${stats.animatedElements}<br>
Counters: ${stats.counters}<br>
Version: ${stats.version}
`;
}
// Override debug enable to show panel
const originalEnableDebug = XTAnimate.enableDebug;
XTAnimate.enableDebug = function() {
originalEnableDebug();
document.getElementById('debugPanel').style.display = 'block';
setInterval(updateDebugPanel, 1000);
};
// Initialize demo
document.addEventListener('DOMContentLoaded', function() {
console.log('🎭 Demo loaded! XT-Animate version:', XTAnimate.version);
// Test animations after a delay
setTimeout(() => {
console.log('📊 Current stats:', XTAnimate.getStats());
}, 2000);
// Add click handlers to cards for re-animation
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', function() {
this.classList.remove('xt-visible');
setTimeout(() => {
XTAnimate.utils.triggerAnimation(this);
}, 100);
});
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
});
// Listen for animation events
document.addEventListener('xt-animated', function(e) {
console.log('🎬 Animation completed:', e.detail.animation);
});
// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.shiftKey) {
switch(e.key) {
case 'D':
XTAnimate.enableDebug();
break;
case 'R':
XTAnimate.resetAll();
break;
case 'S':
showStats();
break;
}
}
});
</script>
</body>
</html>