anim8-core
Version:
Custom JavaScript animation library with modular effects
207 lines (184 loc) • 5.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>anim9-core Demo</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 0;
background: #121212;
color: white;
}
h1 {
font-size: 2.5rem;
margin-bottom: 40px;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 30px;
max-width: 1000px;
width: 100%;
margin-bottom: 60px;
}
.box {
width: 100%;
aspect-ratio: 1 / 1;
background: hotpink;
opacity: 0;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
font-size: 1.2rem;
font-weight: bold;
}
.scroll-me {
background: dodgerblue;
}
button {
padding: 10px 25px;
font-size: 16px;
margin: 10px;
border: none;
background: white;
color: #121212;
border-radius: 10px;
cursor: pointer;
transition: 0.2s;
}
button:hover {
background: hotpink;
color: white;
}
.section-title {
font-size: 1.5rem;
margin: 30px 0 10px;
text-align: center;
}
.typewriter-text {
font-size: 1.8rem;
text-align: center;
min-height: 40px;
}
.gooey-nav {
position: fixed;
bottom: 30px;
display: flex;
gap: 20px;
background: rgba(255, 255, 255, 0.1);
padding: 15px 30px;
border-radius: 50px;
backdrop-filter: blur(20px);
z-index: 999;
filter: url(#goo);
}
.gooey-nav a {
width: 20px;
height: 20px;
background: hotpink;
border-radius: 50%;
display: inline-block;
transform: scale(1);
transition: transform 0.3s;
}
.gooey-nav a:hover {
transform: scale(1.8);
background: white;
}
</style>
</head>
<body>
<h1>✨ anim9-core All Animations Demo</h1>
<div class="section-title">Interactive Buttons</div>
<div>
<button onclick="fadeIn('#fadeBox')">Fade In</button>
<button onclick="slideIn('#slideBox', 'left', 300)">Slide In Left</button>
<button onclick="rotate('#rotateBox')">Rotate</button>
<button onclick="rotateScale('#rotateScaleBox')">Rotate + Scale</button>
<button onclick="blurIn('#blurBox')">Blur In</button>
<button onclick="depthZoom('#depthBox')">Depth Zoom</button>
</div>
<div class="demo-grid">
<div class="box" id="fadeBox">Fade</div>
<div class="box" id="slideBox">Slide</div>
<div class="box" id="rotateBox">Rotate</div>
<div class="box" id="rotateScaleBox">Combo</div>
<div class="box" id="blurBox">Blur</div>
<div class="box" id="depthBox">Zoom</div>
</div>
<div class="section-title">Typewriter Effect</div>
<div class="typewriter-text">Welcome to anim9-core</div>
<div class="section-title">Scroll Reveal</div>
<div class="demo-grid scroll-section">
<div class="box scroll-me">Scroll 1</div>
<div class="box scroll-me">Scroll 2</div>
<div class="box scroll-me">Scroll 3</div>
</div>
<nav class="gooey-nav">
<a href="#fadeBox"></a>
<a href="#slideBox"></a>
<a href="#rotateBox"></a>
<a href="#rotateScaleBox"></a>
</nav>
<svg width="0" height="0">
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 20 -10" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>
</svg>
<script type="module">
import {
fadeIn,
slideIn,
rotate,
rotateScale,
blurIn,
depthZoom,
scrollReveal,
typewriterPulse
} from "./src/index.js";
window.fadeIn = fadeIn;
window.slideIn = slideIn;
window.rotate = rotate;
window.rotateScale = rotateScale;
window.blurIn = blurIn;
window.depthZoom = depthZoom;
window.scrollReveal = scrollReveal;
window.typewriterPulse = typewriterPulse;
window.addEventListener("DOMContentLoaded", () => {
// Automatically trigger base animations on load
fadeIn("#fadeBox");
slideIn("#slideBox", "left", 300);
rotate("#rotateBox");
rotateScale("#rotateScaleBox");
blurIn("#blurBox");
depthZoom("#depthBox");
scrollReveal(".scroll-me", {
delayBetween: 300,
duration: 1000,
distance: 80,
once: false,
reverseEffect: "slideOut",
reverseDirection: "left",
});
typewriterPulse(".typewriter-text", {
delay: 300,
pulseScale: 1.2,
letterDelay: 80,
pulseDuration: 120
});
});
</script>
</body>
</html>