PARALLAX CONTENT SLIDER WITH CSS3 AND JQUERY

    Rating: ★★★★☆
    View: 199
    Download: 197
    Từ khóa:

    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:

    Some headline

    Some description

    Read more
    image01

    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:

    1. .da-slide-fromright
    2. .da-slide-fromleft
    3. .da-slide-toright
    4. .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.

    loading Đang tải...

    template được ưa chuộng