Jinsi ya Kutumia JS Animation Libraries | GSAP, Anime.js
Jifunze jinsi ya kufanya website yako kuwa interactive na za kisasa kwa kutumia JavaScript animation libraries kama GSAP na Anime.js. Libraries hizi hutoa njia rahisi na yenye nguvu ya kuunda animations za smooth, scalable, na responsive bila kutumia CSS pekee.
Mfano wa Code:
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Animation Libraries Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
margin: 50px;
}
</style>
</head>
<body>
<h2>GSAP & Anime.js Animation</h2>
<div class="box" id="box"></div>
<!-- GSAP Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<!-- Anime.js Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
// GSAP Example
gsap.to("#box", {duration: 2, x: 300, rotation: 360, scale: 1.5, repeat: -1, yoyo: true});
// Anime.js Example
anime({
targets: '#box',
translateY: 200,
rotate: '1turn',
duration: 3000,
direction: 'alternate',
loop: true
});
</script>
</body>
</html>
Maelezo ya Code:
GSAP: gsap.to() inabadilisha properties za element kwa muda fulani. Hapa, box inasogea, inazunguka, na inakua na kupungua (scale) mara kwa mara (repeat: -1 na yoyo: true).
Anime.js: anime({}) inafanya animation tofauti ya translate na rotate, yenye loop isiyoisha.
Libraries hizi zinarahisisha animations ambazo kwa CSS pekee zingekuwa ngumu.
🔗 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.