Remove Jquery from this code

Question

Hey i´m trying to implement this parallax code into plain js

$(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
}

this is how far i got

(function() {

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

})();


 function getElementsByAttribute(attribute, context) {
  var nodeList = (context || document).getElementsByTagName('*');
  var nodeArray = [];
  var iterator = 0;
  var node = null;

  while (node = nodeList[iterator++]) {
    if (node.getAttribute(attribute)) nodeArray.push(node);
  }

  return nodeArray;
}
function scrollEvent(){


        viewportTop = $(window).scrollTop();
        windowHeight = $(window).height();
        viewportBottom = windowHeight+viewportTop;
        els = getElementsByAttribute('data-parallax');

        for (var i = 0; i < els.length; i++) {
            distance = viewportTop * els[i].getAttribute('data-speed');
            if(els[i].getAttribute('data-direction') === 'up'){ sym = '-'; } else { sym = ''; }
            els[i].style.webkitTransform = "translate3d(0, " + sym + distance +"px,0)";

        };


}   

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

so basically i need to replace these two lines

    viewportTop = $(window).scrollTop();
    windowHeight = $(window).height();

or is there even sth. that i´m missing ? thanks in advance

Community · Accepted Answer · 2017-05-23 11:50:52Z

3

for height of window yo can use

windowHeight = window.innerWidth;

and for scrollTop you can take help of this link

Converting Jquery to Javascript

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Mar 7, 2015 at 12:38

Sumit Jha

3681 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remove Jquery from this code

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related