Parallax Content Slider with CSS3 and jQuery

A simple parallax content slider with different animations for each slider element and a background parallax effect.



View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

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. 6

    Is it possible to change the width from 100% to something fixed (960px perhaps) ? I tried to explicitly set the parent DIV of the slider to 960px with no avail. Hope you can shed some light.

    • 8

      Nice Slider.
      I also want 100% width and content should be in 960px. I tried hard its working perfect but when sliding the next one that time contents are no showing.
      ??

  2. 9

    Hey that does not work correctly in Safari on a Mac, what happens to ensiman texts and not run the animation. Greetings and congratulations on your contributions are very good

  3. 10

    Parallax effect is not working in IE, its working as normal slider. any Solution for IE users.

  4. 11

    First off, this plugin is AMAZIN!!

    The are way to pause the rotation on Hover??

  5. 12

    Very nice. Is there a way to pause the rotation during autoplay? This would allow to offer some additional interaction for each slide.

  6. 13

    Nice Slider.
    I also want 100% width and content should be in 960px. I tried hard its working perfect but when sliding the next one that time contents are not showing.
    ??

  7. 15

    Hi ML,

    The slideshow can stop running when hover?

    Best regards,
    Kingsley

  8. 16

    Why do i get

    “this.$pages.on is not a function” and the slider wont work?

  9. 18

    Hi,
    Thank you for sharing this, it’s really cool.
    As Kings, I’d like to ask how to make slideshow stop running on hover?

  10. 19

    Great Slider, but again damn IE, it doesn’t show this parallax effect at all.

  11. 20

    Hi all,

    First of all, thanks to Mary Lou for the tutorial, it has been really helpful for a website i’m working on. I have only one questions.

    1. Is there a way to specify an id for each span generated . In javascript maybe? I’m not too sure what I have to change or add in the script. It’s because I created custom buttons for the slider and I need to change the text on each of them.

    Thanks again and have a good day.

  12. 21

    Nevermind, I have found a solution, for those who need it. Find in jquery.slider.js this line : $navigation.append where the span are created. Then add an id and use $i to increment. From now on, you can use custom navigation buttons!

  13. 22

    To make it pause on hover add these lines to the _loadEvents function:

    this.$slides.on({
    mouseenter: function(){
    if( _self.options.autoplay ) {
    clearTimeout( _self.slideshow );
    }
    },
    mouseleave: function(){
    var default_interval = _self.options.interval;
    if(_self.options.autoplay ) {
    _self.options.interval = 500;
    _self._startSlideshow();
    _self.options.interval = default_interval;
    }
    }
    });

Comments are closed.