Reputation: 744

button bounce when scroll up & down

How do I make an element start bouncing based on the mouse scroll?

For example, if the user scroll bottom, the button gonna start bouncing from bottom to top, and if scrolling up, the button gonna bounce from top to bottom.

I think I need jQuery for this. Here's what I got so far regarding the HTML and CSS.

var oldscrolltop = 0;
$(window).scroll(function(event){
   var scrolltop = $(this).scrollTop();
   if (scrolltop > oldscrolltop){
       $( ".bounce-scroll" ).removeClass( "bounce-down" ).addClass( "bounce" );
   } else {
      $( ".bounce-scroll" ).removeClass( "bounce" ).addClass( "bounce-down" );
   }
   oldscrolltop= scrolltop;
});

.wrapper {
  padding: 50px;
}

#register-btn-2 a {
    color: #fff;
    border: 1px solid #CC68F8;
    padding: 5px 7px;
    border-radius: 5px;
    background: #CC68F8;
    display: inline-block;
}

.animated {
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: 5;
  -webkit-animation-iteration-count: 5;
}
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes bounce-down {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
  }
}
@keyframes bounce-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.bounce-down {
  -webkit-animation-name: bounce-down;
  animation-name: bounce-down;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  
  <p style="margin-bottom: 25px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae risus velit. Aenean consectetur lorem at nibh congue, eget tincidunt metus eleifend. Vivamus accumsan at orci vitae congue. Nunc non congue lorem, non hendrerit elit. Donec ullamcorper lacus quis placerat congue. Pellentesque diam quam, pretium sodales felis vitae, lobortis lobortis lectus. In ipsum nulla, efficitur vitae volutpat iaculis, viverra et urna. Quisque mollis, erat vel iaculis malesuada, diam ex pulvinar eros, nec dictum metus ex vel sapien. Nam eu nunc vestibulum, posuere erat eu, imperdiet diam. Vivamus condimentum eros in lorem suscipit congue. Nunc dignissim odio pretium dolor tempor congue. Aenean vitae odio ante. Aenean blandit iaculis nisl, ut commodo nisi porttitor in. Praesent ut eros faucibus, sagittis libero quis, bibendum nisi.

Pellentesque varius in massa sed pulvinar. Suspendisse nibh lacus, viverra ut ligula lobortis, interdum dapibus ligula. Integer augue ipsum, ornare vitae euismod ut, congue vel urna. Pellentesque eleifend augue nisi, pretium auctor sapien lobortis non. Vestibulum orci nunc, tristique ut lectus non, ultricies mollis massa. Etiam hendrerit eu sapien a suscipit. Pellentesque consectetur a odio vel egestas. Etiam maximus augue rhoncus vestibulum ultrices. Curabitur imperdiet leo ut volutpat congue. Morbi convallis suscipit tincidunt. Aenean eget molestie odio. Morbi efficitur felis eget aliquam vehicula. Suspendisse pellentesque urna vehicula, vulputate nunc ut, lacinia mi. Sed nec urna ut nulla elementum finibus nec id quam. Sed aliquet felis eget vehicula facilisis.

Fusce feugiat volutpat sollicitudin. Vestibulum euismod eleifend interdum. Phasellus sed congue magna, quis sodales dolor. Quisque dignissim congue ex eget placerat. Ut euismod placerat sem, at feugiat sapien volutpat vel. Sed eleifend ut lacus sed euismod. Vestibulum gravida mauris dapibus, gravida quam vitae, malesuada mauris. Donec ac nunc maximus, hendrerit ligula ac, dignissim leo. Sed pretium risus ut eros condimentum tempor.

Duis eu urna dolor. Fusce dolor lorem, lobortis dictum porttitor bibendum, posuere et neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In augue est, feugiat sit amet pretium id, egestas vel mi. Donec id libero augue. Vivamus ligula felis, ultrices sed porta eu, lacinia id lacus. Vivamus condimentum enim nec dui congue vehicula. Fusce at facilisis nisi. Aliquam mollis justo neque, mattis laoreet sem vehicula eget. Curabitur eros purus, mollis quis pellentesque in, consectetur nec nunc. Donec ac augue elit. Integer egestas, ipsum gravida eleifend auctor, enim massa condimentum purus, in facilisis enim lacus in nisl. Phasellus faucibus sollicitudin semper. Duis imperdiet nulla at augue posuere tempus.

Ut ut quam quis ex bibendum rutrum in eu orci. Nullam vestibulum quam ligula, sit amet pulvinar metus porttitor et. Donec ullamcorper tellus ornare justo interdum, quis facilisis elit vulputate. Curabitur urna orci, euismod sed viverra et, dictum a tellus. Duis sodales purus suscipit sapien sagittis, vitae rutrum ipsum tincidunt. Nullam pellentesque orci ut erat tristique, et interdum tortor dapibus. Nulla rhoncus, erat et sollicitudin pulvinar, enim quam malesuada urna, non vestibulum sapien dolor vel odio. Praesent rhoncus augue ac ante rutrum porta. Curabitur a nunc eget urna iaculis feugiat. Fusce a pellentesque metus, vel egestas mi. Fusce porttitor et metus vehicula posuere.</p>

  <div class="more-info-div">
    <p id="register-btn-2" class="bounce-scroll animated bounce" style="display: block; font-size: 16px; letter-spacing: 2px;"><a style="padding: 5px 40px;" target="_blank" rel="noopener">Coming Soon</a></p>
  </div>
  
   <p style="margin-bottom: 25px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae risus velit. Aenean consectetur lorem at nibh congue, eget tincidunt metus eleifend. Vivamus accumsan at orci vitae congue. Nunc non congue lorem, non hendrerit elit. Donec ullamcorper lacus quis placerat congue. Pellentesque diam quam, pretium sodales felis vitae, lobortis lobortis lectus. In ipsum nulla, efficitur vitae volutpat iaculis, viverra et urna. Quisque mollis, erat vel iaculis malesuada, diam ex pulvinar eros, nec dictum metus ex vel sapien. Nam eu nunc vestibulum, posuere erat eu, imperdiet diam. Vivamus condimentum eros in lorem suscipit congue. Nunc dignissim odio pretium dolor tempor congue. Aenean vitae odio ante. Aenean blandit iaculis nisl, ut commodo nisi porttitor in. Praesent ut eros faucibus, sagittis libero quis, bibendum nisi.

Pellentesque varius in massa sed pulvinar. Suspendisse nibh lacus, viverra ut ligula lobortis, interdum dapibus ligula. Integer augue ipsum, ornare vitae euismod ut, congue vel urna. Pellentesque eleifend augue nisi, pretium auctor sapien lobortis non. Vestibulum orci nunc, tristique ut lectus non, ultricies mollis massa. Etiam hendrerit eu sapien a suscipit. Pellentesque consectetur a odio vel egestas. Etiam maximus augue rhoncus vestibulum ultrices. Curabitur imperdiet leo ut volutpat congue. Morbi convallis suscipit tincidunt. Aenean eget molestie odio. Morbi efficitur felis eget aliquam vehicula. Suspendisse pellentesque urna vehicula, vulputate nunc ut, lacinia mi. Sed nec urna ut nulla elementum finibus nec id quam. Sed aliquet felis eget vehicula facilisis.

Fusce feugiat volutpat sollicitudin. Vestibulum euismod eleifend interdum. Phasellus sed congue magna, quis sodales dolor. Quisque dignissim congue ex eget placerat. Ut euismod placerat sem, at feugiat sapien volutpat vel. Sed eleifend ut lacus sed euismod. Vestibulum gravida mauris dapibus, gravida quam vitae, malesuada mauris. Donec ac nunc maximus, hendrerit ligula ac, dignissim leo. Sed pretium risus ut eros condimentum tempor.

Duis eu urna dolor. Fusce dolor lorem, lobortis dictum porttitor bibendum, posuere et neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In augue est, feugiat sit amet pretium id, egestas vel mi. Donec id libero augue. Vivamus ligula felis, ultrices sed porta eu, lacinia id lacus. Vivamus condimentum enim nec dui congue vehicula. Fusce at facilisis nisi. Aliquam mollis justo neque, mattis laoreet sem vehicula eget. Curabitur eros purus, mollis quis pellentesque in, consectetur nec nunc. Donec ac augue elit. Integer egestas, ipsum gravida eleifend auctor, enim massa condimentum purus, in facilisis enim lacus in nisl. Phasellus faucibus sollicitudin semper. Duis imperdiet nulla at augue posuere tempus.

Ut ut quam quis ex bibendum rutrum in eu orci. Nullam vestibulum quam ligula, sit amet pulvinar metus porttitor et. Donec ullamcorper tellus ornare justo interdum, quis facilisis elit vulputate. Curabitur urna orci, euismod sed viverra et, dictum a tellus. Duis sodales purus suscipit sapien sagittis, vitae rutrum ipsum tincidunt. Nullam pellentesque orci ut erat tristique, et interdum tortor dapibus. Nulla rhoncus, erat et sollicitudin pulvinar, enim quam malesuada urna, non vestibulum sapien dolor vel odio. Praesent rhoncus augue ac ante rutrum porta. Curabitur a nunc eget urna iaculis feugiat. Fusce a pellentesque metus, vel egestas mi. Fusce porttitor et metus vehicula posuere.</p>

</div>

Upvotes: 0

Answers (2)

ElusiveCoder

Reputation: 1609

var oldscrolltop = 0;
$(window).scroll(function(event){
   var scrolltop = $(this).scrollTop();
   if (scrolltop > oldscrolltop){
       var i=0;
       while (i<3) {
           $( ".bounce-scroll" ).removeClass( "bounce-down" ).addClass( "bounce" );
           i++;
       }
   } else {
       var i=0;
       while (i<3) {
           $( ".bounce-scroll" ).removeClass( "bounce" ).addClass( "bounce-down" );
           i++;
       }
   }
   oldscrolltop= scrolltop;
});

.wrapper {
  padding: 50px;
}

#register-btn-2 a {
    color: #fff;
    border: 1px solid #CC68F8;
    padding: 5px 7px;
    border-radius: 5px;
    background: #CC68F8;
    display: inline-block;
}

.animated {
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: 5;
  -webkit-animation-iteration-count: 5;
}
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes bounce-down {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
  }
}
@keyframes bounce-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.bounce-down {
  -webkit-animation-name: bounce-down;
  animation-name: bounce-down;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  
  <p style="margin-bottom: 25px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae risus velit. Aenean consectetur lorem at nibh congue, eget tincidunt metus eleifend. Vivamus accumsan at orci vitae congue. Nunc non congue lorem, non hendrerit elit. Donec ullamcorper lacus quis placerat congue. Pellentesque diam quam, pretium sodales felis vitae, lobortis lobortis lectus. In ipsum nulla, efficitur vitae volutpat iaculis, viverra et urna. Quisque mollis, erat vel iaculis malesuada, diam ex pulvinar eros, nec dictum metus ex vel sapien. Nam eu nunc vestibulum, posuere erat eu, imperdiet diam. Vivamus condimentum eros in lorem suscipit congue. Nunc dignissim odio pretium dolor tempor congue. Aenean vitae odio ante. Aenean blandit iaculis nisl, ut commodo nisi porttitor in. Praesent ut eros faucibus, sagittis libero quis, bibendum nisi.

Pellentesque varius in massa sed pulvinar. Suspendisse nibh lacus, viverra ut ligula lobortis, interdum dapibus ligula. Integer augue ipsum, ornare vitae euismod ut, congue vel urna. Pellentesque eleifend augue nisi, pretium auctor sapien lobortis non. Vestibulum orci nunc, tristique ut lectus non, ultricies mollis massa. Etiam hendrerit eu sapien a suscipit. Pellentesque consectetur a odio vel egestas. Etiam maximus augue rhoncus vestibulum ultrices. Curabitur imperdiet leo ut volutpat congue. Morbi convallis suscipit tincidunt. Aenean eget molestie odio. Morbi efficitur felis eget aliquam vehicula. Suspendisse pellentesque urna vehicula, vulputate nunc ut, lacinia mi. Sed nec urna ut nulla elementum finibus nec id quam. Sed aliquet felis eget vehicula facilisis.

Fusce feugiat volutpat sollicitudin. Vestibulum euismod eleifend interdum. Phasellus sed congue magna, quis sodales dolor. Quisque dignissim congue ex eget placerat. Ut euismod placerat sem, at feugiat sapien volutpat vel. Sed eleifend ut lacus sed euismod. Vestibulum gravida mauris dapibus, gravida quam vitae, malesuada mauris. Donec ac nunc maximus, hendrerit ligula ac, dignissim leo. Sed pretium risus ut eros condimentum tempor.

Duis eu urna dolor. Fusce dolor lorem, lobortis dictum porttitor bibendum, posuere et neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In augue est, feugiat sit amet pretium id, egestas vel mi. Donec id libero augue. Vivamus ligula felis, ultrices sed porta eu, lacinia id lacus. Vivamus condimentum enim nec dui congue vehicula. Fusce at facilisis nisi. Aliquam mollis justo neque, mattis laoreet sem vehicula eget. Curabitur eros purus, mollis quis pellentesque in, consectetur nec nunc. Donec ac augue elit. Integer egestas, ipsum gravida eleifend auctor, enim massa condimentum purus, in facilisis enim lacus in nisl. Phasellus faucibus sollicitudin semper. Duis imperdiet nulla at augue posuere tempus.

Ut ut quam quis ex bibendum rutrum in eu orci. Nullam vestibulum quam ligula, sit amet pulvinar metus porttitor et. Donec ullamcorper tellus ornare justo interdum, quis facilisis elit vulputate. Curabitur urna orci, euismod sed viverra et, dictum a tellus. Duis sodales purus suscipit sapien sagittis, vitae rutrum ipsum tincidunt. Nullam pellentesque orci ut erat tristique, et interdum tortor dapibus. Nulla rhoncus, erat et sollicitudin pulvinar, enim quam malesuada urna, non vestibulum sapien dolor vel odio. Praesent rhoncus augue ac ante rutrum porta. Curabitur a nunc eget urna iaculis feugiat. Fusce a pellentesque metus, vel egestas mi. Fusce porttitor et metus vehicula posuere.</p>

  <div class="more-info-div">
    <p id="register-btn-2" class="bounce-scroll animated bounce" style="display: block; font-size: 16px; letter-spacing: 2px;"><a style="padding: 5px 40px;" target="_blank" rel="noopener">Coming Soon</a></p>
  </div>
  
   <p style="margin-bottom: 25px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae risus velit. Aenean consectetur lorem at nibh congue, eget tincidunt metus eleifend. Vivamus accumsan at orci vitae congue. Nunc non congue lorem, non hendrerit elit. Donec ullamcorper lacus quis placerat congue. Pellentesque diam quam, pretium sodales felis vitae, lobortis lobortis lectus. In ipsum nulla, efficitur vitae volutpat iaculis, viverra et urna. Quisque mollis, erat vel iaculis malesuada, diam ex pulvinar eros, nec dictum metus ex vel sapien. Nam eu nunc vestibulum, posuere erat eu, imperdiet diam. Vivamus condimentum eros in lorem suscipit congue. Nunc dignissim odio pretium dolor tempor congue. Aenean vitae odio ante. Aenean blandit iaculis nisl, ut commodo nisi porttitor in. Praesent ut eros faucibus, sagittis libero quis, bibendum nisi.

Pellentesque varius in massa sed pulvinar. Suspendisse nibh lacus, viverra ut ligula lobortis, interdum dapibus ligula. Integer augue ipsum, ornare vitae euismod ut, congue vel urna. Pellentesque eleifend augue nisi, pretium auctor sapien lobortis non. Vestibulum orci nunc, tristique ut lectus non, ultricies mollis massa. Etiam hendrerit eu sapien a suscipit. Pellentesque consectetur a odio vel egestas. Etiam maximus augue rhoncus vestibulum ultrices. Curabitur imperdiet leo ut volutpat congue. Morbi convallis suscipit tincidunt. Aenean eget molestie odio. Morbi efficitur felis eget aliquam vehicula. Suspendisse pellentesque urna vehicula, vulputate nunc ut, lacinia mi. Sed nec urna ut nulla elementum finibus nec id quam. Sed aliquet felis eget vehicula facilisis.

Fusce feugiat volutpat sollicitudin. Vestibulum euismod eleifend interdum. Phasellus sed congue magna, quis sodales dolor. Quisque dignissim congue ex eget placerat. Ut euismod placerat sem, at feugiat sapien volutpat vel. Sed eleifend ut lacus sed euismod. Vestibulum gravida mauris dapibus, gravida quam vitae, malesuada mauris. Donec ac nunc maximus, hendrerit ligula ac, dignissim leo. Sed pretium risus ut eros condimentum tempor.

Duis eu urna dolor. Fusce dolor lorem, lobortis dictum porttitor bibendum, posuere et neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In augue est, feugiat sit amet pretium id, egestas vel mi. Donec id libero augue. Vivamus ligula felis, ultrices sed porta eu, lacinia id lacus. Vivamus condimentum enim nec dui congue vehicula. Fusce at facilisis nisi. Aliquam mollis justo neque, mattis laoreet sem vehicula eget. Curabitur eros purus, mollis quis pellentesque in, consectetur nec nunc. Donec ac augue elit. Integer egestas, ipsum gravida eleifend auctor, enim massa condimentum purus, in facilisis enim lacus in nisl. Phasellus faucibus sollicitudin semper. Duis imperdiet nulla at augue posuere tempus.

Ut ut quam quis ex bibendum rutrum in eu orci. Nullam vestibulum quam ligula, sit amet pulvinar metus porttitor et. Donec ullamcorper tellus ornare justo interdum, quis facilisis elit vulputate. Curabitur urna orci, euismod sed viverra et, dictum a tellus. Duis sodales purus suscipit sapien sagittis, vitae rutrum ipsum tincidunt. Nullam pellentesque orci ut erat tristique, et interdum tortor dapibus. Nulla rhoncus, erat et sollicitudin pulvinar, enim quam malesuada urna, non vestibulum sapien dolor vel odio. Praesent rhoncus augue ac ante rutrum porta. Curabitur a nunc eget urna iaculis feugiat. Fusce a pellentesque metus, vel egestas mi. Fusce porttitor et metus vehicula posuere.</p>

</div>

Upvotes: 0

ElusiveCoder

Reputation: 1609

You can do it by Checking current scrollTop vs previous scrollTop, see below

var oldscrolltop = 0;
$(window).scroll(function(event){
   var scrolltop = $(this).scrollTop();
   if (scrolltop > oldscrolltop){
       // downscroll code for adding downscroll class
   } else {
      // upscroll code for adding upscroll class
   }
   oldscrolltop= scrolltop;
});

Upvotes: 1

button bounce when scroll up &amp; down

Answers (2)

Related Questions

button bounce when scroll up & down