“Animation auf Scroll -CSS” Code-Antworten

Aos JS

CSS
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

JS
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

INITIALIZE AOS:
<script>
  AOS.init();
</script>
Panzer

Animation auf Scroll -CSS

svg {
  position: fixed; /* make sure it stays put so we can see it! */

  animation: rotate 1s linear infinite;
  /*animation-play-state: paused;*/
  animation-delay: calc(var(--scroll) * -1s);
}
Yawning Yak

AOS CSS -Animation

<div data-aos="zoom-in-left"></div>
Evil Elephant

Scroll -Animationsbewegung

// Detect request animation frame
var scroll = window.requestAnimationFrame ||
             // IE Fallback
             function(callback){ window.setTimeout(callback, 1000/1000)};
var elementsToShow = document.querySelectorAll('.show-on-scroll'); 

function loop() {

  elementsToShow.forEach(function (element) {
    if (isElementInViewport(element)) {
      element.classList.add('is-visible');
    } else {
      element.classList.remove('is-visible');
    }
  });

  scroll(loop);
}

// Call the loop for the first time
loop();

// 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))
  );
}
Gleaming Grivet

Ähnliche Antworten wie “Animation auf Scroll -CSS”

Fragen ähnlich wie “Animation auf Scroll -CSS”

Weitere verwandte Antworten zu “Animation auf Scroll -CSS” auf CSS

Durchsuchen Sie beliebte Code-Antworten nach Sprache

Durchsuchen Sie andere Codesprachen