* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
color: white;
margin-bottom: 3rem;
}
.header h1 {
font-size: 3rem;
margin-bottom: 0.5rem;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.header p {
font-size: 1.125rem;
opacity: 0.9;
}
.animation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.animation-card {
background: white;
padding: 2rem;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.card-title {
font-size: 1.25rem;
color: #2c3e50;
font-weight: 600;
}
.play-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 0.625rem 1.25rem;
border-radius: 10px;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.play-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.animation-area {
min-height: 200px;
background: #f8f9fa;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
/* Animation Elements */
.box {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 10px;
}
.circle {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #f093fb, #f5576c);
border-radius: 50%;
}
.text-anime {
font-size: 2rem;
font-weight: 700;
color: #667eea;
letter-spacing: 5px;
}
.path-svg {
width: 100%;
height: 100%;
}
.morph-shape {
width: 100px;
height: 100px;
}
.particle {
width: 10px;
height: 10px;
background: #667eea;
border-radius: 50%;
position: absolute;
}
.stagger-box {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #43e97b, #38f9d7);
border-radius: 8px;
margin: 5px;
}
.stagger-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
.number-counter {
font-size: 3rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.timeline-item {
width: 50px;
height: 50px;
background: #667eea;
border-radius: 50%;
margin: 10px;
}
.timeline-container {
display: flex;
justify-content: center;
align-items: center;
}
.elastic-box {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #f093fb, #f5576c);
border-radius: 15px;
}
.card-footer {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e0e0e0;
font-size: 0.875rem;
color: #6c757d;
}
.controls {
text-align: center;
margin-top: 2rem;
}
.control-btn {
background: white;
color: #667eea;
border: 2px solid white;
padding: 1rem 2rem;
border-radius: 12px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
margin: 0 0.5rem;
transition: all 0.3s ease;
}
.control-btn:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
}
// Basic Translation
function playBasicAnimation() {
anime({
targets: '#basicBox',
translateX: [0, 200, 0],
rotate: [0, 360, 0],
duration: 2000,
easing: 'easeInOutQuad'
});
}
// Scale & Rotate
function playScaleAnimation() {
anime({
targets: '#scaleCircle',
scale: [1, 1.5, 1],
rotate: [0, 720],
duration: 2000,
easing: 'easeInOutElastic(1, .6)'
});
}
// Text Animation
function playTextAnimation() {
const text = document.getElementById('animatedText');
text.innerHTML = text.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline()
.add({
targets: '.letter',
translateY: [-100, 0],
opacity: [0, 1],
easing: 'easeOutExpo',
duration: 1400,
delay: (el, i) => 100 * i
});
}
// Path Animation
function playPathAnimation() {
anime({
targets: '#pathDraw',
strokeDashoffset: [1000, 0],
duration: 2000,
easing: 'easeInOutSine'
});
}
// Stagger Animation
function playStaggerAnimation() {
anime({
targets: '.stagger-box',
translateY: [-50, 0],
opacity: [0, 1],
scale: [0, 1],
rotate: [0, 360],
duration: 1000,
delay: anime.stagger(100),
easing: 'easeOutElastic(1, .8)'
});
}
// Number Counter
function playCounterAnimation() {
const counter = { value: 0 };
anime({
targets: counter,
value: 1000,
duration: 2000,
round: 1,
easing: 'easeInOutExpo',
update: function() {
document.getElementById('counter').textContent = counter.value;
}
});
}
// Timeline Animation
function playTimelineAnimation() {
const timeline = anime.timeline({
easing: 'easeOutExpo',
duration: 750
});
timeline
.add({
targets: '#item1',
translateX: 100,
scale: 1.5,
backgroundColor: '#f5576c'
})
.add({
targets: '#item2',
translateX: -100,
scale: 1.5,
backgroundColor: '#43e97b'
}, '-=500')
.add({
targets: '#item3',
translateY: -50,
scale: 2,
backgroundColor: '#ffd700'
}, '-=500')
.add({
targets: '.timeline-item',
translateX: 0,
translateY: 0,
scale: 1,
backgroundColor: '#667eea'
});
}
// Elastic Effect
function playElasticAnimation() {
anime({
targets: '#elasticBox',
translateY: [0, -100, 0],
scaleX: [1, 1.2, 1],
scaleY: [1, 0.8, 1],
duration: 2000,
easing: 'easeOutElastic(1, .5)'
});
}
// Particle Burst
function playParticleAnimation() {
const particleArea = document.getElementById('particleArea');
particleArea.innerHTML = '';
for (let i = 0; i < 20; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = '50%';
particle.style.top = '50%';
particleArea.appendChild(particle);
}
anime({
targets: '.particle',
translateX: function() {
return anime.random(-150, 150);
},
translateY: function() {
return anime.random(-150, 150);
},
scale: [1, 0],
opacity: [1, 0],
duration: 1500,
easing: 'easeOutExpo',
complete: function() {
particleArea.innerHTML = '';
}
});
}
// Play All Animations
function playAllAnimations() {
playBasicAnimation();
setTimeout(() => playScaleAnimation(), 200);
setTimeout(() => playTextAnimation(), 400);
setTimeout(() => playPathAnimation(), 600);
setTimeout(() => playStaggerAnimation(), 800);
setTimeout(() => playCounterAnimation(), 1000);
setTimeout(() => playTimelineAnimation(), 1200);
setTimeout(() => playElasticAnimation(), 1400);
setTimeout(() => playParticleAnimation(), 1600);
}
// Auto-play on load
window.addEventListener('load', () => {
setTimeout(() => playTextAnimation(), 500);
});
No comments yet. Be the first!