An HTML5 Slideshow w/ Canvas & jQuery

Description:   You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts.

Author: Tutorialzine
下載:  Download  (密碼:  見壓縮檔註解)

By dowloading you accept our Terms & Disclaimer.


All uses of canvas you’ve come so far are probably limited to games and other proof of concept demos. Today, however, we are doing something practical – we are making a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

The Idea

With JavaScript, we are going to apply a special filter to every image in the slideshow. We will create a new version of the images, with higher contrast and more vivid colors, and store it in a canvas elements.

How the Slideshow Works
How the Slideshow Works

When the user chooses to proceed to another slide, the canvas is shown with a fadeIn animation, creating a smooth lighting effect.

An HTML5 Slideshow With Canvas & jQuery
An HTML5 Slideshow With Canvas & jQuery

    If you believe that your work has been copied in a way that constitutes copyright infringement, or that your intellectual property rights have been otherwise violated, please e-mail us

0 留言:



建議: 為方便留言回覆,請不要用匿名方式 留言。