Jinsi ya Kutengeneza Scroll-Triggered Animations
Jifunze jinsi ya kuunda animations zinazochochewa na scroll kwenye website yako. Hii inafanya tovuti yako kuwa interactive na inavutia watumiaji kwa kuonyesha elements zinapopatikana kwenye viewport wakati wanapopiga chini. Tunaweza kutumia GSAP ScrollTrigger au Intersection Observer API.
Mfano wa Code (GSAP ScrollTrigger):
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll-Triggered Animation</title>
<style>
.section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
background-color: #f2f2f2;
margin-bottom: 20px;
opacity: 0;
transform: translateY(50px);
transition: all 0.6s ease-out;
}
</style>
</head>
<body>
<div class="section">Sehemu 1</div>
<div class="section">Sehemu 2</div>
<div class="section">Sehemu 3</div>
<!-- GSAP & ScrollTrigger -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray('.section').forEach(section => {
gsap.fromTo(section,
{opacity: 0, y: 50},
{
opacity: 1,
y: 0,
scrollTrigger: {
trigger: section,
start: "top 80%", // inafanya animation ikifika 80% ya viewport
end: "bottom 60%",
toggleActions: "play none none reverse"
},
duration: 1
}
);
});
</script>
</body>
</html>
Maelezo ya Code:
.section ina opacity 0 na translateY 50px mwanzoni.
GSAP ScrollTrigger inachunguza wakati section inapoingia kwenye viewport na inaipeleka kwenye animation (fade-in na slide-up).
toggleActions: "play none none reverse" inachagua tabia wakati element inapoingia na kutoka viewport.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509
🚀 Unahitaji mfumo au website ya biashara?
Chagua huduma hapa chini kisha mteja bofya moja kwa moja kwenda kwenye ukurasa wa huduma au kuwasiliana nasi kwa WhatsApp.