/*
2019-03-19 
author: Bethuel Heldt
*/
/*
BACKGROUND ANIMATION MET 5 AFBEELDINGEN: Hieronder staan 3 animaties:
1. achtergrond_slide_verticaal: plaatjes sliden verticaal van boven naar beneden
2. achtergrond_slide_horizontaal: plaatjes sliden horizontaal van links naar rechts
3. bg_fade: plaatjes faden

Beschrijving
1. Voor de achtergrond animatie plaats je in de body{} of een andere tag (bijvoorbeeld een <div class="container"></div>) al je background images na elkaar gescheiden door een komma dit gebeurt op regel 22 in deze stylesheet. De img's worden dan in de browsercache geladen. Op regel 24 (animation-duration) pas je de tijd aan dat de animatie duurt. De tijd staat nu op 20 sec. wat erg kort is. Mooier is het om de tijd langer te maken, bijvoorbeeld 60 seconden.
   Komma gescheiden background-images werkt niet in alle browsers dus er moet ook een background-image staan met slechts 1 plaatje. Bij ouder browssers werkt dit script niet.
   De achtergrond animatie is best zwaar voor zowel data gebruik als processor. Dus probeer je plaatjes zo ligt mogelijk te houden.
2. In de keyframes (zie hieronder) zet je vervolgens dezelfde images (voor fade) of background-image position (voor slide)
3. Deze animatie is gemaakt voor 5 plaatjes. Wil je meer of minder plaatjes dan moet je ook de keyframes aanpassen. Nu is de duur van de animatie gedeeld door 5. Bij bijvoorbeeld 3 afbeeldingen deel je de animatie in 3
*/
body{
	background-image: url(../images/ij01.jpg); /*deze is voor oude browsers die meerdere achtergrondplaatjes niet kunnen tonen*/
	
	/*Zet hier alle plaatjes neer die je wil sliden of faden. Let op: plaatjes van dezelde afmeting is handig*/
	background-image: url(../images/ij01.jpg), url(../images/ij02.jpg), url(../images/ij03.jpg), url(../images/ij04.jpg), url(../images/ij05.jpg);

	animation-duration: 20s;/*het aantal seconden dat de animatie duurt*/
	animation-iteration-count: infinite;/*de animatie staat op oneindig. Je kunt hier ook een getal invullen*/
	animation-direction: alternate;/*animatie gaat heen en weer van 0 naar 100 naar 0*/
	animation-timing-function: ease-in-out;/*ease-in = start langzaam en versnel dan, ease-out = vertraag aan het einde, ease-in-out = start traag, vernsel en vertraag dan weer*/
	animation-fill-mode: both; 
	animation-delay: 0s;/*je kunt de animatie later laten starten*/
}

body.bg_slide_verticaal{
	animation-name: achtergrond_slide_verticaal;/*naam van de animatie, deze kies je zelf, hieronder staat de animatie in keyframes*/
}

body.bg_slide_horizontaal{
	animation-name: achtergrond_slide_horizontaal;/*naam van de animatie, deze kies je zelf, hieronder staat de animatie in keyframes*/
}
body.bg_fade{
	animation-name: achtergrond_fade;/*naam van de animatie, deze kies je zelf, hieronder staat de animatie in keyframes*/
}

/*********************************************************************************************HORIZONTALE ANIMATIE BG voor veschillende browsers*/
	   0%, 11% 	{background-position: center center, -100vw center, 100vw center, 100vw center, 100vw center;}
	12.5%, 36% 	{background-position: 100vw center, center center, -100vw center, 100vw center, 100vw center;}
	37.5%, 61% 	{background-position: 100vw center, 100vw center, center center, -100vw center, 100vw center;} 
	62.5%, 86%	{background-position: 100vw center, 100vw center, 100vw center, center center, -100vw center;} 
	87.5%, 100%	{background-position: 100vw center, 100vw center, 100vw center, 100vw center, center center;} 
}
@-moz-keyframes achtergrond_slide_horizontaal {
	   0%, 11% 	{background-position: center center, -100vw center, 100vw center, 100vw center, 100vw center;}
	12.5%, 36% 	{background-position: 100vw center, center center, -100vw center, 100vw center, 100vw center;}
	37.5%, 61% 	{background-position: 100vw center, 100vw center, center center, -100vw center, 100vw center;} 
	62.5%, 86%	{background-position: 100vw center, 100vw center, 100vw center, center center, -100vw center;} 
	87.5%, 100%	{background-position: 100vw center, 100vw center, 100vw center, 100vw center, center center;} 
}
@-o-keyframes achtergrond_slide_horizontaal {
	   0%, 11% 	{background-position: center center, -100vw center, 100vw center, 100vw center, 100vw center;}
	12.5%, 36% 	{background-position: 100vw center, center center, -100vw center, 100vw center, 100vw center;}
	37.5%, 61% 	{background-position: 100vw center, 100vw center, center center, -100vw center, 100vw center;} 
	62.5%, 86%	{background-position: 100vw center, 100vw center, 100vw center, center center, -100vw center;} 
	87.5%, 100%	{background-position: 100vw center, 100vw center, 100vw center, 100vw center, center center;}   
}
@keyframes achtergrond_slide_horizontaal {
	   0%, 11% 	{background-position: center center, -100vw center, 100vw center, 100vw center, 100vw center;}
	12.5%, 36% 	{background-position: 100vw center, center center, -100vw center, 100vw center, 100vw center;}
	37.5%, 61% 	{background-position: 100vw center, 100vw center, center center, -100vw center, 100vw center;} 
	62.5%, 86%	{background-position: 100vw center, 100vw center, 100vw center, center center, -100vw center;} 
	87.5%, 100%	{background-position: 100vw center, 100vw center, 100vw center, 100vw center, center center;} 
}
/************************************************************************************************************/
/*********************************************************************************************VERTICALE ANIMATIE BG voor veschillende browsers*/
@-webkit-keyframes achtergrond_slide_verticaal {
	   0%, 11% 	{background-position: center center, center -100vh, center 100vh, center 100vh, center 100vh;}
	12.5%, 36% 	{background-position: center 100vh, center center, center -100vh, center 100vh, center 100vh;}
	37.5%, 61% 	{background-position: center 100vh, center 100vh, center center, center -100vh, center 100vh;} 
	62.5%, 86%	{background-position: center 100vh, center 100vh, center 100vh, center center, center -100vh;} 
	87.5%, 100%	{background-position: center 100vh, center 100vh, center 100vh, center 100vh, center center;} 
}
@-moz-keyframes achtergrond_slide_verticaal {
	   0%, 11% 	{background-position: center center, center -100vh, center 100vh, center 100vh, center 100vh;}
	12.5%, 36% 	{background-position: center 100vh, center center, center -100vh, center 100vh, center 100vh;}
	37.5%, 61% 	{background-position: center 100vh, center 100vh, center center, center -100vh, center 100vh;} 
	62.5%, 86%	{background-position: center 100vh, center 100vh, center 100vh, center center, center -100vh;} 
	87.5%, 100%	{background-position: center 100vh, center 100vh, center 100vh, center 100vh, center center;} 
}
@-o-keyframes achtergrond_slide_verticaal {
	   0%, 11% 	{background-position: center center, center -100vh, center 100vh, center 100vh, center 100vh;}
	12.5%, 36% 	{background-position: center 100vh, center center, center -100vh, center 100vh, center 100vh;}
	37.5%, 61% 	{background-position: center 100vh, center 100vh, center center, center -100vh, center 100vh;} 
	62.5%, 86%	{background-position: center 100vh, center 100vh, center 100vh, center center, center -100vh;} 
	87.5%, 100%	{background-position: center 100vh, center 100vh, center 100vh, center 100vh, center center;}  
}
@keyframes achtergrond_slide_verticaal {
	   0%, 11% 	{background-position: center center, center -100vh, center 100vh, center 100vh, center 100vh;}
	12.5%, 36% 	{background-position: center 100vh, center center, center -100vh, center 100vh, center 100vh;}
	37.5%, 61% 	{background-position: center 100vh, center 100vh, center center, center -100vh, center 100vh;} 
	62.5%, 86%	{background-position: center 100vh, center 100vh, center 100vh, center center, center -100vh;} 
	87.5%, 100%	{background-position: center 100vh, center 100vh, center 100vh, center 100vh, center center;} 
}
/************************************************************************************************************/
/********************************************************************************************* FADE ANIMATIE voor veschillende browsers*/

@-webkit-keyframes achtergrond_fade {
   0%, 11%  	{background-image: url(../images/ij01.jpg);}
   12.5%, 36%   {background-image: url(../images/ij02.jpg);}
   37.5%, 61%   {background-image: url(../images/ij03.jpg);}
   62.5%, 86%   {background-image: url(../images/ij04.jpg);}
   87.5%, 100%	{background-image: url(../images/ij05.jpg);}
}
@-moz-keyframes achtergrond_fade {
   0%, 11%  	{background-image: url(../images/ij01.jpg);}
   12.5%, 36%   {background-image: url(../images/ij02.jpg);}
   37.5%, 61%   {background-image: url(../images/ij03.jpg);}
   62.5%, 86%   {background-image: url(../images/ij04.jpg);}
   87.5%, 100%	{background-image: url(../images/ij05.jpg);}
}
@-o-keyframes achtergrond_fade {
   0%, 11%  	{background-image: url(../images/ij01.jpg);}
   12.5%, 36%   {background-image: url(../images/ij02.jpg);}
   37.5%, 61%   {background-image: url(../images/ij03.jpg);}
   62.5%, 86%   {background-image: url(../images/ij04.jpg);}
   87.5%, 100%	{background-image: url(../images/ij05.jpg);}
}
@keyframes achtergrond_fade {
   0%, 11%  	{background-image: url(../images/ij01.jpg);}
   12.5%, 36%   {background-image: url(../images/ij02.jpg);}
   37.5%, 61%   {background-image: url(../images/ij03.jpg);}
   62.5%, 86%   {background-image: url(../images/ij04.jpg);}
   87.5%, 100%	{background-image: url(../images/ij05.jpg);}
}
/************************************************************************************************************/