HTML5 Canvas Slideshow

Andrey Prikaznov

Jan. 25, 12 · Interview

Likes (0)

Comment

Save

16.7K Views

In this tutorial we are making a HTML5 Slideshow (canvas) with its own animated transitioning effect. The main idea is: drawing images with higher contrast in the ends of transitions.

Here are our demo and downloadable packages:

download in package

Ok, download the source files and let's start coding !

Step 1. HTML

This is the markup of our resulting slideshow page.

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Canvas Slideshow | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/pixastic.custom.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 Canvas Slideshow</h2>
            <a href="http://www.script-tutorials.com/html5-canvas-slideshow/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div class="slides">
                <img src="images/pic1.jpg" />
                <img src="images/pic2.jpg" />
                <img src="images/pic3.jpg" />
                <img src="images/pic4.jpg" />
                <img src="images/pic5.jpg" />
                <img src="images/pic6.jpg" />
                <img src="images/pic7.jpg" />
            </div>
            <canvas id="slideshow" width="900" height="300"></canvas>
        </div>
    </body>
</html>

Step 2. CSS

Here are all the stylesheets:

css/main.css

/* page layout styles */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#eee;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    color: #000;
    margin: 20px auto;
    position: relative;
    width: 900px;
}
#slideshow {
    border:1px #000 solid;
    box-shadow:4px 6px 6px #444444;
    display:block;
    margin:0 auto;
    height:300px;
    width:900px;
}
.container .slides {
    display:none;
}

Step 3. JS

js/pixastic.custom.js

Pixastic – JavaScript Image Processing Library. I have used it to change the brightness and contrast of our canvas. You can download this library here. Or, you can find this library in our package too.

js/script.js

var canvas, ctx;
var aImages = [];
var iCurSlide = 0;
var iCnt = 0;
var iSmTimer = 0;
var iContr = 0;
var iEfIter = 50;

$(function(){
    // creating canvas objects
    canvas = document.getElementById('slideshow');
    ctx = canvas.getContext('2d');

    // collect all images
    $('.slides').children().each(function(i){
        var oImg = new Image();
        oImg.src = this.src;
        aImages.push(oImg);
    });

    // draw first image
    ctx.drawImage(aImages[iCurSlide], 0, 0);

    var iTimer = setInterval(changeSlideTimer, 5000); // set inner timer
});

function changeSlideTimer() {
    iCurSlide++;
    if (iCurSlide == $(aImages).length) {
        iCurSlide = 0;
    }

    clearInterval(iSmTimer);
    iSmTimer = setInterval(drawSwEffect, 40); // extra one timer
}

// draw switching effect
function drawSwEffect() {
    iCnt++;

    if (iCnt <= iEfIter / 2) {
        iContr += 0.004;

        // change brightness and contrast
        Pixastic.process(canvas, 'brightness',
            {
                'brightness': 2,
                'contrast': 0.0 + iContr,
                'leaveDOM': true
            },
            function(img) {
                ctx.drawImage(img, 0, 0);
            }
        );
    }

    if (iCnt > iEfIter / 2) {
        // change brightness
        Pixastic.process(canvas, 'brightness',
            {
                'brightness': -2,
                'contrast': 0,
                'leaveDOM': true
            },
            function(img) {
                ctx.drawImage(img, 0, 0);
            }
        );
    }

    if (iCnt == iEfIter / 2) { // switch actual image
        iContr = 0;
        ctx.drawImage(aImages[iCurSlide], 0, 0);

        Pixastic.process(canvas, 'brightness',
            {
                'brightness': iEfIter,
                'contrast': 0,
                'leaveDOM': true
            },
            function(img) {
                ctx.drawImage(img, 0, 0);
            }
        );
    } else if (iCnt == iEfIter) { // end of cycle, clear extra sub timer
        clearInterval(iSmTimer);
        iCnt = 0;
        iContr = 0;
    }
}

As you can see – the main functionality is easy. I have defined the main timer (which will change images), and one inner timer, which will change the brightness and contrast of our canvas.

Live Demo

download in package

Conclusion

I hope that today’s html5 slideshow lesson was interesting for you as always. We have made another nice html5 example. I will be glad to see your thanks and comments. Good luck!

Source: http://www.script-tutorials.com/html5-canvas-slideshow/

HTML

Opinions expressed by DZone contributors are their own.

Related

Trending

HTML5 Canvas Slideshow

Live Demo

download in package

Step 1. HTML

index.html

Step 2. CSS

css/main.css

Step 3. JS

js/pixastic.custom.js

js/script.js

Live Demo

download in package

Conclusion

Related

Partner Resources