my-animation-lib
Version:
A powerful animation library combining Three.js, GSAP, custom scroll triggers, and advanced effects with MathUtils integration
294 lines (255 loc) • 9.69 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Effects Demo - My Animation Library</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
.section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.section:nth-child(odd) {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.section:nth-child(even) {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}
.content {
text-align: center;
z-index: 10;
position: relative;
max-width: 800px;
padding: 2rem;
}
.parallax-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.parallax-bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
}
.parallax-element {
position: absolute;
z-index: 5;
opacity: 0.8;
}
.floating-shape {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
position: absolute;
}
.floating-shape.square {
border-radius: 0;
}
.floating-shape.triangle {
width: 0;
height: 0;
background: transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86px solid rgba(255, 255, 255, 0.2);
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
p {
font-size: 1.2rem;
margin-bottom: 1rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.controls {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
background: rgba(0, 0, 0, 0.8);
padding: 1rem;
border-radius: 10px;
color: white;
}
.controls button {
background: #007bff;
color: white;
border: none;
padding: 0.5rem 1rem;
margin: 0.25rem;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
.controls button:hover {
background: #0056b3;
}
.controls button.active {
background: #28a745;
}
</style>
</head>
<body>
<div class="controls">
<h3>Parallax Controls</h3>
<button id="toggleParallax" class="active">Toggle Parallax</button>
<button id="changeSpeed">Change Speed</button>
<button id="resetAll">Reset All</button>
</div>
<div class="section">
<div class="parallax-bg">
<img src="https://picsum.photos/1920/1080?random=1" alt="Background 1">
</div>
<div class="parallax-element floating-shape" style="top: 20%; left: 10%;"></div>
<div class="parallax-element floating-shape square" style="top: 60%; right: 15%;"></div>
<div class="content">
<h1>Welcome to Parallax</h1>
<p>Scroll down to experience the magic of parallax effects</p>
</div>
</div>
<div class="section">
<div class="parallax-bg">
<img src="https://picsum.photos/1920/1080?random=2" alt="Background 2">
</div>
<div class="parallax-element floating-shape triangle" style="top: 30%; left: 20%;"></div>
<div class="parallax-element floating-shape" style="bottom: 20%; right: 20%;"></div>
<div class="content">
<h1>Smooth Scrolling</h1>
<p>Notice how elements move at different speeds</p>
</div>
</div>
<div class="section">
<div class="parallax-bg">
<img src="https://picsum.photos/1920/1080?random=3" alt="Background 3">
</div>
<div class="parallax-element floating-shape square" style="top: 40%; left: 30%;"></div>
<div class="parallax-element floating-shape triangle" style="bottom: 30%; right: 30%;"></div>
<div class="content">
<h1>Depth Perception</h1>
<p>Create amazing 3D-like effects with simple CSS</p>
</div>
</div>
<div class="section">
<div class="parallax-bg">
<img src="https://picsum.photos/1920/1080?random=4" alt="Background 4">
</div>
<div class="parallax-element floating-shape" style="top: 25%; left: 40%;"></div>
<div class="parallax-element floating-shape square" style="bottom: 25%; right: 40%;"></div>
<div class="content">
<h1>Interactive Elements</h1>
<p>Use the controls above to customize the experience</p>
</div>
</div>
<script type="module">
import { AnimationEngine, ParallaxEffect } from '../src/index.js';
// Initialize the animation engine
const engine = new AnimationEngine();
await engine.init();
// Get all parallax elements
const parallaxElements = document.querySelectorAll('.parallax-element');
const parallaxEffects = [];
// Create parallax effects for floating shapes
parallaxElements.forEach((element, index) => {
const effect = new ParallaxEffect(element, {
speed: 0.5 + (index * 0.2),
direction: 'vertical',
easing: 'easeOutCubic'
});
parallaxEffects.push(effect);
});
// Create parallax effects for background images
const backgroundImages = document.querySelectorAll('.parallax-bg');
backgroundImages.forEach((bg, index) => {
const effect = new ParallaxEffect(bg, {
speed: 0.1 + (index * 0.05),
direction: 'vertical',
easing: 'easeOutQuad'
});
parallaxEffects.push(effect);
});
// Control buttons functionality
let parallaxEnabled = true;
let currentSpeed = 1;
document.getElementById('toggleParallax').addEventListener('click', function() {
parallaxEnabled = !parallaxEnabled;
this.classList.toggle('active');
parallaxEffects.forEach(effect => {
if (parallaxEnabled) {
effect.bindEvents();
} else {
effect.destroy();
}
});
});
document.getElementById('changeSpeed').addEventListener('click', function() {
currentSpeed = currentSpeed === 1 ? 2 : currentSpeed === 2 ? 0.5 : 1;
this.textContent = `Speed: ${currentSpeed}x`;
parallaxEffects.forEach(effect => {
effect.options.speed *= currentSpeed;
});
});
document.getElementById('resetAll').addEventListener('click', function() {
// Reset all parallax effects
parallaxEffects.forEach(effect => effect.destroy());
// Recreate them
parallaxEffects.length = 0;
parallaxElements.forEach((element, index) => {
const effect = new ParallaxEffect(element, {
speed: 0.5 + (index * 0.2),
direction: 'vertical',
easing: 'easeOutCubic'
});
parallaxEffects.push(effect);
});
backgroundImages.forEach((bg, index) => {
const effect = new ParallaxEffect(bg, {
speed: 0.1 + (index * 0.05),
direction: 'vertical',
easing: 'easeOutQuad'
});
parallaxEffects.push(effect);
});
parallaxEnabled = true;
document.getElementById('toggleParallax').classList.add('active');
document.getElementById('changeSpeed').textContent = 'Change Speed';
});
// Add some interactive animations
parallaxElements.forEach(element => {
element.addEventListener('mouseenter', () => {
element.style.transform = 'scale(1.2)';
element.style.transition = 'transform 0.3s ease';
});
element.addEventListener('mouseleave', () => {
element.style.transform = 'scale(1)';
});
});
console.log('Parallax demo loaded successfully!');
console.log('Created', parallaxEffects.length, 'parallax effects');
</script>
</body>
</html>