- TOP >
- 制作覚書 >
- デザインコーディング >
- スクロールに応じて要素をフェードインやスライドインさせるアニメーション
- 制作覚書
スクロールに応じて要素をフェードインやスライドインさせるアニメーション 「Animate.css」+「ScrollTrigger」
スクロールしていくと動的に要素が表示されるアニメーションを実装。
アニメーション用CSS「Animate.css」と、JAVAscript「ScrollTrigger」を組み合わせて設定。
① アニメーション用CSS「Animate.css」
クラス名を指定するだけで、簡単にアニメーションが実装できる便利なスタイルシート。それ単体で出来るのは「ページを読み込んだ瞬間にアニメーションする」ところまで。
スクロールに応じてアニメーションをさせるためには、JavaScript上で一工夫が必要。
ダウンロードするかajaxで実装。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
② JAVAscript「ScrollTrigger」
ページのスクロールに連動して様々なエフェクトで要素が表示されていくJS。
ダウンロードして「ScrollTrigger.min.js」を実装。
<script type="text/javascript" src="js/ScrollTrigger.min.js"></script>
③ 実装
HTML
<ul> <li>Scroll !!</li> </ul> <div class="scroll_box animated" data-scroll="once toggle(.bounceInDown, .invisible) addHeight">bounceInDown</div> <div class="scroll_box animated" data-scroll="once toggle(.bounceInLeft, .invisible) addHeight">bounceInLeft</div> <div class="scroll_box animated" data-scroll="once toggle(.bounceInRight, .invisible) addHeight">bounceInRight</div> <div class="scroll_box animated" data-scroll="once toggle(.bounceInUp, .invisible) addHeight">bounceInUp</div> <div class="scroll_box animated" data-scroll="once toggle(.flash, .invisible) addHeight">flash</div> <div class="scroll_box animated" data-scroll="once toggle(.lightSpeedIn, .invisible) addHeight">lightSpeedIn</div> <div class="scroll_box animated" data-scroll="once toggle(.rotateInDownRight, .invisible) addHeight">rotateInDownRight</div> <div class="scroll_box animated" data-scroll="once toggle(.rotateIn, .invisible) addHeight">rotateIn</div> <div class="scroll_box animated" data-scroll="once toggle(.jackInTheBox, .invisible) addHeight">jackInTheBox</div> <div class="scroll_box animated" data-scroll="once toggle(.rollIn, .invisible) addHeight">rollIn</div>
CSS
ul { width: 100%; height: 100vh; position: relative; background-color: #fabe00; text-align: center; } li { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); color: #fff; font-size: 36px; font-weight: 700; font-family: 'Open Sans', sans-serif; } .scroll_box { width: 600px; height: 300px; line-height: 300px; margin: 500px auto; text-align: center; color: #fff; font-size: 36px; font-family: 'Open Sans', sans-serif; background-color: #fabe00; } .invisible { transition: opacity 0.5s ease; opacity: 0.0; } .visible { transition: opacity 0.5s ease; opacity: 1.0; }
JavaScript
<script> document.addEventListener('DOMContentLoaded', function(){ var trigger = new ScrollTrigger({ toggle: { visible: 'visibleClass', hidden: 'hiddenClass' }, offset: { x: 0, y: 20 }, addHeight: true, once: true }, document.body, window); }); </script>