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>