CODEWITHSUNDEEP
javascripthtmlcssanimationcss-animations
Shon Max
Shon Max

Reputation: 49

How to animate an element when scrolled and reveals

I am trying to Animate an Element when part of it or completely reveals after scrolled to its position. The code I am using do that action when scrolled to a absolute position (not the position of the object).

The animation I used is SlideUp. I haven't any idea for write a code to do that. I want a little help to write that code. Can anyone present the method (better with a small example) of writing that?

Code is below:

function reveal() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myDiv").className = "slideUp";
  }
}
/* When Class changed to slideUp, Animation will start */

.slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  visibility: visible;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

@-webkit-keyframes slideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}
<!-- Div has absolutely positioned to avoid showing when page load first time|Because, User should scroll to it for animate it. -->
<div id="myDiv" style="position:absolute;top:1500px;left:1px;">
  <p>Example text</p>
</div>

Upvotes: 1

Views: 158

Answers (1)

void
void

Reputation: 36703

To animate an element when it reveals on scroll, wow.js is the best resource combined with animate.css

Basic example to do so:

<div class="wow bounceInUp">
    Content to Reveal Here
</div>

Do not forget to initialize it.

<script>
    new WOW().init();
</script>

Upvotes: 1

Related Questions