I am having an issue with my ken burns effect slideshow on the mobile site. I am trying to add an overlay that automatically switches between green, red, yellow, and blue colors but it's not showing up. I can't seem to figure out what the problem is. Any assistance would be greatly appreciated.
HTML:
<div id="slideshow">
<img src="images/Campus2.jpg" alt="school pic">
<img src="images/bio_lab_optimised.jpg" alt="bio lab pic">
<img src="images/Capture.jpg" alt="school pic">
<img src="images/class_optimised.jpg" alt="class pic">
<img src="images/LFPS_optimised.jpg" alt="school pic">
<img src="images/phy_lab_optimmised.jpg" alt="physics lab">
<img src="images/cs_lab.jpg" alt="class pic">
<img src="images/x-optimised.jpg" alt="school pic">
<img src="images/page-1-hero-image.jpg" alt="school's image">
<img src="images/kindergarten2.jpg" alt="kindergarten">
</div>
CSS: (for overlay)
.overlay {
position: relative;
top:0;
left:0;
width:100%;
height:100%;
display: block;
z-index:3;
animation: color-animation 80s linear alternate;
}
@keyframes color-animation {
0% {
background-color: rgba(255,0,0,0.5);
}
25% {
background-color: rgba(0,255,0,0.5);
}
50% {
background-color: rgba(0,0,255,0.5);
}
100% {
background-color: rgba(255,255,0,0.5);
}
}
CSS: (ken burns effect)
#slideshow{
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
#slideshow img {
position: absolute;
left: 0;
top: 0;
z-index: 1;
/* to make pic responsive */
min-height: 100%;
min-width: 1024px;
width: 100vw;
height: 100vh;
opacity:0;
-webkit-transition-property: opacity, -webkit-transform;
-webkit-transition-duration: 3s, 45s;
-moz-transition-property: opacity, -moz-transform;
-moz-transition-duration: 3s, 45s;
-ms-transition-property: opacity, -ms-transform;
-ms-transition-duration: 3s, 45s;
-o-transition-property: opacity, -o-transform;
-o-transition-duration: 3s, 4s;
transition-property: opacity, transform;
transition-duration:3s, 45s;
}
#slideshow img {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
}
#slideshow img:nth-child(2n+1) {
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
}
#slideshow img:nth-child(3n+1) {
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
}
#slideshow img:nth-child(4n+1) {
-webkit-transform-origin: bottom right;
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-o-transform-origin: bottom right;
transform-origin: bottom right;
}
/**
* Because of the stacking context, we need to make sure that the first image (in source) is not hidden by the last one.
* The rule below moves all images past the second one down the stack.
* This is because the second image needs to show on top of the first one when it transitions in.
*/
#slideshow .fx:first-child + img ~ img {
z-index:-1;
}
/**
* Because images are styled with a different point of origin, the following rule will create different panning effects.
*/
#slideshow .fx {
opacity:1;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
Javascript:
function slideEffect(){
//apply fx class to first element
document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
//loop kenburns effect every 15 seconds
window.setInterval(kenBurns, 15000);
//gets all images under slideshow
var images = document.getElementById('slideshow').getElementsByTagName('img'),
numberOfImages = images.length,
i= 1;
function kenBurns() {
//applies class fx appropriately
if(i==numberOfImages){ i = 0;}
images[i].className = "fx";
if(i===0){ images[numberOfImages-2].className = "";}
if(i===1){ images[numberOfImages-1].className = "";}
if(i>1){ images[i-2].className = "";}
i++;
}
};
if (window.innerWidth < 480)
{
$('#slideshow').addClass('.overlay');
}
slideEffect();