Image Sliding Effect with JavaScript

• Download Example HTML5.zip - 9.7 KB

Introduction

This tip is meant to give others a shortcut on how to get quick image sliding effect on the webpage without much trouble and no JQuery.

Background

I came across this site while looking for a way to animate a group of images. And from all my options, I found it to be the simplest one. After researching html 5 a very simple option, although not the effect was also quite simple, was possible with the help of canvas and javascript.

1. Using menu cool

Download their folder and place the file in your project. Then add:

<link href="js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="js-image-slider.js" type="text/javascript"></script>

Inside your page, add/type the following div block:

<div id="sliderFrame">
<div id="slider">
    <a href="http://www.menucool.com/javascript-image-slider"
    target="_blank">
        <img src="images/image-slider-1.jpg"
        alt="Welcome to Menucool.com" />
    </a>
    <img src="yourImage"
    alt="This will show on yourImage caption" />
    <img src="yourOtherImage"
    alt="This will show on yourOtherImage caption" />
    <img src="yourOtherOTherImage" alt="#htmlcaption" />
</div>
<div id="htmlcaption" style="display: none;">
    <p>"This will show on yourOtherOTherImage caption"</p>
</div>
</div> 

2. Using HTML 5

On your html page have a canvas, if with assign an Id, even better

<canvas id="theCanvas">

At the place you have your javascript for the page

//the array with the path to the images
var pathToYourImages = ["pathToimage.imageExt", "pathToimage2.imageExt", "pathToimage3.imageExt", ....];

//a variable to hold the canvas element
var canvas = null;

//a variable to hold the canvas context
var contextForCanvas = null;
    
//a variable for the image element to be draw
var image = null;

//a variable to control which image to be displayed.
var currentImage = 0;

//when the wondow.onload happen, assing the value to the variables and then call ImageSliding.
window.onload = function() {
    canvas = document.getElementById('theCanvas');
    contextForCanvas = canvas.getContext('2d');
    image = document.createElement("img");

    ImageSliding();
};

//Performs the change on the image path and controls which will be showed
function ImageSliding() {

    //sets the image's path
    image.setAttribute('src', pathToYourImages[currentImage]);

    //control which image is being used
    currentImage = currentImage === (pathToYourImages.length - 1) ? 0 : ++currentImage;

    //sets the transparency value
    contextForCanvas.globalAlpha = 0.1;
            
    //calls the timeout function
    setTimeout(ShowImage, 200);
}

//clears the canvas and show the new image
function ShowImage() {

    contextForCanvas.save();

    contextForCanvas.clearRect(0, 0, canvas.width, canvas.height);
    contextForCanvas.drawImage(image, 0, 0, 300, 150);
    contextForCanvas.globalAlpha += 0.1;

    contextForCanvas.globalAlpha > 0.9 ? setTimeout(ImageSliding, 3500) : setTimeout(ShowImage, 200);
}

Conclusion

Basically, these are two ways to get the effect. It's advisable to always research in more than one place and evaluate what would be the best solution for your problem. I hope this helps.

Reference

• Menu cool website
• W3schools.com
• GoSlideshow HTML5 Canvas - CodeProject article