スクロール中の要素に複数のクラスを追加して削除し、アニメーションを反転させます。

Question

ユーザーがページの特定のポイントにスクロールすると、その要素にバウンス効果が適用されます。私はクラスを追加し、この時点でそれを削除することによって、この作業をしています。しかし、私は逆のアニメーションをもう一度出す。私は、ユーザーがスクロールして戻ったときにバウンスする要素にしたい。したがって、スクロールするときに「スクロール」クラスと「継続時間」クラスを追加し、ユーザーがスクロールしたときに、「期間」と「スクロールしない」クラスを追加します。私は私が仕事だろうと思ったのJavascriptの1行をコメントアウトしまし

$(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>

：

は簡単なバージョンです。

私はトグルクラスを混ぜて試してみましたが、異なるポイントでクラスを削除したり追加したりしていますが、想像通りのことは何もありません。

私はこれに助けていただきありがとうございます。ここ

フィドル：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>