Simple parallax

parallax.jquery.js

;(function() {
    'use strict';

    $.fn.parallax = function(options) {
        var $window = $(window);
        var defaults = {
            'speed': 6,
            'firstBlock': false
        }
        var setting = $.extend(defaults, options);

        function initParallax() {
            $window.on('scroll.parallax resize.parallax', { element: $(this) }, parallax);

            // triggers window scroll for first calculate scrollTop and documentWidth
            $window.trigger('scroll.parallax');
        }
        function parallax(event) {
            var element = event.data.element;

            // pictures are not prepared for parallax on small resolutions
            if (document.documentElement.clientWidth < 1024) {
                element.css({ transform: '' });
                return;
            }

            var bgOffset = element.offset().top;
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            var yPos = (scrollTop - bgOffset) / setting['speed'];
            if (setting['firstBlock'] === true && yPos < 0) {
                yPos = 0;
            }

            element.css({ transform: 'translate3d(0px, ' + yPos + 'px, 0px)' });
        }

        return this.each(initParallax);
    }
    $('.parallax').parallax();
})();