<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/collection/components/icon/icon.min.css">
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.esm.js"></script>
<div class="hero">
<h1>Scroll Animation Demo</h1>
<p>Scroll down to see beautiful text animations</p>
<div class="scroll-indicator">
<ion-icon name="chevron-down-outline" style="font-size: 2rem; color: white;"></ion-icon>
</div>
</div>
<div class="content-section">
<div class="container">
<div class="text-block animate-text">
<h2>
<ion-icon name="rocket-outline"></ion-icon>
Smooth Animations
</h2>
<p>Experience seamless text animations that trigger as you scroll through the page. Each element smoothly fades in and moves into position, creating an engaging user experience that captures attention and guides the viewer through your content.</p>
</div>
<div class="text-block slide-in-left">
<h2>
<ion-icon name="brush-outline"></ion-icon>
Professional Design
</h2>
<p>Clean, minimal aesthetics combined with purposeful motion create a sophisticated presentation. The animations are subtle yet effective, never overwhelming the content but enhancing its impact.</p>
</div>
<div class="text-block slide-in-right">
<h2>
<ion-icon name="flash-outline"></ion-icon>
Optimized Performance
</h2>
<p>Built with performance in mind, these animations use CSS transforms and opacity for hardware-accelerated rendering. The result is smooth, jank-free motion that works beautifully across all devices.</p>
</div>
<div class="text-block fade-in">
<h2>
<ion-icon name="star-outline"></ion-icon>
Feature Highlights
</h2>
</div>
<div class="feature-grid">
<div class="feature-card">
<ion-icon name="eye-outline"></ion-icon>
<h3>Viewport Detection</h3>
<p>Automatically detects when elements enter the viewport</p>
</div>
<div class="feature-card">
<ion-icon name="layers-outline"></ion-icon>
<h3>Multiple Styles</h3>
<p>Various animation patterns to suit your needs</p>
</div>
<div class="feature-card">
<ion-icon name="settings-outline"></ion-icon>
<h3>Easy Customization</h3>
<p>Simple to modify and adapt to your project</p>
</div>
</div>
</div>
</div>
No comments yet. Be the first!