Animatie banner met jQuery
Wat moet erin zitten?
- 3 gewone animatie's: wolkjes, ballonnen, ...
- 3 interactieve animatie's: als je klikt op de ballon dan komt er een andere afbeelding te voorschijnt bv.
Bekijk hier een voorbeeld als pdf-bestand en hier de uitgewerkte animatie
Hoe begin je eraan?
Stap 1: Download hier het CSS animatie bestand.
Stap 2:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
Stap 3: Start met het positioneren van je objecten. De .container krijgt de eigenschap position:relative en geneste objecten krijgen de eigenschap position:absolute;
.container {
postion:relative;
width:1200px;
height: 550px;
margin:0 auto;
border:1px solid black;
background-color:#fafafa;
}
.object1 {
position:absolute;
top:100px;
left:100px;
}
Stap 4: Voeg 1 of meerdere animaties toe aan je klassen van objecten die al op voorhand moeten inkomen (zonder interactie!).
.object1 {
animation-name:fadeIn, slideInDown;
animation-duration: 1s, 3s;
animation-delay: 0s, 2s;
}
Wil je zelf een animatie van 0 opbouwen, doe dit dan met @keyframes (w3school)
.object1 {
animation: mymove 4s;
-webkit-animation: mymove 4s;
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* vb auto die rijdt */
.contain-car-2 {
animation: drive 4s steps(4, end) forwards;
-webkit-animation: drive 4s steps(4, end) forwards;
}
@keyframes drive {
to {
transform: translateX(640px);
}
}
/* wijzer van een klok */
.klok {
animation: tick-tock 60s steps(60, end) infinite;
-webkit-animation: tick-tock 60s steps(60 ,end) infinite;
}
@keyframes tick-tock {
to {
transform: rotate(360deg);
}
}
Stap 5: Start met het schrijven van de events en actions, zodat je bij het klikken op een object een animatie oproept.
<script>
$(function() {
var animationName = 'animated shake';
var animationend = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('a.button').on('click',function() {
$('h2').addClass(animationName).one(animationend,function() {
$(this).removeClass(animationName);
});
});
});
</script>
Je kan zelf ook een animatie maken met jQuery, zonder de bestaande van animate.css
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height: "300px"});
});
</script>