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.
Best jQuery Slider Plugins & Tutorials with Demo
Slice Revealer : Simple Reveal Animation with Anime.js
Today we’d like to share a simple reveal animation.The idea is to cover and uncover an image with slices to either hide or show it. The slices can be vertical or horizontal and can come from different directions. Playing with the number of slices, delays and colors, creates a plethora of possible looks for this effect.We are using anime.js for the animations.
DreamSlider : jQuery Image Slider Plugin
DreamSlider is a jQuery image slider plugin with great visual effects.
Features:
- Single image/Gallery mode to create an image slideshow with thumbnails
- Small file size,easy to implement.
- Quick load time due to progressive loading of images, which are beyond viewport using lazyloading technique
- No additional thumb images required.
- Hover effects for thumbnails : Zoom-in(default),bounce,standout.
Sequence.js : Step based Animations Slider
Sequence.js is a CSS-driven framework for building responsive touch-enabled step-based animations. It is ideal for creating sliders, presentations, banners and other sorts of dynamic components. Among the several premium plans you will find a free one that grants you with a personal open-source license.
Liquid Distortion Effects with JavaScript
Today we’d like to share an interesting distortion effect with you. The main concept of this demo is to use a displacement map in order to distort an underlying image, giving it different types of effects. To demonstrate the liquid-like transitions between images, we’ve created a slideshow.We’ll be using PixiJS as our renderer and filtering engine and GSAP for our animations.
nanameSlider : jQuery Skew Content Slider Plugin
nanameSlider is the free and simple skew content slider jQuery plugin.
- Uses native CSS3 translate3d and skewY.
- Slides can contain HTML content, or images
- Fully responsive – adapt to any device
- Mobile touch slider
- Browser support: Firefox, Chrome, Safari, iOS, Android, IE11
- Tons of configuration options
