Добавить и удалить несколько классов для элемента в прокрутке, реверсивной анимации

Question

Я анимация отскока в действии к элементу, когда пользователь прокручивается до определенной точки страницы. У меня это работает, добавив класс, а затем удалив его в этот момент. Тем не менее, у меня есть еще одна отскоковая анимация, которая обратная. Я хочу, чтобы элемент отскакивал, когда пользователь прокручивает резервную копию. Итак, я хочу добавить прокрученные и длинные классы при прокрутке, а затем, когда пользователь прокручивает назад, я хочу добавить классы «продолжительность» и «не прокрученные».

Вот простой вариант:

$(window).scroll(function(){ 
 
      if ($(window).scrollTop() > 200){ 
 
       $('.bounce-square').addClass('duration scrolled'); 
 
      } 
 
      else{ 
 
      $('.bounce-square').removeClass('duration scrolled'); 
 
      //$('.bounce-square').addClass('duration not-scrolled'); 
 
      } 
 
     });

.bounce-square{ 
 
    background-color: red; 
 
    height: 100px; 
 
    width: 100px; 
 
    position: fixed; 
 
    top: 15%; 
 
    left: 15%; 
 
    opacity: 0; 
 
} 
 

 
.scrolled{ 
 
    opacity: 1; 
 
    animation-name: bounceIn; 
 
} 
 

 
.not-scrolled{ 
 
    animation-name: bounceOut; 
 
} 
 

 
.duration{ 
 
    animation-duration: .75s; 
 
} 
 

 
@keyframes bounceIn { 
 
    from, 20%, 40%, 60%, 80%, to { 
 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    } 
 

 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: scale3d(.3, .3, .3); 
 
    transform: scale3d(.3, .3, .3); 
 
    } 
 

 
    20% { 
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1); 
 
    transform: scale3d(1.1, 1.1, 1.1); 
 
    } 
 

 
    40% { 
 
    -webkit-transform: scale3d(.9, .9, .9); 
 
    transform: scale3d(.9, .9, .9); 
 
    } 
 

 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: scale3d(1.03, 1.03, 1.03); 
 
    transform: scale3d(1.03, 1.03, 1.03); 
 
    } 
 

 
    80% { 
 
    -webkit-transform: scale3d(.97, .97, .97); 
 
    transform: scale3d(.97, .97, .97); 
 
    } 
 

 
    to { 
 
    opacity: 1; 
 
    -webkit-transform: scale3d(1, 1, 1); 
 
    transform: scale3d(1, 1, 1); 
 
    } 
 
} 
 

 
@keyframes bounceOut { 
 
    20% { 
 
    -webkit-transform: scale3d(.9, .9, .9); 
 
    transform: scale3d(.9, .9, .9); 
 
    } 
 

 
    50%, 55% { 
 
    opacity: 1; 
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1); 
 
    transform: scale3d(1.1, 1.1, 1.1); 
 
    } 
 

 
    to { 
 
    opacity: 0; 
 
    -webkit-transform: scale3d(.3, .3, .3); 
 
    transform: scale3d(.3, .3, .3); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bounce-square"></div> 
 
<p>Please scroll a little</p> 
 
<div style="height: 3000px"></div>

Я закомментировал одну строку JavaScript, что я думал, что будет работать.

Я пробовал сочетание toggleclass и удаления/добавления классов в разных точках, но ничего не работает так, как я себе представляю.

Буду признателен за любую помощь в этом.

Fiddle здесь: https://jsfiddle.net/hbndag6L/1/

Спасибо.

Answer 1

Переадресация логики добавления и удаления приближается к желаемому эффекту. Отсюда вы можете настроить css для повышения.

var bounce = $('.bounce-square'); 
 
bounce.addClass('duration'); 
 

 
$(window).scroll(function() { 
 
    if ($(window).scrollTop() > 200) { 
 
    bounce.removeClass('not-scrolled'); 
 
    bounce.addClass('scrolled'); 
 
    } else { 
 
    if (bounce.hasClass('scrolled')) { 
 
     bounce.removeClass('scrolled'); 
 
     bounce.addClass('not-scrolled'); 
 
    } 
 
    } 
 
});

.bounce-square { 
 
    background-color: red; 
 
    height: 100px; 
 
    width: 100px; 
 
    position: fixed; 
 
    top: 15%; 
 
    left: 15%; 
 
    opacity: 0; 
 
} 
 
.scrolled { 
 
    opacity: 1; 
 
    animation-name: bounceIn; 
 
} 
 
.not-scrolled { 
 
    animation-name: bounceOut; 
 
} 
 
.duration { 
 
    animation-duration: .75s; 
 
} 
 
@keyframes bounceIn { 
 
    from, 20%, 40%, 60%, 80%, to { 
 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    } 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: scale3d(.3, .3, .3); 
 
    transform: scale3d(.3, .3, .3); 
 
    } 
 
    20% { 
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1); 
 
    transform: scale3d(1.1, 1.1, 1.1); 
 
    } 
 
    40% { 
 
    -webkit-transform: scale3d(.9, .9, .9); 
 
    transform: scale3d(.9, .9, .9); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: scale3d(1.03, 1.03, 1.03); 
 
    transform: scale3d(1.03, 1.03, 1.03); 
 
    } 
 
    80% { 
 
    -webkit-transform: scale3d(.97, .97, .97); 
 
    transform: scale3d(.97, .97, .97); 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    -webkit-transform: scale3d(1, 1, 1); 
 
    transform: scale3d(1, 1, 1); 
 
    } 
 
} 
 
@keyframes bounceOut { 
 
    20% { 
 
    -webkit-transform: scale3d(.9, .9, .9); 
 
    transform: scale3d(.9, .9, .9); 
 
    } 
 
    50%, 
 
    55% { 
 
    opacity: 1; 
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1); 
 
    transform: scale3d(1.1, 1.1, 1.1); 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    -webkit-transform: scale3d(.3, .3, .3); 
 
    transform: scale3d(.3, .3, .3); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bounce-square"></div> 
 
<p>Please scroll a little</p> 
 
<div style="height: 3000px"></div>