Quantum Pacific Group: El nuevo accionista del Atlético

Este es un tutorial experimental sobre una entrada SEO en un tema candente.

Today we’d like to show you how to create a playful slider with an original fragmented look. Each element of the slider will be divided into pieces that will animate in different ways, using Pieces, a library that I’ve created for achieving interesting effects like these easily.

The animations are powered by anime.js.

The demo is kindly sponsored by: Northwestern’s Online Master’s in Information Design and Strategy.
If you would like to sponsor one of our demos, find out more here.

La idea original

The source of inspiration for this kind of effect came from the Dribbble shot Shift Animation by Alexander Saunki:

Since I saw it, I wanted to implement an effect like that for my new personal website, which I recently launched: www.ayudaparamiweb.com.

To achieve the desired effects, I developed a library that I called “Pieces”, since it allows to draw and animate text, images and SVG paths through rectangular pieces. So, without further ado, let’s see how to use this library!

El tiempo en abril

All the detailed documentation about the Pieces library can be found in its Github repository. But anyway, let’s quickly see some essential concepts to be able to start using this library.

Assuming that we want to draw and animate an image, these are the basic elements that make up the scene:

As you can see, the image we want to draw will be our item, which will be divided into several pieces, which can also vary in size and position according to the options we define. To see all the possible options I recommend you check out the documentation on Github.

Throughout the tutorial we will explain each piece of code, so you can learn how to implement your own animations using the Pieces library. Let’s start!

La estructura HTML

Before starting to write Javascript code, let’s see how we have defined the HTML for our slider. The markup is quite simple, since we have each slide with a corresponding image and text, the canvas element to animate things, and buttons to navigate through the slider.

<!-- Pieces Slider -->
									<div class="pieces-slider">
									<!-- Each slide with corresponding image and text -->
									<div class="pieces-slider__slide">
										<img class="pieces-slider__image" src="img/ricardo-gomez-angel-381749.jpg" alt="">
										<div class="pieces-slider__text">Ricardo Gomez Angel</div>
									<div class="pieces-slider__slide">
										<img class="pieces-slider__image" src="img/josh-calabrese-527813.jpg" alt="">
										<div class="pieces-slider__text">Josh Calabrese</div>
									<div class="pieces-slider__slide">
										<img class="pieces-slider__image" src="img/samuel-zeller-103111.jpg" alt="">
										<div class="pieces-slider__text">Samuel Zeller</div>
									<div class="pieces-slider__slide">
										<img class="pieces-slider__image" src="img/sweet-ice-cream-photography-143023.jpg" alt="">
										<div class="pieces-slider__text">Sweet Ice Cream</div>
									<div class="pieces-slider__slide">
										<img class="pieces-slider__image" src="img/sticker-mule-199237.jpg" alt="">
										<div class="pieces-slider__text">Sticker Mule</div>
									<!-- Canvas to draw the pieces -->
									<canvas class="pieces-slider__canvas"></canvas>
									<!-- Slider buttons: prev and next -->
									<button class="pieces-slider__button pieces-slider__button--prev">prev</button>
									<button class="pieces-slider__button pieces-slider__button--next">next</button>

Styling the slider

The slideshow needs some special styling for our effect. We’ll need to hide the images and texts as we’ll be redrawing them with our library. But we also want them to fallback to their initial markup if no JavaScript is available. Finally, we need to make sure that the slider is responsive with a couple of media queries:

As you can see, we have hidden the HTML elements that we defined for our slider (except for the buttons), since we will draw everything in the canvas element.

En conclusión

Let’s start by defining some variables and getting the slider info from the DOM:

Then we need to define indexes variables to handle all the items we will draw on the canvas:

In addition to building the array of elements, in the previous code block we defined a simple mechanism to call the initSlider function only when all the images have been loaded. This is very important, since we will not be able to use Pieces to draw an image that is not available.

So, to show and hide the current items we need to call showItems and hideItems functions respectively. We have implemented them as follows:

We are almost done :) We just need to implement a responsive behavior, listening to the resize event, saving the current window width, and reinitializing the slider:

We really hope this tutorial has been useful, and that you have found inspiration in these effects!


Tagged with:

Sucender es un desarrollador informatico, apasionado del diseño web, HTML, CSS, JavaScript y Node.js. Available for hire.

View all contributions by

Website: http://www.ayudaparamiweb.com/

Artículos Relacionados

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.