animation test

test animation push up

by exodus4d

HTML

<html>
 <p style = 'margin-top: 100vh;'>above</p>
 
  <img class = 'balltest show-on-scroll standard-push' src = 'http://www.pngall.com/wp-content/uploads/5/Sports-Ball-Transparent.png'/>
  <img class = 'balltest show-on-scroll fade-in'       src = 'http://www.pngall.com/wp-content/uploads/5/Sports-Ball-Transparent.png'/>
  
  <img class = 'balltest show-on-scroll standard-push' data-src = 'http://www.pngall.com/wp-content/uploads/5/Sports-Ball-Transparent.png'/>
  <img class = 'balltest show-on-scroll fade-in'       data-src = 'http://www.pngall.com/wp-content/uploads/5/Sports-Ball-Transparent.png'/>
  
 <p style = 'margin-bottom: 100vh'>below</p>
</html>

CSS

.balltest {
    width: 50px;
  }

  .fade-in {
      opacity: 0;
      -webkit-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
      -moz-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
      -o-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
      transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.3s 0.25s ease-out;
      will-change: transform, opacity;
  }

  .standard-push {
      opacity: 0;
      transform: translateY(4em);
      -webkit-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out, translateZ(0);
      -moz-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
      -o-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
      transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.3s 0.25s ease-out;
      will-change: transform, opacity;
  }

  .is-visible {
      transform: translateY(0);
      opacity: 1;
  }

JavaScript

var elementsToShow = document.querySelectorAll('.show-on-scroll');
    $(window).scroll(function() {
      Array.prototype.forEach.call(elementsToShow, function (element) {
            if (isLoaded(element) && isElementInViewport(element)) {
                element.classList.add('is-visible');
            } else {
                element.classList.remove('is-visible');
            }
        });
    });


    [...elementsToShow].forEach((imgEl, i) => {
      if (
        imgEl.src &&
        imgEl.getBoundingClientRect().height
      ) {
        imgEl.dataset.isLoaded = true;
        console.log(`Img ${i} already loaded`);
      } else {
        console.log(`Img ${i} still loading... or should be lazyloaded`);

        imgEl.onload = function(e) {
          console.log(`Img ${i} finally loaded! onload event`);
          e.target.dataset.isLoaded = true;
        };

        if (imgEl.dataset.src) {
          console.log(`Img ${i} start lazy load...`);
          imgEl.src = imgEl.dataset.src;
        }
      }
    })

    function isLoaded(el) {
      return el.dataset.isLoaded
    }

    // Helper function from: http://stackoverflow.com/a/7557433/274826
    function isElementInViewport(el) {
        // special bonus for those using jQuery
        if (typeof jQuery === "function" && el instanceof jQuery) {
            el = el[0];
        }
        var rect = el.getBoundingClientRect();
        return (
            (rect.top <= 0 &&
                rect.bottom >= 0) ||
            (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.top <= (window.innerHeight || document.documentElement.clientHeight)) ||
            (rect.top >= 0 &&
                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
        );
    }