From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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
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!
Excellent! Thank you so much…
nice ! Thank you so much for share
great job!!
Your tutorials are far and above some of the most amazingly clean, visually appealing, and highly functional out there today. Thank you for sharing such amazing work with the rest of us.
I love your work. Thank you!
Mary you are the best 🙂
Mary ROCKS!!!
Excellent! Thank you so much for your works, it’s very suitable for any premium WordPress theme!
really great again….
I love the effect, but it doesn’t seem to work in Opera (the other slides aren’t showing).
Very nice!
Problems with IE9 though: the first slide is showed on load. After sliding no slides show up, the first slide dissapears aswell. 🙁
Looks great, however I did notice a problem in IE9 – when you ‘slide’ to the next image there is nothing displayed – it seems it will only display the first slide.
Thank you all for your feedback! I fixed the issue with IE9. Cheers, ML
Muito bom. (Very Good)!
Obrigado. (Thanks)!
simple, but this is full stylish 😀
Layers sync should be beter
Tnkx 😉
Muito legal, valeu!
Superb Work !! as always you rocks..
Great example . . . like the yellow background very much!
Great! love the look and feel.
Could you explain a bet more how to change the location of the image? (if I change the left:60% CSS for it the slider still does not work like it should)
Hi,
you will need to change the 60% to whatever value you’d like it to be (in every class it’s defined, i.e. the default one and the animations). I use percentages in order for it to be responsive. Let me know if it answers your question.. Cheers, ML
thanks!
Mother of God, you’re the best ML!
Greetz.
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.
This is very cool! Just curious what web accessibility testing was done with this?
Very nice! Thanks for the offering.
Great share, thanks!
Perfect. Thx 4 sharing.
thanks a lot, Mary Lou. You’re still the best.
Great, thanks a lot
Thanks, great creation!
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!
Thank you for an excellent tutorial.
Would this tutorial can also be used in commercial sites?
Great, any way to add thumbnails in the navigation?
ML: your share is usually great, fine and distinguished.
Many thanks !!!
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 */ } }
Hi! Thanks for the article. Where can I download this set of icons?
Hi mary am just wondering can this be used on a commercial site?
what a nice tuts man. Thats must be looks so good if the site using product type:)
waiting for the next tuts..
you are awesome as always… we missed you for last few days on Codrops 🙁
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%’);
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%; }
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.
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
I want to apply it to the wordpress platform, how can I do? Please indicate a method.
@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…
For example you can see http://www.ercansekin.com
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.
Wow, it’s really cool. Nice work!
Bug founded.
When I set 0 for bgincrement and changed slides script hanged up. I want simply disable moving the background.
Fixed! Take a look at demo 3: the bgincrement is set to 0 when the plugin is initialized. Cheers, ML
Thanks, works perfect. Incredible thing.
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
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. 🙂