ǹŴ

ǹŴ nice CSS3 and jQuery parallax content slider
Ҫ : 647  | ǹŴ : 142  | Ǵ : Slideshow & Scroller


nice CSS3 and jQuery parallax content slider

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:

01 <div id="da-slider" class="da-slider">
02   
03     <div class="da-slide">
04         <h2>Some headline</h2>
05         <p>Some description</p>
06         <a href="#" class="da-link">Read more</a>
07         <div class="da-img">
08             <img src="images/1.png" alt="image01" />
09         </div>
10     </div>