ON SCROLL EFFECT LAYOUT

    Rating: ★★★★☆
    View: 149
    Download: 95
    Từ khóa:

    This Blueprint is a template for a on scroll effect layout. We’ve had some requests on how to achieve this effect of animating elements once they are in the viewport and decided to create a Blueprint for it. It works with adding a class for animating the two sides of a section. There is an example effect defined and also some media queries for dealing with smaller screens.

    On devices that support touch, we will not apply any effects due to the scrolling logic on touch devices. Please read more about this issue in this article by TJ VanToll: onscroll Event Issues on Mobile Browsers.

    THE HTML

    Lemon drops

    Fruitcake toffee jujubes. Topping biscuit sesame snaps jelly caramels jujubes tiramisu fruitcake. Marzipan tart lemon drops chocolate sesame snaps jelly beans.

    img01
    img01

    Plum caramels

    Lollipop powder danish sugar plum caramels liquorice sweet cookie. Gummi bears caramels gummi bears candy canes cheesecake sweet roll icing dragée. Gummies jelly-o tart. Cheesecake unerdwear.com candy canes apple pie halvah chocolate tiramisu.

    THE CSS

    .cbp-so-scroller {
        margin-top: 50px;
        overflow: hidden;
    }
     
    .cbp-so-section {
        margin-bottom: 15em;
        position: relative;
    }
     
    /* Clear floats of children */
    .cbp-so-section:before,
    .cbp-so-section:after {
        content: " ";
        display: table;
    }
     
    .cbp-so-section:after {
        clear: both;
    }
     
    /* Text styling */
    .cbp-so-section h2 {
        font-size: 5em;
        font-weight: 300;
        line-height: 1;
    }
     
    .cbp-so-section p {
        font-size: 2em;
        font-weight: 300;
    }
     
    /* Sides */
    .cbp-so-side {
        width: 50%;
        float: left;
        margin: 0;
        padding: 3em 4%;
        overflow: hidden;
        min-height: 12em;
    }
     
    /* Clear floats of children */
    .cbp-so-side:before,
    .cbp-so-side:after {
        content: " ";
        display: table;
    }
     
    .cbp-so-side:after {
        clear: both;
    }
     
    .cbp-so-side-right {
        text-align: left;
    }
     
    .cbp-so-side-left {
        text-align: right;
    }
     
    .cbp-so-side-right img {
        float: left;
    }
     
    .cbp-so-side-left img {
        float: right;
    }
     
    /* Initial state (hidden or anything else) */
    .cbp-so-init .cbp-so-side {
        opacity: 0;
        -webkit-transition: none;
        -moz-transition: none;
        transition: none;
    }
     
    .cbp-so-init .cbp-so-side-left {
        -webkit-transform: translateX(-80px);
        -moz-transform: translateX(-80px);
        transform: translateX(-80px);
    }
     
    .cbp-so-init .cbp-so-side-right {
        -webkit-transform: translateX(80px);
        -moz-transform: translateX(80px);
        transform: translateX(80px);
    }
     
    /* Animated state */
    /* add you final states (transition) or your effects (animations) for each side */
    .cbp-so-section.cbp-so-animate .cbp-so-side-left,
    .cbp-so-section.cbp-so-animate .cbp-so-side-right {
        -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
        -moz-transition: -moz-transform 0.5s, opacity 0.5s;
        transition: transform 0.5s, opacity 0.5s;
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1;
    }
     
    /* For example, add a delay for the right side:
    .cbp-so-section.cbp-so-animate .cbp-so-side-right {
        -webkit-transition-delay: 0.2s;
        -moz-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }
    */
     
    /* Example media queries */
     
    @media screen and (max-width: 73.5em) {
        .cbp-so-scroller {
            font-size: 65%;
        }
     
        .cbp-so-section h2 {
            margin: 0;
        }
     
        .cbp-so-side img {
            max-width: 120%;
        }
    }
     
    @media screen and (max-width: 41.125em) {
        .cbp-so-side {
            float: none;
            width: 100%;
        }
     
        .cbp-so-side img {
            max-width: 100%;
        }
    }

    THE JAVASCRIPT

    ( function( window ) {
         
        'use strict';
     
        var docElem = window.document.documentElement;
     
        function getViewportH() {
            var client = docElem['clientHeight'],
                inner = window['innerHeight'];
             
            if( client < inner )
                return inner;
            else
                return client;
        }
     
        function scrollY() {
            return window.pageYOffset 				
    loading Đang tải...

    template được ưa chuộng