Today we want to share a simple jQuery parallax content slider with you. Using CSS animations, we’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 we got some requests and questions about how to do something like that, we decided to recreate the effect.
Make a list of items scrolls in a circle is a simple task. A bit of CSS, a few dozen lines of code. But as a web developer, I have to keep writing this over and over again and I couldn’t find a flexible enough plugin for me. So I wrote up this plugin so web developers/designers can quickly create an list of item with previous and next button to scroll through the list in circle. You can also set an interval so the list will scroll automatically.
Adipoli is a jQuery plugin that beautifies and simplifies creating and consuming such stylish hover effects.
With a simple function, we can choose the “start effect (normal, transparent or overlay)” and the images will become less catch until they are hovered.
There are 20+ built-in and attractive transition effects that will display the images “as is” when users hover them.
Also, multiple configuration options exists for further customizing the transitions.
zSlider is a beautiful image slider for your web applications. I created this for those people who needs a fancy jquery image slider with a simple to use but for limited number of images. This slider accepts two lists of images, each list will have 12 thumbs limit which means you can add 24 images in this gallery.
The best part in my opinion, is that not one image needs to be sliced or edited to work with this plugin, in fact the plugin handles everything itself. Next, you can choose the direction in which the transition occurs from left to right, right to left, top to bottom, or bottom to top – now for each image individually. You can set the initial delay before the transitions begin, set the transitions to loop or stop after the last image, set the time it takes for each panel to appear, and set the delay between the images.
Features:
A couple of months ago, I created a jQuery Vertical Parallax Demo that manipulated CSS to make multiple backgrounds move at different speeds relative to the users movement of the scroll bar. This type of effect is slowly appearing across various websites on the web, achieved using many different techniques. Nikebetterworld took the idea to a new level.
In today’s tutorial, we’re going to take the original jQuery Parallax script I wrote and recreate a webpage similar to Nikebetterworld.
jQuery Blend Modes plugin bring the blend Modes functions to your web page, without use any images editor (Like Photoshop), The main function of this plugin is to blend two copy of same image with a specified blend mode (it support 15 modes), and render the result into a canvas element.
We can use this plugin in many way, for example I create with this plugin (and small trick) a new mouse hover idea for the images.
The traditional image mouse hover was either reduce the image opacity, or the inverse, grow it, shrink it, or something like that.
But with jQuery Blend Modes plugin, I make the contents of an image change for really!!
Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 — no jQuery knowledge required!
