Table of Contents
Using Scale Function in Transform Property
You can give resize effect on image slideshow using scale function in transform property as given in the example below.CSS Code:
@-webkit-keyframes resize{
from {-moz-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);}
50% {-moz-transform:scale(1,1);
-ms-transform:scale(1,1);
transform:scale(1,1);}
to {-moz-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);}
}
@keyframes resize{
from {-moz-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);}
50% {-moz-transform:scale(1,1);
-ms-transform:scale(1,1);
transform:scale(1,1);}
to {-moz-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);}
}
.resize{
-webkit-animation-name:resize;
-webkit-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:5s;
animation-name:resize;
timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:5s;
width:100%;
height:300px;
}
JavaScript Code:
<script>
var i=0;
var path=new Array();
//List of Images
path[0]="image2.jpg";
path[1]="image3.jpg";
path[2]="image4.jpg";
function slide1()
{
document.slide.src=path[i];
if(i<path.length-1) i++;else i=0;
setTimeout("slide1()",5000);
}
setTimeout("slide1()",0);
</script>
HTML Code:
<div class="resize">
<img name="slide" style="width:100%; height:100%;">
</div>
Preview:
Comments are closed.