CODEWITHSUNDEEP
javascripthtml
Jane Doe
Jane Doe

Reputation: 302

How to bounce animation when scroll?

I have this .png that I wanted to make it bounce a little every time it detects a scroll movement but I'm not good in javascript and css. I hope you guys can help me

<div class="arrownav bounce">
  <a href="" class="logo">
    <img src="{{ asset('assets/img/arrow down.png') }}" height="45">
  </a>
</div>

I am now using a css that made the image bounce
this is the code:

  .bounce {
    -webkit-animation:bounce 1s infinite;
    -moz-animation:bounce 1s infinite;
    -o-animation:bounce 1s infinite;
    animation:bounce 1s infinite;

  }

  @-webkit-keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }

   @-moz-keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }

   @-o-keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }

   @keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }

Upvotes: 1

Views: 4746

Answers (1)

Fabian Lauer
Fabian Lauer

Reputation: 9897

The first thing I noticed is the missing unit in all @keyframes, right here:

100%     {bottom:30;}

This should be:

100%     { bottom:30px; }

You've used the bottom style in you animation, which is perfectly fine, but in order for it to work the element's position needs to be either relative, absolute or fixed (more here).

.bounce {
    position: relative;
    -webkit-animation: bounce 1s infinite;
    -moz-animation: bounce 1s infinite;
    -o-animation: bounce 1s infinite;
    animation: bounce 1s infinite;
}

Here's a working fiddle.

Bonus Another way to change the element's position in the animation is the transform style, instead of using bottom. When you use transform, you don't need position: relative;.

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(-30px);
  }
}

Fiddle

Upvotes: 2

Related Questions