Home » HTML5, Webmasters

HTML5 Slideshow using Canvas and jquery

22 May 2011 2 Comments
Share on Facebook

using HTML5 Slideshow is one of the easy way to present the content or increase the look and feel of the web content. We have seen many websites using flash slide shows, follow the link for dynamic flash slideshow, Slideshows are easier way to show website updates or news dynamically.

Let see some of the exciting slideshow animations using HTML5 and Canvas.

 

Also see this articles about HTML5:

 

Tutorialzine:

tutorialzine-html5_slideshow

using the canvas component in HTML5 to create fadein animated slideshow with smooty lighting effect.

http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/

Ravelrumba:

ravelrumba-html5_slideshow

Slideshow similar to powerpoint presentation created using HTML and CSS works well in MAC.

Some of the best features

  • Each slide exists as a section element inside an HTML document.
  • Javascript wrangles up the section elements and turns them into ordered slides.
  • jQuery is used for a few things, including firing events when new slides are loaded.

http://www.ravelrumba.com/blog/html5-slideshow/

Go2script:

go2script-html5_slideshow

This has variety of effects within single slideshow. Some of the effects include tile, fade, mask , wipe, mosaic.

http://www.go2script.com/items/style/20

Brokenseal:

brokenseal-html5_slideshow

With the power of jQuery Canvas Cycle Plugin, we can create slideshow which has some basic features but missing

  • pager
  • stop event
  • pause event

http://www.brokenseal.it/it/blog/2009/10/19/jquery-canvas-cycle-plugin/

JFriend:

Jfriend-html5_slideshow

This slideshow is 100% HTML, CSS, Javascript and CSS3 and HTML5 (when present). There is no Adobe flash at all in this slideshow so it loads faster. Stretchy option so it can grow/shrink with the size of the page.

http://www.pixel99.com/smugcustom/slideshow/

flickrslideshowembed:

flickrslideshowembed-html5_slideshow

A FREE tool called Flickr Slideshow allows you to create a custom photo gallery with a cool slide show.Enter the address of flickr page to add all photos from this page in your slideshow, select the style of thumbnails and the overlay window and add the HTML embed code on your website or blog.

http://flickrslideshowembed.com/flickr-slideshow-embed-html5.html

Please suggest if you know any better HTML5 slideshow. :)

 

Keywords to here:

  • HTML5 slideshow
  • HTML5 jquery slideshow
  • HTML5 canvas jquery slide show
  • HTML CSS CSS3 slideshow

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


  • Paying guest

    Very nice slides…. Thanks for sharing it

  • http://www.designscripting.com/2011/08/html5-animation-and-effect-flash-v-html5/ HTML5 animation and effect | Flash v HTML5 | Designscripting

    [...] using HTML5 Slideshow is one of the easy way to present the content or increase the look and feel of the web content. http://www.designscripting.com/2011/05/html5-slideshow-using-canvas-and-jquery/ [...]