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!
Hi Mary Lou,
This is a super awesome control. Really fascinating. I was working on this control for a page and stumbled across a problem.
In internet explorer, along with current slide, I can also see the slides from left and right visible. The animation happens without any problem but slides from left and right are also visible.
In css,
.da-slider{
overflow:hidden;
}
if I comment ‘overflow:hidden’, this problem gets solved but then I am unable to scroll the page. The page does not scroll down beyond current screen. So, its either page doesn’t scroll OR slides from prev & next page are visible. How can this be solved?
Does anyone knows any solution to this?? I have been stuck for days on this. Any help will be really appreciated. Thanks
Hi,
I love this slideshow! Great work! I would love to use this but on my phone it gets stuck on the second slider and when I click on either the next or previous button or the little nav buttons nothing happens. Anyone know how to fix this?
Any help would be really appreciated.
Cheers
Hi guys, Fantastic slider thanks for sharing the source with us,
Although I am trying to make the slider slide Up then back down, rather than inright- outleft.
Any ideas how I could achieve this? Thanks
(here is the site I am using it on atm)
http://www.grahamwilsdon.com/new
Hey, this is a great slider! thanks alot! I’m trying to set up some absolute links like a menu instead of (or in addition to) the dots. I can’t seem to figure out what code to throw in the anchor with onClick to move to a specific page. Please help, thanks!
Hi thanks for slider.
How can you do the same slider with Bottom to TOP sliding ?
Hi ! Congratulation for this amazing slider. I’m working on it and i need to have a picture (35px/35px) instead of dots. Is it possible ?
I replace on the css .da-dots span with a background but it’s the same (of course) i try to change in the .JS on the line
var $navigation = $( ” );
but i don’t have the solution.
Any ideas ?
Thx !!!!
Hello, really great plugin. Failed to find any license info in the downloaded files. Can I use it for commercial projects? What is the license? Thanks and keep up the good work!
http://tympanus.net/codrops/licensing/ Cheers, ML
This slider is superb! Love it.
Is there any default options to
1. Just make the texts fade in & out with the image still sliding?
2. Pause the slideshow with mouseover?
Looking forward for your reply!
ch33rio
First of all, thank you on this great slider. Also, thanks other people for help in fixing bugs. I have one question: if I set autoplay, it works great. But if I manually select some specific slide, that will cause stoping of autoplay. Is there any way to continue autoplay after that? Thanks again!
Dear Mary Lou,
The banner(PARALLAX CONTENT SLIDER) that you have developed is awesome. It just fit in to my project perfectly.
how ever i need to do few customization:
1) I am trying to rearrange the image location but am facing the problem like i con’t find the position given to the image from the left or right ,
2) the animation is not working properly in Internet Explorer,
i am requesting your help to fix problems in customization …
Thanks with Regards
Nithesh
Email : soft.nithesh@gmail.com
Hi Mary Lou,
There is perhaps a bug or just a glitch in the slider. Just after clicking the left/right arrows or the nav links below, the auto play feature stops.
Only available after a refresh. What could be wrong?
Thanks 4 such an awesome slider, & a great tutorial.