CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Eduardo Ortiz
Eduardo Ortiz

Reputation: 331

How do I animate things on scroll?

This theme demo on themeforest has neat animations including for example showing text when the users scrolls down, or making icons appear from the sides.

I'm guessing CSS3 and JavaScript, possibly with jQuery or a framework specialized in animations would be used for this, but I have no idea where to start learning how to accomplish these kinds of animations.

Where do I start?

Upvotes: 0

Views: 2253

Answers (5)

Fahim Raza
Fahim Raza

Reputation: 1

<!-- html code : use attribute os-animation and give value fade = In, InUp, Left, Right -->
    <div os-animation="fadeInUp">content </div>
    <style> 
    .os-animation{opacity: 0;}
    .os-animation.animated {opacity: 1;}
    .animated{-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
    @-webkit-keyframes fadeIn{from{opacity: 0;}to{opacity: 1;}}
    @keyframes fadeIn{from{opacity: 0;}to{opacity: 1;}}
    .animated[os-animation="fadeIn"]{-webkit-animation-name:fadeIn; animation-name: fadeIn;}
    @-webkit-keyframes fadeInUp{from{opacity: 0;-webkit-transform: translate3d(0, 40px, 0);transform: translate3d(0, 40px, 0);} to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
    @keyframes fadeInUp{from{opacity: 0; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0);} to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
    .animated[os-animation="fadeInUp"]{-webkit-animation-name: fadeInUp;animation-name: fadeInUp;}
    @-webkit-keyframes fadeLeft{from{opacity: 0;-webkit-transform: translate3d(-100px, 0, 0);transform: translate3d(-100px, 0, 0);} to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
    @keyframes fadeLeft{from{opacity: 0; -webkit-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0);} to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
    .animated[os-animation="fadeLeft"]{-webkit-animation-name: fadeLeft;animation-name: fadeLeft;}
    @-webkit-keyframes fadeRight{from{opacity: 0;-webkit-transform: translate3d(100px, 0, 0);transform: translate3d(100px, 0, 0);} to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
    @keyframes fadeRight{from{opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0);} to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
    .animated[os-animation="fadeRight"]{-webkit-animation-name: fadeRight;animation-name: fadeRight;}
  </style>   
  <script>  
      const handleCardVisibility = () => {
      const cards = document.querySelectorAll('[os-animation]');
      const trigger = window.innerHeight * 0.9;
        cards.forEach(elm => {
          const rect = elm.getBoundingClientRect();
          elm.classList.add('os-animation');
          if (rect.top < trigger && !elm.classList.contains('animated')) {
            elm.classList.add('animated');
          } else if(!elm.classList.contains('animated')) {
            elm.classList.remove('animated');
          }
        });
      };
      window.addEventListener('scroll', handleCardVisibility);
      window.addEventListener('load', handleCardVisibility);
  </script>

Upvotes: 0

Rich
Rich

Reputation: 3336

Well there are lots of ways to do it, but jQuery works nicely.

You may find this and this helpful.

  $(window).scroll(function () {
    if($('body').scrollTop() > 110) {
      $('.box').css({
        'width': '50px',
        'height': '50px',
        'background': 'coral'
      });
    } else {
      $('.box').css({
        'width': '100px',
        'height': '100px',
        'background': 'red'
      });
    }
  });
body {
  padding-top: 175px;
  background: whitesmoke;
  height: 600px;
}

.box {
  margin-top: 150px;
  background: red;
  width: 100px;
  height: 100px;
  margin:  0 auto;
  transition: all .6s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">
</div>

Upvotes: 1

Julix
Julix

Reputation: 627

If you are using Wordpress, chances are you can buy a theme that includes very nice animations ready for use with a few options (say how fast it should occur or such) - similarly there are many neat animations on codepen and similar sites so maybe if you search long enough you could find and copy what you want.

However, if you really want to learn how to do that yourself, there's no short cuts and you have to start with understanding JavaScript and the capabilities of CSS3 animations and deeply, so you know which can do what.

CSS Transitions, CSS Animations, Simple JS animations

These are all w3school tutorials but there are many other resources out there. Start with something simple and work your way up.

Since you mentioned the behavior on scroll, the relevant JavaScript is

object.addEventListener("scroll", myScript);

Here's a simple use case to start.

Upvotes: 1

resting
resting

Reputation: 17467

Checkout WowJS.
And try going through their source code if you're curious about it works under the hood.

Otherwise its a pretty good library to get started with scroll animations.

Upvotes: 2

Johannes
Johannes

Reputation: 67738

Basically animations that are triggered by scrolling actions are Javascript / jQuery stuff (not CSS). There's a nice JS plugin which you can take a look at which helps to do all that: Scrollmagic, to be found here

Upvotes: 1

Related Questions