Answers for "css animation at scroll"

1

animation on 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);
}
Posted by: Guest on March-17-2021
0

on scroll animation

<!--follow steps -->
copy css code and paste in your css area

copy js code and paste in your js area




// if you want to more learn you wisit our website http://roginetwork.com/
// Rogi Network
// +923022020318
// [email protected]
<!--follow steps -->
<style>
@keyframes animationOnscroll {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
<script>
const rogi = document.querySelectorAll(".animation-onscroll");

observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      entry.target.style.animation = `anim1 2s ${entry.target.dataset.delay} forwards ease-out`;
    } else {
      entry.target.style.animation = "none";
    }
  });
});

rogi.forEach((image) => {
  observer.observe(image);
});

</script>
Posted by: Guest on October-28-2021
0

scrolling animation css

.inline-photo {
  border: 1em solid #fff;
  border-bottom: 4em solid #fff;
  border-radius: .25em;
  box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
  margin: 2em auto;
  opacity: 0;
  transform: translateY(4em) rotateZ(-5deg);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  max-width: 600px;
  width: 90%;
  will-change: transform, opacity;
}
Posted by: Guest on December-02-2020

Code answers related to "Javascript"

Browse Popular Code Answers by Language