<script>
    var parallax = {
        elementClass: '.js-parallax',
        complete() {
            var parallaxElements = $(this.elementClass);
            parallaxElements.addClass('is-loaded');
        },
        animateElement() {
            var self = this;
            var parallaxElements = $(this.elementClass);
            window.requestAnimationFrame(function() {
                for (var i = 0; i < parallaxElements.length; i++) {
                    var currentElement = parallaxElements.eq(i);
                    var direction = currentElement.data('parallax-direction');
                    var scrolled = $(window).scrollTop();
                    var elementPosition = currentElement.offset().top;
                    var start = elementPosition - scrolled;
                    var sensitivity = 0.02;
                    var translateY = direction === 'up' ? Math.floor(start * sensitivity) : Math.floor(start * -(sensitivity));
                    currentElement.css({
                    	transition: 'transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
                        transform: 'translate3d(0px, ' + translateY + 'px, 0px)' // transform performs better
                    });
                    self.complete();
                }
            });
        },
        init() {
            var self = this;
            if($(window).width() > 767) {
                this.animateElement();
                // throttle scrolling with lodash for better performance
                window.addEventListener('scroll', _.throttle(function() {
                    self.animateElement();
                }, 300, { trailing: true, leading: true }));
            }
        }
    };
    parallax.init();
</script>