Parallax Content Slider with CSS3 and jQuery

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

By in Playground on
Demo Download


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:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Ideas for Grid to Slideshow Switch Animations

Smooth Panel Scroll Effects

Tropical Particles Rain Animation with Three.js

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

Feedback 137

Comments are closed.

  2. @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

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

    🙁

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

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

    thanks

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

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

  9. 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 😉

  10. 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?

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

    • 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.
      ??

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

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

  19. First off, this plugin is AMAZIN!!

    The are way to pause the rotation on Hover??

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

  21. 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.
    ??

  24. Why do i get

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

  25. 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?

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

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

  28. 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!

  29. 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;
    }
    }
    });

  31. Marylou: This is a great slider, but is not working on safari. How can I avoid the text to get over the next h2 and p text?
    Thanks for your help!

  32. Hi ! Amazing slider ! I use it in my next prenium template 🙂 but I meet the same problem as Tia Tule:
    “Marylou: This is a great slider, but is not working on safari. How can I avoid the text to get over the next h2 and p text?
    Thanks for your help!”
    And it’s problematic…
    Thank you very much !

  33. No body ? Mary is it possible to give on the slider on Safari the same kind of transition that Internet explorer (No animation just a slide with the text and the picture but no bug :P)?

  36. Upgrade your opera…It working perfectly but not on Safari on a computer but very well on an Iphone or an Ipad

  37. Super slide, but a small problem in Opera not working navigation,
    only works once and then not active,
    how to fix this problem?

    Opera is the latest!

  38. Not working in Opera 12.0
    I wrote message to Opera-support with bug description (freezing on second slide).
    To all: write letters for Opera-support, because this NICE script works properly in another browsers (Chrome, Firefox, IE9)!

  39. Has anyone successfully implemented this into a Magento build?

    I’ve tried with opening the jquery.cslider.js file with $.noConflict(); and $jQuery.noConflict(); to no avail.

    I’m calling the js files from a phtml file static block, it pulls them fine it’s just conflicting with something somewhere.

    If anyone’s had this issue and resolved it, you’d save me some investigative work!

    Potentially, it revolves around Prototype.

  40. Text is not sliding away in IE8 on Windows 8…

    The Script is fantastic. I like to use in my website as news scroller. I made it working on Safari, Firefox and Chrome under Lion. But when I use IE 8 under Win8 the text is not sliding away overlapping with the next text in. Any suggestion???

    Again Mary, Amazing slider, simply spectacular.

  41. Hi, the plugin looks great and I think it’s exactly what I’m looking for. However, I can’t find the settings to add static HTML content. When I select “display static HTML content” the only option I have is “Index of the first slide to display” How do I add/edit slides? I am using WordPress 3.4.1.

    Thanks!

    • Hi, in static display mode, the plugin simply use the 4 slides which are in the file “static-slides-sample.php”. So if you want to add/edit slides, you’ll have to edit manually this file! (I recommand to copy the sample file and rename it, then change the inclusion in “wp-parallax-content-slider.php”:
      include('static-slides-sample.php');
      to
      include('static-slides-customized.php');

  42. Excellent slider.
    But I have a problem – I want to use “jquery lightbox” to display enlarged images, but it only works on the first slide: (

  43. Opera and any browser fix: find string

    if( this.current === page || this.isAnimating ) return false;

    and replace it to

    if( this.current === page ) return false;

  44. Awesome slider!

    I’m having an issue. For some reason, none of the content will show in the slider. Each slide remains hidden off to the side. I’ve checked in Safari and Firefox, both with the same results. The site is http://fisherspopcorn.commercev3.com anything glaring I’m missing?

    • Russel, you have js errors: “Uncaught SyntaxError: Unexpected token ) at line 223”. Hope it helps, ML

    • Thanks Mary Lou, I directly copied and pasted the js code that goes after the slider html as follows:

      $(function() {

      $(‘#da-slider’).cslider({
      bgincrement : 0
      });

      });

      This appears to be where the error is coming up, but I can’t find what’s wrong with it. I haven’t modified anything in the jquery.cslider file at all so I’m assuming the problem isn’t coming from there. I’m still learning javascript, so I can’t read it very well. Am I missing something?

      Thanks

    • Mary Lou,

      Thanks for the help. It turned out that the JavaScript was being ignored because of a technicality with the “smarties” system used to build the shooping cart. Thanks for your time anyway

  45. It is a very nice slider, much different from usual I have seen. Only one issue i have noticed and i would like your opinion about. At demo URL selecting auto play after some time disappears the background image.

    • I would like to make clear on my post that, background image disappears on auto play, only when i use Firefox (latest version). With other browsers of latest versions, such as Google Chrome, Opera and Safari the slider works fine. On IE (7,8,9) works as a simple slider without any effect.

  47. Firstly fantastic slider, love the animations. I’m using the slider for a feature real within our site but coming across a problem. I need to use two sliders in one page but for some reason when putting in a second slider it doesn’t show any of the content in the second slider?

    • I have tried also to display more than one sliders at the same instance or page and works only the first one.

  48. Great work, Mary Lou! In IE, however, the background is not animating at all. Any idea what the issue could be there?

  49. Hi Mary Lou! Thanks for sharing this, looks really nice.

    However (as mentioned by other users) in Internet Explorer the background is not animating. I’m using this feature to rotate between different slides, so this issue is unfortunately making the plugin unusable in my situation. Any ideas or plans for a fix?

    Thanks in advance!

  50. Nice effect slider. Great work. However I cant able to bring the slider image to the left side and the content to the right side.