“Animasi di CSS Gulir” Kode Jawaban

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

Animasi di CSS Gulir

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

Animasi AOS CSS

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

Gulir gerakan animasi

// 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

Jawaban yang mirip dengan “Animasi di CSS Gulir”

Pertanyaan yang mirip dengan “Animasi di CSS Gulir”

Lebih banyak jawaban terkait untuk “Animasi di CSS Gulir” di CSS

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya