画面スクロールで背景色が伸びるのをJavaScriptで実装する方法

1993 回閲覧されました

公開日 : 2022年7月27日
最終更新日 : 2022年11月23日

みなさんこんにちは、WEB制作のエンジニアのjonioです。

今回は画面をスクロールするとテキストの上に背景色が左から現れ伸び切ったら背景色が消えてテキストが浮かび上がるのをJavaScriptで実装する方法を解説します。

実装内容とデモページ

画面をスクロールするとテキストの上にまず背景色が左から現れて右まで伸び切ります。

そして背景色が消えるタイミングで文字が浮かび上がります。

デモページはここから見ることができます。

それではコードの解説をしますがHTML・CSS の部分のみ解説をしてJavaScriptの解説がメインになります。

HTMLのコードを↓にします。

CSSのコードを↓にします。

それではJavaScriptの解説です。

画面をスクロールした時に考えるのでコードを↓にします。

まずは背景色が左から現れて右端まで動いたら消えるのを実装します。

HTMLの「背景色が左から右に伸びて出現」と書いてある部分が現れる前に背景色が現れるのですがそのための記述をします。

JavaScriptのコードを↓にします。

6行目〜13行目でスクロールの量を習得してスクロールして画面の中に現れたら左から背景色が現れて右端まで動いて消えるようにしています。

スクロール量の習得に関する解説は↓の記事で解説しているので気になる人はそれを見てください。

背景色が左から現れて右端まで動いたら消えるための記述はcssの32行目〜61行目と1行目〜16行目ですが背景色が左から現れて右端まで動くための記述が32行目〜61行目で背景色が消えるための記述が1行目〜16行目です。

14行目〜16行目はスクロールした時に対象が画面内に入ってない時は背景色を動かさないための記述ですが背景色を動かすためのcssを外すことによって動きを止めています。

最後は背景色が消えた後にテキストが現れる様にするための記述です。

コードを↓にします。

考え方は背景色が動く時と同じです。

画面内にない時はテキストが浮かび上がるためのcss（17行目〜31行目）を外すことでテキストが消えた状態にします。

これで完成です。