Перевести JQuery Parallax на чистый JavaScript

Question

У меня есть страница, которая использует только this excellent parallax function, и я не хочу загружать jQuery именно для этого.

Можете ли вы написать эту функцию в простом javascript и сохранить ее маленькой и читаемой? (Должен работать в IE10 +, современные браузеры)

$(document).ready(function(){ 

    function draw() { 
     requestAnimationFrame(draw); 
     // Drawing code goes here 
     scrollEvent(); 
    } 
    draw(); 

}); 

function scrollEvent(){ 

    if(!is_touch_device()){ 
     viewportTop = $(window).scrollTop(); 
     windowHeight = $(window).height(); 
     viewportBottom = windowHeight+viewportTop; 

     if($(window).width()) 

     $('[data-parallax="true"]').each(function(){ 
      distance = viewportTop * $(this).attr('data-speed'); 
      if($(this).attr('data-direction') === 'up'){ sym = '-'; } else { sym = ''; } 
      $(this).css('transform','translate3d(0, ' + sym + distance +'px,0)'); 
     }); 

    } 
} 

function is_touch_device() { 
    return 'ontouchstart' in window // works on most browsers 
     || 'onmsgesturechange' in window; // works on ie10 
} 

Answer 1

Вы можете делать то, что вы спрашиваете здесь, глядя на You Might Not Need jQuery.

Ваш код, переведенный в ванили JavaScript, должно быть что-то вроде этого:

document.addEventListener('DOMContentLoaded', function() { 
    function draw() { 
    requestAnimationFrame(draw); 
    // Drawing code goes here 
    scrollEvent(); 
    } 
    draw(); 
}); 

function scrollEvent() { 
    if (!is_touch_device()){ 
    var viewportTop = window.scrollY; 
    var windowHeight = document.documentElement.clientHeight; 
    var viewportBottom = windowHeight + viewportTop; 

    if (document.documentElement.clientWidth) { 
     var parallax = document.querySelectorAll('[data-parallax="true"]'); 
     for (var i = 0; i < parallax.length; i++) { 
     var item = parallax[i]; 
     var distance = viewportTop * item.getAttribute('data-speed'); 
     var sym = item.getAttribute('data-direction') === 'up' ? '-' : ''; 
     item.style.transform = 'translate3d(0, ' + sym + distance +'px,0)'; 
     }  
    } 
    } 
} 

function is_touch_device() { 
    return 'ontouchstart' in window || 'onmsgesturechange' in window; 
}