In this tutorial we have four demos on how to create a full screen slideshow with background images. The whole length of the animation takes 36 seconds, but each following slideshow image and title appear after 6 second of the previous one. The span that will contain a slideshow image will be positioned absolutely and have a width and height of 100%.
The main feature in this tutorial is the checkbox or radio hack technique to access each slide with
:checked selector. And with that way you will access each slide which is right after the input element. This slideshow works in all major browsers (This is a cross-browser CSS3 Slideshow). Still works on IE9 with a very nice fallback (each slide switch without transition effect). Best viewed on Opera 11.62
If you’re looking for a neat way to share a presentation online, this framework using CSS3 might be for you. It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers. Most desktop browsers are supported, but there isn’t a port for mobile browsers just yet.
In this tutorial, the slideshow is created with a parallax effect and the help of some CSS3 properties. Radio buttons and sibling combinators are used for controlling which slide is shown. There will be two backgrounds and the idea is to change the background positions and the position of the slider with transitions in order to create a slight parallax effect.
This tutorial shows how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. You’ll use radio buttons with labels and target the respective panels with the general sibling selector.
Impress.js is a small, standalone library that makes it easy to design advanced CSS3 presentations with eye-catching effects. But what if you use impress.js for something other than a presentation? This is what the tutorial is showing, you will be spicing up a plain old product page with some CSS3 magic.
This a simple parallax content slider using CSS animations, you’ll control the animation of each single element in the slider and create a parallax effect by animating the background of the slider itself.
The idea for this comes from the slider of the Kendo UI homepage, a framework for modern HTML UI. After some requests and questions about how to do something like that,Tympanus.net decided to recreate the effect.