- 記事公開日
scrollReveal.jsが画面からはみ出て、アニメーションが終わるまでレスポンシブデザインが崩れるときの対処法
スマホで見ると、scrollReveal.jsが画面からはみ出ることがあるの。
どうやら、distanceで横から出てくる動きを指定すると、発生する感じ。
アニメーションが終わると、元に戻るんだけど・・・
その間、レスポンシブデザインが崩れてるのが気になってて。
CSSで「overflow:hidden;」として、領域をはみ出した部分を非表示にすることで解決します。
サンプルはこちらです↓
main {
width:100%;
overflow:hidden;
}<body>
<main>
<div class="motion">動く文字</div>
</main>
<script src="./js/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({ reset: false ,mobile: true});
sr.reveal( '.motion', {
origin: 'left',
distance: '1000px',
});
</script>
</body>
