Download raw (8.1 KB)

;(function () {
    'use strict';

    var startOffsetRange = [30, 300],
        bufferRange = [0, 150];

    function parallax() {
        var scrollY,
            mainEl = document.querySelector('.main--no-home'),
            mainWrapper = document.querySelector('.main-wrapper');
        
        function draw () {
            if (window.scrollY != scrollY) {
                scrollY = window.scrollY;

                if (document.documentElement.clientWidth) {
                    var els = document.querySelectorAll('[data-parallax="true"]');
                    for (var i = 0; i < els.length; i++) {
                        var item = els[i],
                            distance = parseInt(window.scrollY * item.getAttribute('data-speed'));
                            
                        item.style.transform = 'translate3d(0, -' + distance +'px, 0)';
                    }
                }

                if (mainEl && mainWrapper.clientHeight > mainEl.clientHeight) {
                    if ((document.documentElement.clientHeight - (mainEl.clientHeight - window.scrollY)) > 0) {
                        mainEl.classList.add('main--stick-to-bottom');
                    } else {
                        mainEl.classList.remove('main--stick-to-bottom');
                    }
                }
            }

            requestAnimationFrame(draw);
        }

        draw();
    }
    
    function updateScrollSpeed () {
        var contentHeight   = $('.main').outerHeight(),
            windowHeight    = $(window).height(),
            windowScrollDistance  = contentHeight - windowHeight;
                    
        $(".feeds__feed").each(function () {
            var $this = $(this),
                feedHeight = $this.attr('data-height');
                
            $this.attr('data-speed', (feedHeight - windowHeight) / windowScrollDistance);
        });
    }

    function updateHeaderSpacerHeight () {
        var $header = $('.main--no-home .main__header'),
            $spacer = $('.main--no-home .main__header-spacer');

        if ($header.outerHeight() != parseInt($spacer.css('height'))) {
            $spacer.css('height', $header.outerHeight() + 'px');
        }
    }

    function getXMax () {        
        if ($('body').hasClass('body--home')) {
            return $('body').innerWidth();
        } else if ($('body').hasClass('is-collapsed')) {
            return .6 * $('body').innerWidth();
        } else {
            return .25 * $('body').innerWidth();
        }
    }

    function getBufferRight ($feed) {
        return ($feed.hasClass('feeds__feed--news') || $feed.hasClass('feeds__feed--ads')) ? 350 : 100;
    }

    function calculateXPixels (percentage, $entry) {
        return parseInt(percentage * (getXMax() - getBufferRight($entry.parent())));
    }

    function calculateXPercentage (pixels, $entry) {
        return pixels / (getXMax() - getBufferRight($entry.parent()));
    } 

    window.addEventListener('load', function() {

        $('.main__nav > ul > li').click(function () {
            var $this = $(this);

            if ($this.hasClass('child--force_reveal')) {
                $this.removeClass('child--force_reveal');
            } else {
                $('.child--force_reveal').removeClass('child--force_reveal');
                $this.addClass('child--force_reveal');
            }
        });

        $('.main__nav > ul > li').mouseout(function () {
            $(this).removeClass('child--force_reveal');
        });

        $(".feeds__filter input").change(function (e) {
            var $this = $(this),
                $feeds = $('.feeds__feed[data-feed-type="' + $this.val() + '"]');

            if ($this.prop('checked')) {
                $feeds.css("visibility", "visible");
            } else {
                $feeds.css("visibility", "hidden");
            }
        });
        
        $(".feeds__entry img").on("mousedown", function (e) {
            e.preventDefault();
        }); 
        
        $(".feeds__entry a").on("mousedown", function (e) {
            e.preventDefault();
        }); 
        
        $(".feeds__entry").on("mouseover", function () {
            var $this = $(this); 
            
            $(".feeds__feed").css("z-index", "initial");
            $(".feeds__entry").css("z-index", "initial");
            
            $this.parent().css("z-index", 1);
            $this.css("z-index", 1);
        });
        
        $(".feeds__entry").on("mousedown", function (e) {
            
            var $this = $(this),
                element_x = calculateXPixels(parseFloat($this.attr("data-x")), $this) || 0,
                element_y = parseInt($this.attr("data-y")) || 0,
                x = e.screenX,
                y = e.screenY,
                dx, dy;

            $this.addClass("dragging");
            
            var move = function (e) {
                dx = e.screenX - x,
                dy = e.screenY - y;

                $this.css("transform", "translate3d(" + (element_x + dx) + "px, " + (element_y + dy) + "px, 0)");
            };
            
            var end = function () {
                $this.removeClass("dragging");
                $this.off("mousemove", move);
                $this.off("mouseup", end);
                
                // Storing new position on element
                $this.attr("data-x", calculateXPercentage((element_x + dx), $this));
                $this.attr("data-y", (element_y + dy));
            }
            
            $this.on("mouseup", end);
            $this.on("mouseleave", end);
            $this.on("mousemove", move);
        });
                    
        $('.btn-toggle').click(function () {
            $('body').toggleClass('is-collapsed');
            $('body').removeClass('reveal-nav');
            $(".feeds__entry").each(function () {
                var $entry = $(this),
                    x = $entry.attr("data-x"),
                    y = $entry.attr("data-y");
                $entry.css("transform", "translate3d(" + calculateXPixels(x, $entry) + "px, " + parseInt(y) + "px, 0)");
            });

            updateHeaderSpacerHeight();
            window.setTimeout(updateScrollSpeed);
        });

        $('.responsive-hamburger').click(function() {
            $('body').toggleClass('reveal-nav');
        })
        
        setTimeout(function () {
            var contentHeight   = $('body').outerHeight(),
                windowHeight    = $(window).height(),
                windowScrollDistance  = contentHeight - windowHeight;
            
            $(".feeds__feed").each(function () {
                var $feed   = $(this),
                    y       = startOffsetRange[0] + Math.floor(Math.random() * (startOffsetRange[1] - startOffsetRange[0]));

                $feed.find(".feeds__entry").each(function () {
                    var $entry       = $(this),
                        x           = Math.random();
                    
                    $entry.attr('style', $entry.attr('data-style'));
                    $entry.attr('data-style', '');

                    $entry.find('img[data-src]').each(function () {
                        var $img = $(this);
                        $img.attr('src', $img.attr('data-src'));
                        $img.attr('data-src', '');
                    })

                    $entry.attr({"data-x": x, "data-y": y});
                    $entry.css("transform", "translate3d(" + calculateXPixels(x, $entry) + "px, " + parseInt(y) + "px, 0)");
                    
                    y += Math.max($entry.height(), 400) + bufferRange[0] + Math.floor(Math.random() * (bufferRange[1] - bufferRange[0]));

                });
                
                $feed.attr({
                    'data-parallax': 'true',
                    'data-height': y,
                    'data-speed': (y - windowHeight) / windowScrollDistance
                });

                $feed.removeClass('feeds__feed--hidden')
            });
            
            updateHeaderSpacerHeight();

            // Start the parallax
            parallax();
        });
        
        $(window).on('resize', updateScrollSpeed);
        $(window).on('resize', updateHeaderSpacerHeight);
    });
})();