記事公開日

scrollReveal.jsが画面からはみ出て、アニメーションが終わるまでレスポンシブデザインが崩れるときの対処法

お客さん

スマホで見ると、scrollReveal.jsが画面からはみ出ることがあるの。

どうやら、distanceで横から出てくる動きを指定すると、発生する感じ。

アニメーションが終わると、元に戻るんだけど・・・

その間、レスポンシブデザインが崩れてるのが気になってて。

隊員1号

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>
この記事のURLをコピー

メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

関連情報

scrollReveal.jsに関連する最近の記事

運営者プロフィール
運営者のプロフィール画像
隊員1号

IT系フリーランスとして10年の経験を持つレスキュー隊。HTML・CSS・JS・PHPなど幅広いスキルを持つ。

詳しいプロフィール