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. Very cool. But there’s a bug while viewing the slider in autoplay on Firefox. After a few time of rotation the background disappears and some slider content gets highlighted. See screenshot here Any solution?

    • I did a little hack to try to solve this – added a background colour and image to .da-slide.
      Note: This background colour and image do not represent the one used in this tut.

      .da-slide{
      background: #8ac338 url(../images/green-bg.jpg) repeat 0% 0%;
      }

  2. Awsome , but like joseph after 3 rotations i loose the yellow backgroud in firefox, In safari the text headers stay on top of each other and are unreadable . Thanks for you beautiful and inspiring scripts.

  3. Hi Mary

    Thanks for sharing the code to this slider, I really like the effect created on the background image when the elements scroll. It’s also good to see real text used in the slider and not just a flat image.
    I’m not too sure about the separate animations though, I think this could be a little too much movement for a simple banner.

    Cathy

  4. I want to apply it to the wordpress platform, how can I do? Please indicate a method.

  5. @joseph For this bug my solve is :
    in jsslider line : ~110

    var r=this.bgpositer * this.options.bgincrement;

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

    • I tried on FF at work and didn’t get this problem, but I do at home….
      Both run on FF 11.0. Didn’t notice it in IE8, IE9 & Chrome.

      I can confirm this fix works. Thanks & also thanks Mary Lou! Great work! I learn a lot…

    • Hi there.

      To start off….. LOVE THE SLIDER ML!!

      @ercans

      I checked out the url you posted http://www.ercanskin.com and I’m still getting the effect described by Joseph using FF 11.0 (SEE HERE), not as often as in the original but once every two rounds or so. I’m a bit new to JQuery and I’m not sure if I fully get your fixing…

      Any suggestion on how to fix this bug in FF would be greatly appreciated.

      Thanks very much in advance.

  6. Bug founded.

    When I set 0 for bgincrement and changed slides script hanged up. I want simply disable moving the background.

  7. Very Helpful tutorial. I was amazed to see some of the parallax effects and always wanted to do some of it myself. This is a nice beginning

  8. Love this ML, nice work. I’m using it in a Shopify project right now as a matter of fact (slightly modded).

    Thanks for taking care of the increment 0 bug, I had hacked my way around that one quickly but your solution is nicer.

    Feature request for you: Would love to see the first slide (called ‘current’ in the options) animate in from an empty block on dom ready. 🙂

  9. @ML, thanks for sharing this nice project.

    @ercans: your fix works fine. However, I like one liners so I changed your snippet to:

    this.$el.css( 'background-position' , ( (this.bgpositer * this.options.bgincrement > 4500) ? ((this.bgpositer * this.options.bgincrement)%4500) : (this.bgpositer * this.options.bgincrement) ) + '% 0%' );

    For those who start with the unchanged sample download code:
    Replace in file jquery.cslider.js the line
    this.$el.css( 'background-position' , this.bgpositer * this.options.bgincrement + '% 0%' );
    by
    this.$el.css( 'background-position' , ( (this.bgpositer * this.options.bgincrement > 4500) ? ((this.bgpositer * this.options.bgincrement)%4500) : (this.bgpositer * this.options.bgincrement) ) + '% 0%' );

    In case you want to replace the background image waves.gif with your favourite pattern, you might have to adapt the value of 4500 according to picture dimensions.

    @ML, thanks for sharing this nice project.

    • I tried this fix and was fiddling around with changing the 4500 value to get rid of the firefox error. It’s better by changing to 3000 but I still see it, it just takes longer and only lasts for a little bit. What’s the significance of the value? Should I have an exact number relevant to the width of the image ie. waves.gif? ie. 750 x 6 = 4500

  10. This and the other Prallax slider are wonderful. I’ll try to add the dual sliding background from the old slider with the content sliding in this and we’ll see how it goes.

    I love how you keep you code so clean and simple, the only problem I have is with the fonts on this site when running Win XP (any browser). The Open Sans Regular renders horribly.

    🙁

  11. awesome slider, ML! but there’s one thing I really want to know. Is it possible to control the slides via an unordered list? I’m not that good at js, so any help would really be appreciated.

  12. very cool!!! but i have a problem doesnt showme de arrows and dots, if you can helpme

    thanks

  13. I have the same question Stefan asked. The ability to control from a menu would be great.

  14. Can you point me in the right direction to how I can have multiple parallax sliders on one page?

  15. Hi! Great job once again. I’ve just written a plugin to integrate this beautiful slider in WordPress. Not entirely packaged yet but if you’re interested, you can ask me or see it in action here. It’s widely customizable in a wordpress admin page and will soon display articles instead of static texts and images. I’ll share it ASAP!

    • Hey Maverick,

      where can I see your plugin in action? Is the a possibility to download and try it?

      greetings

    • Hi Pascal,
      you can see it and download current version on this page. The v0.2 just displays 4 static slides, v0.3 is ready and will display slides with the latest wordpress posts. I’m now waiting for wordpress team approval to put the sources online on the official repository. If this process is too long, i will add them to my website. Feel free to give me your feedback on the plugin page 😉

  16. I have some questions English. You initialize script this line $.data( this, ‘cslider’, new $.Slider( options, this ) ); can you explain mechanism of this initialization?

    • I have some question. You initialize function with this line $.data( this, ‘cslider’, new $.Slider( options, this ) ); can you explain mechanism of this initialization?