jQuery and CSS3 Slider – Parallax

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, they decided to recreate the effect.

The HTML structure is going to consist of a main container with the class “pxs_container”. We will add a wrapper for the three different backgrounds which we will animate differently to create the parallax. The background images will have some transparency since we want to see them moving on top of each other.

We will also add a loading element and the two unordered lists for the full images and the thumbnails. Further, we will add the navigation elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
< div id="pxs_container" class="pxs_container">
    < div class="pxs_bg">
        < div class="pxs_bg1">< /div>
        < div class="pxs_bg2">< /div>
        < div class="pxs_bg3">< /div>
    < /div>
    < div class="pxs_loading">Loading images...< /div>
    < div class="pxs_slider_wrapper">
        < ul class="pxs_slider">
            < li>< img src="images/1.jpg" alt="First Image" / >< /li>
            < li>< img src="images/2.jpg" alt="Second Image" / >< /li>
            ...
        < /ul>
        < div class="pxs_navigation">
            < span class="pxs_next">< /span>
            < span class="pxs_prev">< /span>
        < /div>
        < ul class="pxs_thumbnails">
            < li>< img src="images/thumbs/1.jpg" alt="First Image" />< /li>
            < li>< img src="images/thumbs/2.jpg" alt="Second Image" />< /li>
        < /ul>
    < /div>
< /div>

The options for the slider are the following:

  • auto: How many seconds to periodically slide the content. If set to 0 then autoplay is turned off.
  • speed: Speed of each slide animation
  • easing: Easing effect for the slide animation
  • easingBg: Easing effect for the background animation
  • circular: Circular slider
  • thumbRotation: The thumbs will be randomly rotated

Example: www.Lechlak.com