Deze sectie toont een aantal slides die met javascript en css een mooi effect geven voor een hero. Door de extra scaling ontstaat ook beweging en meer diepte. De kern is een stukje javascript dat de z-index van de slides aanpast, zodat steeds een nieuwe achtergrond naar voren komt. In de css is de transition geregeld.
.mySlides {
display:none;
z-index = 0;
position: absolute;
width: 100%;
height:100%;
top:0px;
left: 0px;
background-size:120%;
background-repeat:no-repeat;
background-position: 50% 50%;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 8s;
-webkit-transition-timing-function: ease-in-out;
animation-name: fade;
animation-duration: 8s;
transition-timing-function: ease-in-out;
}
@-webkit-keyframes fade {
from {background-size:100%}
to {background-size:120%}
from {opacity: 0.4}
to {opacity: 1}
}
@keyframes fade {
from {background-size:100%}
to {background-size:120%}
from {opacity: 0.4}
to {opacity: 1}var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.zIndex = 0;
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.zIndex = 100;
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 10000); // Change image every 10 seconds{"component":{"id":169,"name":"ct_section","options":{"ct_id":169,"ct_parent":0,"selector":"section-169-4","original":{"custom-js":"var slideIndex = 0;\nshowSlides();\n\nfunction showSlides() {\n var i;\n var slides = document.getElementsByClassName(\"mySlides\");\n for (i = 0; i < slides.length; i++) {\n slides[i].style.zIndex = 0;\n slides[i].style.display = \"none\";\n }\n slideIndex++;\n if (slideIndex > slides.length) {slideIndex = 1}\n slides[slideIndex-1].style.zIndex = 100;\n slides[slideIndex-1].style.display = \"block\";\n setTimeout(showSlides, 10000); // Change image every 10 seconds\n\n}","section-width":"full-width","display":"flex","grid-justify-items":"center","grid-align-items":"end","grid-match-height-of-tallest-child":"true","tag":"section","justify-content":"center","height-unit":"vh","flex-direction":"row","text-align":"center","align-items":"flex-end"},"classes":["slideshow-container"],"activeselector":"slideshow-container","nicename":"Hero met fading and growing slider"},"children":[{"id":197,"name":"ct_code_block","options":{"ct_id":197,"ct_parent":169,"selector":"code_block-197-4","original":{"code-css":".mySlides {\n display:none;\n z-index = 0;\n position: absolute;\n width: 100%;\n height:100%;\n top:0px;\n left: 0px; \n background-size:120%;\n background-repeat:no-repeat;\n background-position: 50% 50%;\n}\n\n/* Fading animation */\n.fade {\n -webkit-animation-name: fade;\n -webkit-animation-duration: 8s;\n -webkit-transition-timing-function: ease-in-out;\n animation-name: fade;\n animation-duration: 8s;\n transition-timing-function: ease-in-out;\n}\n\n@-webkit-keyframes fade {\n from {background-size:100%}\n to {background-size:120%}\n from {opacity: 0.4}\n to {opacity: 1}\n}\n\n@keyframes fade {\n from {background-size:100%}\n to {background-size:120%}\n from {opacity: 0.4}\n to {opacity: 1}","code-php":"<!--?php\n?-->"},"activeselector":false,"nicename":"CSS slider","ct_content":""},"depth":2},{"id":173,"name":"ct_div_block","options":{"ct_id":173,"ct_parent":169,"selector":"div_block-173-4","original":{"width-unit":"%","background-image":"http://bnb.oxy.host/wp-content/uploads/sites/37/2018/03/pexels-photo-275484.jpeg","overlay-color":"rgba(0,0,0,0.25)"},"classes":["mySlides","fade","grow"],"activeselector":false,"nicename":"Slider","ct_content":""},"depth":2},{"id":171,"name":"ct_div_block","options":{"ct_id":171,"ct_parent":169,"selector":"div_block-171-4","original":{"width-unit":"%","background-image":"http://bnb.oxy.host/wp-content/uploads/sites/37/2018/03/pexels-photo-210604.jpeg","overlay-color":"rgba(0,0,0,0.25)"},"classes":["mySlides","fade","grow"],"activeselector":false,"nicename":"Slider","ct_content":""},"depth":2},{"id":182,"name":"ct_div_block","options":{"ct_id":182,"ct_parent":169,"selector":"div_block-182-4","original":{"width-unit":"%","background-image":"http://bnb.oxy.host/wp-content/uploads/sites/37/2018/03/pexels-photo-275484.jpeg","overlay-color":"rgba(0,0,0,0.25)"},"classes":["mySlides","fade","grow"],"activeselector":false,"nicename":"Slider","ct_content":""},"depth":2},{"id":190,"name":"ct_div_block","options":{"ct_id":190,"ct_parent":169,"selector":"div_block-190-4","original":{"z-index":"100","display":"flex","grid-column-count":"1","grid-row-count":"1","grid-match-height-of-tallest-child":"true","flex-direction":"column","align-items":"center","text-align":"center","margin-top":"50","margin-bottom":"50"},"activeselector":false,"nicename":"Site title and tagline"},"children":[{"id":191,"name":"ct_text_block","options":{"ct_id":191,"ct_parent":190,"selector":"text_block-191-4","original":{"color":"#ffffff","font-size":"60","font-weight":"600","text-shadow-color":"rgba(1,1,1,0.25)","text-shadow-horizontal-offset":"1","text-shadow-vertical-offset":"1","text-shadow-blur":"5"},"activeselector":false,"nicename":"Site title","media":{"phone-landscape":{"original":{"font-size":"45"}}},"ct_content":"<span id=\"ct-placeholder-192\"></span>"},"children":[{"id":192,"name":"ct_span","options":{"ct_id":192,"ct_parent":191,"selector":"span-192-4","ct_content":"[oxygen data='bloginfo' show='name' ]","nicename":"Span (#192)"},"depth":4}],"depth":3},{"id":194,"name":"ct_text_block","options":{"ct_id":194,"ct_parent":190,"selector":"text_block-194-4","original":{"color":"#ffffff","text-shadow-horizontal-offset":"1","text-shadow-vertical-offset":"1","text-shadow-blur":"5","text-shadow-color":"rgba(1,1,1,0.25)","font-size":"30"},"activeselector":false,"nicename":"Site tagline","media":{"phone-landscape":{"original":{"font-size":"20"}}},"ct_content":"<span id=\"ct-placeholder-195\"></span>"},"children":[{"id":195,"name":"ct_span","options":{"ct_id":195,"ct_parent":194,"selector":"span-195-4","ct_content":"[oxygen data='bloginfo' show='description' ]","nicename":"Span (#195)"},"depth":4}],"depth":3}],"depth":2}],"depth":1},"classes":{"slideshow-container":{"key":"slideshow-container","media":{"phone-landscape":{},"phone-portrait":{"original":{"height-unit":"vh","height":"30"}},"tablet":{"original":{"height-unit":"vh","height":"50"}}},"original":{"width-unit":"%","height-unit":"%","container-padding-top-unit":"px","container-padding-bottom-unit":"px","position":"relative","display":"flex","container-padding-top":"20","container-padding-bottom":"30","background-color":"#ffffff"}},"mySlides":{"key":"mySlides","media":{"phone-portrait":{"original":{"background-repeat":"no-repeat"}}},"original":{"transform":{"0":{"transform-type":"rotate"}},"background-position-left-unit":"%","background-position-top-unit":"%","background-size-width-unit":"%","width-unit":"%","height-unit":"%","top":"0","left":"0","background-size-width":"120"}},"fade":{"key":"fade","original":{"custom-css":"-webkit-animation-name: fade; -webkit-animation-duration: 8s; -webkit-transition-timing-function: ease-in-out; animation-name: fade; animation-duration: 8s; transition-timing-function: ease-in-out;"}},"grow":{"key":"grow","original":{}}}}