Paralax A Pen by Damian Drygiel.

index.html

<div id="group-one" class="colorful">
    <article>
        <h1>Scroll down</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, 
            id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
        </p>
    </article>

    <article>
        <h1>Dolor sit amet</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, 
            id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
        </p>
    </article>

    <article>
        <h1>Consectetur</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, 
            id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, 
            id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
        </p>
    </article>

    <article>
        <h1>Scroll Up</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, 
            id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
        </p>
        <br />
        <a href="https://github.com/drygiel/xPanel" data-text="More examples on github" class="nice-link">More examples on github</a>
        <br />
        <br />
        <input  type="checkbox" id="colorful" checked />
        <label for="colorful" >Colorful</label>
    </article>
</div>

<a href="https://github.com/drygiel" target="_blank"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>

script.js

(function ($) {

    $.xpanel = function (obj, opt) {
        var self = this,
            $container = $(obj),
            viewportHeight,
            panels = $container.children(),
            scrollingDirection = 'down',
            lastScrollPos = 0;

        self.options = $.extend({}, $.fn.waypoint.defaults, $.xpanel.defaultOptions, opt);

        //_________________ Refresh
        var refresh = function () {
            viewportHeight = $.waypoints('viewportHeight');
            var scaled = viewportHeight * Math.max(self.options.minHeightScale, 1);

            panels.css({ 'min-height': scaled });

            $container.find('.dummy').each(function () {
                $(this).css({ 'min-height': scaled, 'height': $(this).prev().outerHeight() });
            });
        }

        //_________________ Clear
        var clear = function () {
            panels.removeClass('in').removeClass('out').css({ 'top': '', 'bottom': '' });
        }

        //_________________ Change options
        self.changeOptions = function (opt) {

            if (opt === 'destroy') {
                self.destroy();
                return;
            }
            else if (opt === 'refresh') {
                refresh();
                $.waypoints('refresh');
                return;
            }

            for (var name in opt) {

                if (!(name in $.xpanel.defaultOptions)) continue; // Is option unknown?

                var value = opt[name];
                if (self.options[name] == value) continue; // Nothing changed?

                switch (name) {
                    case 'shadow':
                    case 'reverse':
                    case 'dim':
                        $container.toggleClass(name);
                        break;
                    case 'minHeightScale':
                        if (!!value)
                            refresh();
                        break;
                }

                self.options[name] = value;
            }
        }

        //_________________ Window scroll handler
        var scrollHandler = function () {
            var scrollPos = $(window).scrollTop();

            if (self.options.fixJumpyScrolling) {
                if (scrollPos > lastScrollPos) {
                    if (scrollingDirection != 'down') {
                        scrollingDirection = 'down';
                        onScrollingDirectionChanged(scrollingDirection);
                    }
                }
                else {
                    if (scrollingDirection != 'up') {
                        scrollingDirection = 'up';
                        onScrollingDirectionChanged(scrollingDirection);
                    }
                }
            }

            lastScrollPos = scrollPos;
        };

        //_________________ On scrolling direction changed
        var onScrollingDirectionChanged = function (newDirection) {
            panels.filter('.out').animate({
                'top': 0,
                'bottom': 0
            }, 200);
        }

        //_________________ Initialization
        self.init = function () {
            $container.data('xpanel', self);

            $(window).bind('scroll', scrollHandler);

            $container.addClass('xpanel');
            if (self.options.reverse) $container.addClass('reverse');
            if (self.options.shadow) $container.addClass('shadow');
            if (self.options.dim) $container.addClass('dim');

            panels.last().siblings().after('<div class="dummy" />');

            $(window).bind('resize', refresh);
            refresh();

            // Top hits
            panels.waypoint(function (direction) {
                var panel = $(this);

                clear();
                if (scrollingDirection === 'up' && direction === 'up') {

                    $container.removeClass('scroll-down').addClass('scroll-up');

                    if (self.options.whenScrollUp && panel.prev().length) {
                        if (self.options.fixJumpyScrolling) {
                            var diff = panel.offset().top - $(window).scrollTop();
                            panel.css('top', diff)
                        }
                        panel.addClass('out');
                        panel.prev().prev().addClass('in');
                    }
                }
                else {
                    $container.removeClass('scroll-up').addClass('scroll-down');
                }
            });

            // Bottom hits
            panels.waypoint(function (direction) {
                var panel = $(this);

                clear();
                if (scrollingDirection === 'down' && direction === 'down') {

                    $container.removeClass('scroll-up').addClass('scroll-down');

                    if (self.options.whenScrollDown && panel.next().length) {
                        if (self.options.fixJumpyScrolling) {
                            var diff = $(window).scrollTop() + viewportHeight - panel.next().next().offset().top;
                            panel.css('bottom', diff);
                        }
                        panel.addClass('out');
                        panel.next().next().addClass('in');
                    }
                }
                else {
                    $container.removeClass('scroll-down').addClass('scroll-up');
                }
            }, { offset: function () { return -($(this).outerHeight() - viewportHeight); } });

            return this;
        }

        //_________________ Destroy
        self.destroy = function () {
            $(window).unbind('resize', refresh);
            $(window).unbind('scroll', scrollHandler);

            $container.removeClass('xpanel')
                      .removeClass('reverse')
                      .removeClass('dim');

            $container.find('.dummy').remove();

            clear();
            panels.each(function () {
                $(this).css('min-height', '')
                       .waypoint('destroy');
            });

            $container.removeData('xpanel');
        }

        self.init();
    }

    //_________________ Default options
    $.xpanel.defaultOptions = {
        minHeightScale: 1.15,
        fixJumpyScrolling: true,
        reverse: true,
        shadow: true,
        dim: true,
        whenScrollDown: true,
        whenScrollUp: true,
    };

    //_________________ Extend waypoints
    return $.waypoints('extendFn', 'xpanel', function (opt) {

        if (this.length)
            this.each(function () {
                var xpanel = $(this).data('xpanel');

                if (xpanel instanceof $.xpanel)
                    xpanel.changeOptions(opt);
                else
                    new $.xpanel(this, opt);
            });

        return this;
    });
})(jQuery);

//--------------------------------------------------

$('#colorful').click(function () {
    $('#group-one').toggleClass('colorful');
});


$('#group-one').waypoint('xpanel', {  
    minHeightScale: 1.05,
    reverse: false,
    shadow: false,
    dim: true,
    whenScrollDown: true,
    whenScrollUp: true,
});

style.less

.xpanel {
    @speed: .8s;
    @dim-color: rgba(33, 33, 33, 0.4);
    @zIdxLow: 100;
    @zIdxMid: 200;
    @zIdxHigh: 300;

    .dummy {
        display: none;
    }

    > * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        z-index: @zIdxLow;
        background: #FFF;
        width: 100%;
    }

    &.shadow {

        &:not(.reverse) {
            .in, .out {
                -webkit-box-shadow: 0 2px 20px #252525;
                box-shadow: 0 2px 20px #252525;
            }
        }

        &.reverse {
            .in, .out {
                -webkit-box-shadow: 0 -2px 20px #252525;
                box-shadow: 0 -2px 20px #252525;
            }
        }
    }

    &.dim {
        > *:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            background-color: transparent;
            pointer-events: none;
        }

        &.scroll-down:not(.reverse) .in:before,
        &.scroll-up.reverse .in:before {
            width: 100%;
            height: 100%;
            background-color: @dim-color;
            -moz-animation: xpanel-lighten @speed forwards;
            -o-animation: xpanel-lighten @speed forwards;
            -webkit-animation: xpanel-lighten @speed forwards;
            animation: xpanel-lighten @speed forwards;
        }

        &.scroll-down.reverse .out:before,
        &.scroll-up:not(.reverse) .out:before {
            width: 100%;
            height: 100%;
            background-color: @dim-color;
            -moz-transition: background-color @speed ease;
            -o-transition: background-color @speed ease;
            -webkit-transition: background-color @speed ease;
            transition: background-color @speed ease;
        }
    }

    &:not(.reverse) {
        &.scroll-down {
            .out {
                position: relative;
                z-index: @zIdxHigh;
                bottom: 0 !important;

                + .dummy {
                    display: block;
                }
            }

            .in {
                position: fixed;
                left: 0;
                top: 0;
                z-index: @zIdxMid;
            }
        }

        &.scroll-up {
            .in {
                position: relative;
                z-index: @zIdxHigh;

                + .dummy {
                    display: block;
                }
            }

            .out {
                position: fixed;
                left: 0;
                top: 0;
                z-index: @zIdxMid;
            }
        }
    }

    &.reverse {
        &.scroll-down {
            .out {
                position: fixed;
                left: 0;
                bottom: 0;
                top: auto !important;
                z-index: @zIdxMid;

                + .dummy {
                    display: block;
                }
            }

            .in {
                position: relative;
                z-index: @zIdxHigh;
            }
        }

        &.scroll-up {
            .in {
                position: fixed;
                left: 0;
                bottom: 0;
                top: auto !important;
                z-index: @zIdxMid;

                + .dummy {
                    display: block;
                }
            }

            .out {
                position: relative;
                z-index: @zIdxHigh;
            }
        }
    }
}

@-moz-keyframes xpanel-lighten {
    100% {
        background-color: transparent;
    }
}

@-webkit-keyframes xpanel-lighten {
    100% {
        background-color: transparent;
    }
}

@keyframes xpanel-lighten {
    100% {
        background-color: transparent;
    }
}


// ----------------------------------- LAYOUT
@import url('http://fonts.googleapis.com/css?family=Lato:300,700');

* {
    margin: 0;
    padding: 0;
}

body,
html {
    color: #2C2C2C;
    font: 300 100% 'Lato', sans-serif;
}

article {
    font-size: 1.3em;
    min-height: 700px;
    padding: 20% 20px;
    font-weight: 200;
    text-align: center;
    background-color: white;

    .colorful & {
        &:nth-of-type(1) {
            background-color: #A8DA5E;
        }

        &:nth-of-type(2) {
            background-color: #FFF581;
        }

        &:nth-of-type(3) {
            background-color: #2AEEE6;
        }

        &:nth-of-type(4) {
            background-color: #313131;
            color: #3FC9C3;
        }

        article:nth-of-type(5) {
            background-color: white;
        }
    }
}

    article > div {
        display: inline-block;
        text-align: left;
        max-width: 60%;
    }

    article h1 {
        font-size: 3em;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 50px;
    }

p {
    line-height: 200%;
    max-width: 50%;
    text-align: left;
    margin: auto;
}

a {
  text-decoration: none;
  text-transform: uppercase;
}
/*___________________________________ LINK ___________________________________ */
// More info here: http://codepen.io/drygiel/pen/hkgGq
a.nice-link {
    @color: #0092CA;
    @hover-color: lighten(spin(saturate(@color, 50%), -8), 8%);

    position: relative;
    color:  @color;
    h1 &:after {
        border-bottom: 1px solid @hover-color; // Underline
    }

    &:after {
        text-align: justify;
        display: inline-block;
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        white-space: nowrap;
        overflow: hidden;
        color: @hover-color;
        min-height: 100%;
        width: 0;
        max-width: 100%; // 'cause of IE bug
        //background: #313131;
        -moz-transition: .3s;
        -o-transition: .3s;
        -webkit-transition: .3s;
        transition: .3s;
    }

    &:hover {
        color: @color; // To override default hover color

        &:after {
            width: 100%;
        }
    }
}

xPanel-Test.markdown

xPanel Test

xPanel is waypoint shortcut used to create paralax effect while scrolling panels which you can see on this page.

A Pen by Damian Drygiel on CodePen.

License.