スクロール時に背景色が左右から伸びる方法をjQueryで実装
957 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回は画面をスクロールした時に背景色が右から左にのびるのをjQueryで実装する方法について解説します。
なるべく理解した方がいいですが最悪コピペでもできますのでぜひサイトに実装してください。
それでは解説します。
実装内容
画面をスクロールするとまず背景色が右から左に現れて少し遅れて文字が現れます。
背景色と文字が現れるのはクラスを付け足すことで実装しています。
それではコードの説明をしますがHTMLは簡単なので説明しません。
CSSは必要な内容のみ説明してjQueryの説明を中心にします。
HTMLとCSS
HTMLは↓です。
CSSは↓です。
2行目〜70行目はreset.cssですがサイトを作る時は必ず入れます。
私と同じ内容でなくてもいいので記述してください。
それではjQueryですが順を追って説明します。
jQuery
まずは背景色が右から現れるのから解説しますが設定の部分です。
コードを↓にします。
2行目で「BgFadeAnime()」関数にしているのは同じ操作を背景色と文字に対して行うのですが同じコードを2回書くのはコードが汚くなるからです。
3行目で「.each( )」を使っているのは今回は説明なので1つの要素に対しての操作ですが通常は1つの要素だけではなく複数の要素に対して同じ操作をするからです。
4行目の「$(this).offset().top」は画面左上から要素までの距離で、「-50」で位置の調節をしています。
6行目の「$(window).scrollTop()」はスクロールした量です。
8行目の「$(window).height()」はパソコンの画面の高さです。
次は今設定した内容を満たした時に背景色が現れるためのコードを追加しますがコードを↓にします。
12行目ですが「対象の要素がパソコンの画面で見えたら」という意味です。
パソコンの画面に見えたら13行目で「bgRLextend」クラスを付けることで背景色が右から左に動くのを実現します。
「bgRLextend」クラスはCSSの111行目〜137行目ですがkeyframesで動かしています。
keyframesだけだと対象の要素の背景色が右から左に画面一杯に広がりますがCSSの83行目を使って文字がある部分の上だけ背景色が右から左に動くようにします。
15行目は（画面を上にスクロールして）対象の要素が画面から見えなくなったら「bgRLextend」クラスを外すことで背景色が左から右に戻るという意味です。
次は文字に関してですが背景色の時と考え方が全く同じなのでコードのみ記載しますが↓です。
これで画面をスクロールした時に背景色と文字が現れるのを関数化したので実行できるようにするためにコードを↓にします。
31行目の「$(window).scroll」は画面をスクロールした時という意味です。
これで完成ですが最後にjQueryの完成形のコードを載せます。