GTX animate

by Yunus Gaziev

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium natus ipsum minus quas, veniam, esse numquam itaque blanditiis qui repellat enim dolorem vitae, expedita veritatis aliquid culpa incidunt, reprehenderit architecto perspiciatis dolores ratione dicta distinctio. Eaque perferendis molestias necessitatibus rem sed praesentium molestiae expedita aliquam, deserunt, voluptas optio accusamus eum!</p>
<p>Totam, hic, non! Sapiente officiis, ex ut quas blanditiis non ab quod. Recusandae eligendi illum praesentium ipsum cupiditate fugiat molestias cumque aspernatur eius rem, nesciunt quibusdam! At incidunt odit adipisci laborum vel doloremque laboriosam aperiam est beatae eaque in explicabo, temporibus veniam veritatis repellendus. Ea molestias quos numquam suscipit debitis?</p>
<p>Dolor autem commodi aut, iure dignissimos, facilis nulla animi reiciendis minima praesentium reprehenderit quidem vel suscipit, veritatis nostrum quis at eaque perspiciatis. Quaerat at eveniet voluptates vel voluptate, recusandae non porro dignissimos quos adipisci magnam ullam veritatis eligendi debitis distinctio deserunt saepe perferendis illo quidem quod consequuntur doloremque. Deserunt, repellat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium natus ipsum minus quas, veniam, esse numquam itaque blanditiis qui repellat enim dolorem vitae, expedita veritatis aliquid culpa incidunt, reprehenderit architecto perspiciatis dolores ratione dicta distinctio. Eaque perferendis molestias necessitatibus rem sed praesentium molestiae expedita aliquam, deserunt, voluptas optio accusamus eum!</p>
<p>Totam, hic, non! Sapiente officiis, ex ut quas blanditiis non ab quod. Recusandae eligendi illum praesentium ipsum cupiditate fugiat molestias cumque aspernatur eius rem, nesciunt quibusdam! At incidunt odit adipisci laborum vel doloremque laboriosam aperiam est beatae eaque in explicabo, temporibus veniam veritatis repellendus. Ea molestias quos numquam...

CSS

body {
  font-size: 16px;
  line-height: 20px;
  font-family: Arial, sans-serif;
}
#scroll-animation-GTX1080 {
    background-color: #000;
}

.sprite-container-GTX1080 {
    top: 200px;
    width: 300px;
    height: 124px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    overflow: hidden;
}

.sprite-GTX1080 {
    width: 9900px;
    height: 124px;
    background: url("http://images.nvidia.com/pascal/img/scrollanimation/gtx1080_sprite_mobile_300px_sm.jpg") no-repeat;
    background-position: 0px 0px;
    background-size: contain;
}

JavaScript

function debounce(func, wait, immediate) {

    var timeout;

    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };

        var callNow = immediate && !timeout;

        clearTimeout(timeout);
        timeout = setTimeout(later, wait);

        if (callNow) func.apply(context, args);
    };
};

function isScrolledIntoView(elem, offsetTop, offsetBottom) {

    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top - offsetTop;
    var elemBottom = elemTop + $elem.height() + offsetBottom;

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}



(function() {

    var GTX1080 = $('#scroll-animation-GTX1080'),
        spriteGTX1080 = $('.sprite-GTX1080'),
        
        GTXFPS            = Math.round(1000 / 60), // где 60 - это количество кадров в секунду
        spriteWidth       = 300, // ширина спрайта
        spriteCount       = 32,  // количество кадров в спрайте
        debounceTime      = 5,  // интервал в который происходит проверка координат элемента
        offsetTop         = 130, // верхняя граница экрана
        offsetBottom      = 130, // нижняя граница экрана

        // это менять не нужно

        GTXInterval       = null,
        counter           = 0,
        inView            = false,
        isAnimate         = false,
        animateDirection  = 'back',
        tmpValue          = 0;
    
    
    if (window.matchMedia('(min-width: 240px)').matches) {
		offsetTop         = 30;
		offsetBottom      = 30;
    }
    
    if (window.matchMedia('(min-width: 480px)').matches) {
		offsetTop         = 50;
		offsetBottom      = 50;
    }


    function animateForward(counter) {
        return counter * spriteWidth;
    }

    function animateBack(counter) {
       ...