JavaScript 実践講座:パララックスアニメーション

ページ内スムーズスクロールの実装

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webページ内において、ボタンをクリックすることによって、スムーズにページをスクロールさせて該当箇所に移動する機能を実装する方法について解説致します。
講師:
06:50

字幕

このレッスンでは Web ページ内において ボタンをクリックすることによって スムーズにページをスクロールさせて 該当箇所に移動する機能を実装する 方法について解説いたします まずはダウンロードしてきたこちらの smooth_scrolling というフォルダの中に入っている こちらの js フォルダの中にある この script.js ファイル そしてその上の階層にある index.html ファイルを エディタで開いてください そしてこれがそれらの ファイルを開いた状態です これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう まずはこちらの index.html ファイルをブラウザで開いて 今回実装する内容を 確認してみたいと思います これがその index.html ファイルを 開いた状態ですね それではまず こちらの Webページを 下に少しスクロールダウンします そうするとこの様に前回までの レッスンで実装した ヘッダーメニューが表示されてきますね 今回はこちらのボタンをクリック した時にページ内の該当箇所に スムーズにスクロールする方法 について見ていきます 例えばこちらの「イベント情報」を クリックすると― このようになめらかにスクロール するようなかたちで 「イベント情報」のボックスが 表示されてきましたね 今回はこの方法についてみていきます それではエディタに戻ります そして今回注目していただきたい場所は こちらの script.js ファイルの中の 一番下の部分 こちらの部分となります それでは順番にみていきましょう まずはこちらの部分から まず $('nav a, p#toTop a'). と書いて on と書いて ('click', そしてその後に function と書いていきます まずこちらの on の前部分のこの部分ですが この部分でイベントを登録したい 要素を指定します 今回はこの nav タグの中の a タグ そしてもう一つは ID toTop がついた p タグの中にある a タグに対してイベントを登録します この nav タグの中の a タグというのは ヘッダーメニューのリンクのことです そしてこちらの ID toTopがついた p タグの中の a タグというのは ページ最下部にある ページ上部に戻るためのリンクです そしてそれに対して on そしてこの中に click と書いて クリックイベントを登録するわけです そしてそこまでできたら こちらの function の中の波括弧の間に そのクリックイベントに登録したい 実際の処理を書いていきます まずは $(this). blur() ; と書いてクリックした時に その a タグにフォーカスが当たるのを 防止しています そして少し飛ばして一番最後 こちらの部分ですね return false; この部分は a タグをクリックした時に 発生する本来の機能を無効化しています そしてこの blur と return false の間に そのスムーズスクロールの機能を 実装していきます まず 変数 target というものを作成します そしてその中に click された a タグの href 要素の値を代入します ここでその a タグに設定されている href の値内容を確認しておきましょう index.html の方をエディタで確認します そしてnav タグの中の a タグ の部分に注目してみましょう こちらの部分ですね こちらのa タグの中で href ="#box1" と指定していますね そして例えばこちらの施設案内の a タグに関しては href="#box2" と指定しています そのようなかたちでイベント情報は "#box3" そしてお問い合わせは "#box4" としています これはこれまでのレッスンで やってきたとおり #box1 というのはこちらの section タグの ID を指し示しています この #box2 や #box3 も同じですね 要するにページ内アンカーを 設定するような形で この href に値を設定しています そしてページの最下部にある ページ上部まで戻るというボタン こちらの部分ですね こちらの部分も同様に a タグの href 属性には #box1 と書いていますね 先ほどの section に設定していた ID の値です これを踏まえた上で 先ほどの script.js の方に戻ります そうして取得してきたこの変数 target を使って次は この target に格納されている box1 や box2 の ID がついた section の位置を求めていきます まずは変数 targetPos というのを作って その中に $(target) 先ほど設定した こちらの変数の target ですね の offset().top; と書きます こうすることで box1 や box2 の ID が設定された section の ページ内での縦位置を求めることができます それをこの targetPos という変数に格納するわけですね そして最後に この targetPos の変数を使って 実際にスムーズスクロールを 発生させる処理をかけます それが最後のこちらの一行となります まず $('html, body') と書いて animate(); と書きます そしてその animate の中には さらに{}と書いてその中に scrollTop: の先ほど設定した targetPos という変数を書きます このようにすることで ブラウザの表示領域の上辺と この targetPos に格納されている 縦位置のところまで アニメーションをしながら もっていくことができます このように記述することで 先ほどブラウザで確認したような スムーズスクロールを発生させることが 可能となるわけです それでは最後に再度この index.html ファイルをブラウザで確認してみましょう これがブラウザで表示した状態ですね そして最後にこちらのページトップに 戻るボタンを クリックしてみましょう するとこのようになめらかに ページの最上部まで戻ることができます 以上でレッスンは終了です 今回は Web ページ内において ボタンをクリックすることによって スムーズにページをスクロールさせて 該当箇所に移動する機能を 実装する方法について解説いたしました 以降のレッスンでは ページスクロールの位置に応じて 上部のヘッダーメニューの 選択状態を切り替える方法について 解説いたしますので そちらもあわせてご覧ください

JavaScript 実践講座:パララックスアニメーション

このコースではページに奥行き感が出せるパララックス効果と、ページをスクロールしてゆくと少しずつ表示内容が変わってゆくスクロールエフェクトを使って、動きのあるWebページを作成する方法について解説します。jQueryプラグインstellar.jsとWaypointsについてや実装のためのHTMLやCSSのコーディング方法などについても解説します。

1時間30分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年04月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。