Parallax Content Slider with CSS3 and jQuery

A simple parallax content slider with different animations for each slider element and a background parallax effect.
Parallax Content Slider with CSS3 and jQuery

From our sponsor: Don't spend all day sending messages. Automatically reach out to fans based on how they behave.


Today we want to share a simple 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.

How it works

The slider contains several slides and each one will have an h2 element, a paragraph, a link and a division with an image:

<div id="da-slider" class="da-slider">

	<div class="da-slide">
		<h2>Some headline</h2>
		<p>Some description</p>
		<a href="#" class="da-link">Read more</a>
		<div class="da-img">
			<img src="images/1.png" alt="image01" />
		</div>
	</div>
	
	<div class="da-slide">
		<!-- ... -->
	</div>
	
	<!-- ... -->
	
	<nav class="da-arrows">
		<span class="da-arrows-prev"></span>
		<span class="da-arrows-next"></span>
	</nav>
	
</div>

The core of this slider is the animations for each one of the elements. We’ll control the behavior of the elements by giving a “direction class” to the respective slide. For example, when we slide the current slide to the right, we will give it the class “da-slide-toright”. There will be four different classes for each of the possible slide directions and origins:

  • .da-slide-fromright
  • .da-slide-fromleft
  • .da-slide-toright
  • .da-slide-toleft

Given these classes, we can control the animation of each element:

/* Slide in from the right*/
.da-slide-fromright h2{
	animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
	animation: fromRightAnim2 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
	animation: fromRightAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromright .da-img{
	animation: fromRightAnim4 0.6s ease-in 0.8s both;
}

/* Adjust animations for different behavior of each element: */
@keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}

Options

The following options are available when calling the cslider plugin:

$('#da-slider').cslider({

	current		: 0, 	
	// index of current slide
	
	bgincrement	: 50,	
	// increment the background position 
	// (parallax effect) when sliding
	
	autoplay	: false,
	// slideshow on / off
	
	interval	: 4000  
	// time between transitions
	
});

The parallax effect is created by moving the background of the slider to the opposite direction when sliding. With bgincrement you can control the amount of pixels it will be moved.

Demos

  1. Demo 1: Default options
  2. Demo 2: Slideshow (different animations)

Notice that we are using a simple fallback for browsers that don’t support CSS animations and transitions.

We hope you like our little experiment and find it useful!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

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.

Feedback 137

Comments are closed.
  1. Mary Lou, this is badass. Based on the kendoUI slider, right? The codrops tutorials have been MONEY for the past couple months for me. They’re the most envelope pushing CSS3 articles I’ve seen so far.

    Not going to dare using them in production environments for cross-browser incompatibility, but I’ve been using techniques for mobile webkit views and iPad development.

    Nice nice nice. Thank you.

  2. Superb! My sincere thanks for yet another awesome tutorial!

    Im sure as soon as you guys post these, the contents spread across the web like wildfire! I know im eager to get working anyway!

  3. Thank you for an excellent tutorial.
    Would this tutorial can also be used in commercial sites?

  4. Awesome! Thank you! I’ve done a rude, quick hack for basic responsiveness on < 480px device width. There certainly is a better way to do it, but this works for me:

    .da-slider {
    min-width: 320px;
    }
    @media ( max-width: 480px ) {
    .da-slide .da-img {
    clip: rect( 1px, 1px, 1px, 1px ); /* hide img */
    }
    }

  5. what a nice tuts man. Thats must be looks so good if the site using product type:)

    waiting for the next tuts..

  6. Hello I use it and it’s very usefull
    But in jsslider (“background-position: 4500% 0%;”) after 4500% in my website I got an error. The solution of it
    in jsslider line : ~110
    var r=this.bgpositer * this.options.bgincrement;

    if(r>=4500){
    r=r%4500;
    }
    this.$el.css( ‘background-position’ :r+’% 0%’);