(function () {
    window.addEventListener('scroll', function (event) {
        var depth, i, layer, layers, len, movement, topDistance, translate3d;
        topDistance = this.pageYOffset;
        layers = document.querySelectorAll("[data-type='parallax']");
        for (i = 0, len = layers.length; i < len; i++) {
            layer = layers[i];
            depth = layer.getAttribute('data-depth');
            movement = -(topDistance * depth);
            translate3d = 'translate3d(0, ' + movement + 'px, 0)';
            layer.style['-webkit-transform'] = translate3d;
            layer.style['-moz-transform'] = translate3d;
            layer.style['-ms-transform'] = translate3d;
            layer.style['-o-transform'] = translate3d;
            layer.style.transform = translate3d;
        }
    });

}).call(this);

window.onload = function () {
    console.log('loaded');
    let allLayer = document.querySelectorAll('.layer');
    for (let i = 0; i < allLayer.length; i++) {
        setTimeout(() => {
            allLayer[i].classList.remove('animated');
        }, i * 300);
    }
}

window.addEventListener("scroll", function () {
    let allLayer = document.querySelectorAll('.layer');
    for (let i = 0; i < allLayer.length; i++) {
        allLayer[i].classList.remove('animated-1');
    }
});

var scrollToTop = function () {
    var scrollProgress = $(document).scrollTop();

    if (scrollProgress > 100) {
        $('.scroll-to-top-button').css("opacity", "1");
    } else {
        $('.scroll-to-top-button').css("opacity", "0");
    }
}

$('.scroll-to-top-button').click(function () {
    $('html,body').animate({
        scrollTop: 0
    }, 500);
});

scrollToTop();
$(document).scroll(scrollToTop);