Elements load with mouse scroll

Question

I just want to know how I do this effect:

Example: Open the website, and, when I start to scroll, the other elements appear from fade, like this: https://www.brightfunds.org/

Answer 1

This tutorial may be a good place for you to start:

http://tympanus.net/codrops/2013/07/18/on-scroll-effect-layout/

HTML

<div id="cbp-so-scroller" class="cbp-so-scroller">

    <section class="cbp-so-section">
        <article class="cbp-so-side cbp-so-side-left">
            <h2>Lemon drops</h2>
            <p>Fruitcake toffee jujubes. Topping biscuit sesame snaps jelly caramels jujubes tiramisu fruitcake. Marzipan tart lemon drops chocolate sesame snaps jelly beans.</p>
        </article>
        <figure class="cbp-so-side cbp-so-side-right">
            <img src="images/1.png" alt="img01">
        </figure>
    </section>

    <section class="cbp-so-section">
        <figure class="cbp-so-side cbp-so-side-left">
            <img src="images/2.png" alt="img01">
        </figure>
        <article class="cbp-so-side cbp-so-side-right">
            <h2>Plum caramels</h2>
            <p>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.</p>
        </article>
    </section>

    <section>
        <!-- ... -->
    </section>
    <!-- ... -->

</div>

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%;
    }
}

Javascript

/**
 * cbpScroller.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
;( 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 || docElem.scrollTop;
    }

    // http://stackoverflow.com/a/5598797/989439
    function getOffset( el ) {
        var offsetTop = 0, offsetLeft = 0;
        do {
            if ( !isNaN( el.offsetTop ) ) {
                offsetTop += el.offsetTop;
            }
            if ( !isNaN( el.offsetLeft ) ) {
                offsetLeft += el.offsetLeft;
            }
        } while( el = el.offsetParent )

        return {
            top : offsetTop,
            left : offsetLeft
        }
    }

    function inViewport( el, h ) {
        var elH = el.offsetHeight,
            scrolled = scrollY(),
            viewed = scrolled + getViewportH(),
            elTop = getOffset(el).top,
            elBottom = elTop + elH,
            // if 0, the element is considered in the viewport as soon as it enters.
            // if 1, the element is considered in the viewport only when it's fully inside
            // value in percentage (1 >= h >= 0)
            h = h || 0;

        return (elTop + elH * h) <= viewed && (elBottom) >= scrolled;
    }

    function extend( a, b ) {
        for( var key in b ) { 
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }

    function cbpScroller( el, options ) {   
        this.el = el;
        this.options = extend( this.defaults, options );
        this._init();
    }

    cbpScroller.prototype = {
        defaults : {
            // The viewportFactor defines how much of the appearing item has to be visible in order to trigger the animation
            // if we'd use a value of 0, this would mean that it would add the animation class as soon as the item is in the viewport. 
            // If we were to use the value of 1, the animation would only be triggered when we see all of the item in the viewport (100% of it)
            viewportFactor : 0.2
        },
        _init : function() {
            if( Modernizr.touch ) return;
            this.sections = Array.prototype.slice.call( this.el.querySelectorAll( '.cbp-so-section' ) );
            this.didScroll = false;

            var self = this;
            // the sections already shown...
            this.sections.forEach( function( el, i ) {
                if( !inViewport( el ) ) {
                    classie.add( el, 'cbp-so-init' );
                }
            } );

            var scrollHandler = function() {
                    if( !self.didScroll ) {
                        self.didScroll = true;
                        setTimeout( function() { self._scrollPage(); }, 60 );
                    }
                },
                resizeHandler = function() {
                    function delayed() {
                        self._scrollPage();
                        self.resizeTimeout = null;
                    }
                    if ( self.resizeTimeout ) {
                        clearTimeout( self.resizeTimeout );
                    }
                    self.resizeTimeout = setTimeout( delayed, 200 );
                };

            window.addEventListener( 'scroll', scrollHandler, false );
            window.addEventListener( 'resize', resizeHandler, false );
        },
        _scrollPage : function() {
            var self = this;

            this.sections.forEach( function( el, i ) {
                if( inViewport( el, self.options.viewportFactor ) ) {
                    classie.add( el, 'cbp-so-animate' );
                }
                else {
                    // this add class init if it doesn't have it. This will ensure that the items initially in the viewport will also animate on scroll
                    classie.add( el, 'cbp-so-init' );

                    classie.remove( el, 'cbp-so-animate' );
                }
            });
            this.didScroll = false;
        }
    }

    // add to global namespace
    window.cbpScroller = cbpScroller;

} )( window );