ユーザーがページの特定のポイントにスクロールすると、その要素にバウンス効果が適用されます。私はクラスを追加し、この時点でそれを削除することによって、この作業をしています。しかし、私は逆のアニメーションをもう一度出す。私は、ユーザーがスクロールして戻ったときにバウンスする要素にしたい。したがって、スクロールするときに「スクロール」クラスと「継続時間」クラスを追加し、ユーザーがスクロールしたときに、「期間」と「スクロールしない」クラスを追加します。私は私が仕事だろうと思ったの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/
感謝。
おかげで、素晴らしい仕事しました! – Jenn