無限スクロールのように繰り返す要素の表示、非表示の際のエフェクトです。スクロールに合わせた表示、非表示はjQuryを使用し、エフェクトはCSSで行っています。サンプルは、同じサイズの8種類のブルーのボックスが縦に並び、それぞれ別なエフェクトで、ページのスクロールに合わせて表示、非表示します。確認用に同じ要素が4度繰り返すようにしてあります(無限スクロールではありません)。

バウンス(はずみながら)イン
左からバウンスイン
右からバウンスイン
フェードイン
フェードイン・ダウン
フェードイン・アップ
ムーブアップ
フェード・背景色
バウンス(はずみながら)イン
左からバウンスイン
右からバウンスイン
フェードイン
フェードイン・ダウン
フェードイン・アップ
ムーブアップ
フェード・背景色
バウンス(はずみながら)イン
左からバウンスイン
右からバウンスイン
フェードイン
フェードイン・ダウン
フェードイン・アップ
ムーブアップ
フェード・背景色
バウンス(はずみながら)イン
左からバウンスイン
右からバウンスイン
フェードイン
フェードイン・ダウン
フェードイン・アップ
ムーブアップ
フェード・背景色
引用と参考;https://codepen.io/Electrikeup/pen/aLdoNB
戻るボタン