How To Create Image Slideshow With Resize Effect

You can create simple image slideshow with resize effect using scale function in transform property and specifying custom width and height with CSS and JavaScript codes. Here I have created image slideshow with resize effect along with providing source code of CSS and JavaScript. In the preview section, each image will resized from half of its size to its original size using resize() function on CSS transform property which was already discussed on the previous posts about transforming elements using CSS.

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 on 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 style=”width:100%; height:100%;”>
</div>

Preview:

@-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;
text-align:center;
}

var i=0;
var path=new Array();

//List of Images
path[0]=”https://3.bp.blogspot.com/–UBsuaVDrLM/VGMQO4DJD9I/AAAAAAAAAlk/uvOoQv40MhM/s1600/image2.jpg”;
path[1]=”https://1.bp.blogspot.com/-GnK0rkyg8Kc/VGMQO0EuBUI/AAAAAAAAAls/KaY9M8UjQ9k/s1600/image1.jpg”;
path[2]=”http://4.bp.blogspot.com/-dNgc-Kv8Wmw/UdhW7hddvII/AAAAAAAAAL8/rLduN41JUR4/s1600/image_1.gif”;

function slide1()
{
document.slide.src=path[i];
if(i