Is there a way to create an element that bounces based on the user's scroll direction?
For instance, if the user scrolls down, the button should bounce from bottom to top, and if scrolling up, the button should bounce from top to bottom.
I have been considering using jQuery for this effect. Below is my current progress with the HTML and CSS styling:
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.......
..........voluptate. Fusce at facilisis nisi ...........Ut ut quam quis ex bibendum rutrum in eu orci.</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......
.........voluptate. Fusce at facilisis nisi.......Ut ut quam quis ex bibendum rutrum in eu orci.</p>
</div>