将JQuery Parallax转换为纯JavaScript

时间:2015-09-20 05:09:21

标签: javascript jquery parallax

我有一个只使用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
}

0 个答案:

没有答案