This tutorial 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 slice 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 jQuery cond, jQuery plugin by Ben Alman for chainable “if-then-else” statements.

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

The images in the second demo are by Majownik and they are licensed under a Creative Commons Attribution License.