Tutorial Fullscreen Slit Slider with jQuery and CSS3

DEMO     -     DOWNLOAD     -     SOURCE

A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions.

In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll cut the current slide open in order to reveal the next or previous slide. Using different data-attributes, we’ll define the type, rotation angle and scale of a slide’s parts, giving us the possibility to create unique effects of each slide transition.
We’ll be using the following jQuery plugins:

• jQuery cond by Ben Alman, for chainable “if-then-else” statements
• jQuery Transit by Rico Sta. Cruz, for easy and smooth CSS3 transformations and transitions

The animal icon font that we’ll be using is by Alan Carr and you can find it here.