Javascript – animacje sekcji przy scrollu

  javascript

http://jackonthe.net/css3animateit/ (kłóci się z jquery z WP).

https://github.com/michalsnik/aos
działa bez jquery!

Wykrywanie scrolla w konkretnym kierunku

window.addEventListener('wheel', function(e) {
  if (e.deltaY < 0) {
    console.log('scrolling up');
  }
  if (e.deltaY > 0) {
    console.log('scrolling down');
  }
});

document.onkeydown = function(e) {
    console.log(e.keyCode);

    if( e.keyCode == 40 || e.keyCode || 34 || e.keyCode == 32 ) {
        console.log('scrolling down');
    }

    if( e.keyCode == 38 || e.keyCode == 33 ) {
        console.log('scrolling up');
    }
}

Wykrywanie, czy element jest na ekranie

wykrywanie scroll, scroll on screen

var observer = new IntersectionObserver(function(entries) {
                if(entries[0].isIntersecting === true)
                    animation.play();
            }, { threshold: [1] });

            observer.observe(document.querySelector('#elem'));