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

    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!

  2. 2

    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 !

  3. 3

    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)?

  4. 6

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

  5. 7

    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!

  6. 8

    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)!

  7. 9

    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.

  8. 10

    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.

  9. 11

    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!

    • 12

      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');

  10. 13

    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: (

  11. 14

    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;

  12. 16

    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?

    • 17

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

    • 18

      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

    • 20

      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

  13. 21

    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.

    • 22

      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.

  14. 24

    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?

    • 25

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

  15. 26

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

  16. 27

    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!

  17. 28

    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.

Comments are closed.