CS 50.12 HTML 5 :: Interactive Web Pages

CSS3 / JQuery Slideshows

CCCConfer Video of class lecture

Today I will be demonstrating several image slideshow which are controlled by CSS and Javascript:

Crossfade - hover - 2 images (CSS only)
step 1 display images
step 2 add CSS

Crossfade - click - 2 images (CSS / Javascript)
demonstration page

Crossfade - click - 4 images (CSS / Javascript)
demonstration page

Zoom in and out - 2 images (CSS / Javascript)
demonstration page

Rotate in and out - 2 images (CSS / Javascript)
demonstration page

Sliding by adding padding - 4 images (CSS / Javascript)
demonstration page

EXTRA -
http://css3.bradshawenterprises.com/demos/next_prev_slider.php

http://css3.bradshawenterprises.com/demos/imageslider.php

3D show to students - but don't do code. (only works in Safari or Chrome)

http://css3.bradshawenterprises.com/flip/

http://css3.bradshawenterprises.com/demos/cubecarousel.php

http://css3.bradshawenterprises.com/demos/cuboids.php

http://css3.bradshawenterprises.com/demos/3d.php (get your 3D glasses folks)