【第3回】jQueryを使ってナビと背景画像を動かす

ランディングページ制作

この記事ではjQueryを用いてヘッダーナビや背景画像に動きを加えるようにしていきます。

See the Pen eYYRBdd by yoshitaka (@tamtam777) on CodePen.

これがあると、ランディングページな感じがしますよね!実際、スクロール時やクリック時に動きがあるとイケてる感(語彙力がなくてすみません)があります!

jQueryとは?〜ライブラリとフレームワークの違い〜

今回はJQueryを使って実装していきます。JQueryとはJavaScriptのプログラム機能をまとめたライブラリになります。ライブラリとは何だというと、便利なプログラムのまとめたものです。

例えると家電みたいなものですね。「冷蔵」「冷凍」というプログラムをまとめた冷蔵庫、「受信」や「表示」をまとめたテレビといったものでしょうか。

フレームワークとの違いは、ライブラリはあくまで単体のプログラムの一部であることで、フレームワークは一連の流れにて必要なものをまとめたプログラム群になります。

※結構混在して使われていることも多いです。

jQueryを用いることで、簡単にJavaScriptが実装できるようになっています。ただ、最近ではReactというフレームワークも台頭してきており、こちらはまた別の機会に紹介しますね。

jQueryを利用するには、HTML上でjQueryを読み込むことをマークアップしないといけません。そうでないと、CSSやその他プログラム同様、HTMLさんが認識してくれません。方法としては、jQueryのファイルをダウンロードしてどこかのフォルダに格納し参照させるか、Googleなどの別サーバーで用意しているものURLから参照させるかです。以下のようにHTML内に記載して、利用できるようにします。

そのあとは、書いていくわけですが、JavaScriptと同じ考え方で大丈夫です。HTML上に直接記載も可能ですし、別ファイルにて記載することも可能です。基本法則として「指示をして何かを変更させる」ことになります。

基本的な記載になり、実際には様々なメソッドの記載方法やfunctionを複数用いる場合もあります。メソッドはweb上でも多く情報がありますので、都度調べていきながら覚えていきましょう。

今回のヘッダーナビの動きを分解していくと以下になります。

  1. クリックにて表示箇所が伸びる
  2. 各ナビにクリックすると表示箇所が短くなる(元に戻る)
  3. クリックした該当ページにスクロール移動する

この動きを分解するというのは、プログラミング学習では大事なので、改めて整理しました。

それでは実際にJavaScriptを書いていきたいと思います。今回ですと、以下のようになります。

先ほど分解した動きをそれぞれ記載しています。HTML同様に上から実行されていきますので、①と②が逆ですとナビ箇所が戻らないので気をつけてください。

あとは、CSSにも変更後のデザインも施して完成です。

透過設定を動かして背景を差し替える

次は背景のフェード表示になります。こちらもjQueryにて実装していきます。動きを分解すると以下になります。

  1. スクロール中に該当箇所が表示される
  2. 背景画像が切り替わる

細かすぎるかもしれませんが、最初のうちはできるとこまで細かく分解して考えれば良いかなと思います。

さて、このフェードイン・フェードアウトする動きもCSSで実装しています。CSSとjQueryの組み合わせになるんですね。

仕組みとしては、opacityで透明にしておき、該当箇所がきた時点で不透明になるといった形です。

“該当箇所がきた時点”ではshowを実装しています。ただ、このshowというクラス。最初はありません。こちらをjQueryでスクロールしたら加えるようにしています。

これでランディングページの完成です!見たことがあるような動きがついており、ちゃんとした告知ページになったかと思います!

色々作ってレパートリーを増やそう!

今回紹介した機能以外にも様々な調整が施されています。

特に位置関係の調整が多く、「都度調整しないといけないのか」と思う人もいるかもしれません。そうなると結構、大変ですよね。基本的には流用していくのが効率良いと思います。

なので、いろんな形のサイトを作っていき、その際に必要なものは過去のものから流用していくと、どんどん表現の幅が広がっていくます。

色々座学で覚えるよりもどんどん作った方が良いと言われるのは
このサイクルが効果的だからだと思います

どんどんいろんなサイトを作って、色々楽しんでいきましょう。Enjoy prgraming!

コメント

タイトルとURLをコピーしました