Question

如何根据鼠标滚动使元素开始弹跳？

例如，如果用户滚动底部，则按钮将开始从底部弹到顶部，如果滚动向上，则按钮将从顶部弹到底部。

我想我需要jQuery。这是到目前为止我对HTML和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>

Answer 1

您可以通过检查当前的scrollTop和上一个的scrollTop来做到这一点，见下文

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;
});

Answer 2

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>

上下滚动按钮弹跳

2 个答案: