WebデザイナーのためのjQuery実践講座

jQuery&jKitで「スムーズスクロール効果」を実装する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryとjKitプラグインを使って、実際に「スムーズスクロール効果」を実装する方法について、解説致します。
講師:
04:13

字幕

このレッスンでは jQuery と jKit プラグインを使って― 実際にスムーズスクロール効果を実装する方法 について解説していきます まずは ダウンロードしてきたこちらの smoothscroll-js ― というフォルダーの中に入っている― こちらの index.html ファイルと  そして こちらの js フォルダーの中に― 入っているこの javascript.js ファイルを― エディターで開いて下さい そして これがそれらのファイルを 開いた状態です 左側には index.html ファイル― そして 右側には javascript.js ファイルを― 表示させている状態となっています これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう それでは まず 前回までのレッスンの おさらいをしておきたいと思います 前回までのレッスンでこちらの index.html ファイルの― こちらのメニュー部分の― A タグに対してそれぞれリンク先となる ページ内の箇所を指定しました 今回はこの html タグに対して スムーズスクロール効果をー 付けていってみたいと思います それでは こちらの javascript.js ファイルの方に― 目を移して こちらの部分にご注目下さい こちらの部分で実際にそのスムーズスクロール 効果を実装しています それでは まず始めに こちらの部分から見ていきましょう こちらの部分で実際に スムーズスクロール機能を有効化しています まずは $(this) と書いていますね こちらの this というのは こちらの部分となります この $ から始まって find A で 終わっている部分ですが― これはこちらのヘッダータグの中の ナビゲーションタグの中にある― a タグという意味になります その a タグ に対して jKit― これは jKit プラグイン特有の命令ですね そして その jKit の後にある 括弧の中に scroll ― という値を与えてあげることで jKit の中のスムーズスクロール機能を― 利用するといった意味になります それでは 次に こちらの上の部分を見ていきます こちらの部分ですね 先程も言ったとおり こちらの部分に関しては ヘッダータグの中のナビゲーションタグ― の中にある a タグという意味になります そして 後半部分 こちらの部分ですね こちらの部分では その a タグの数だけ 繰り返すといった意味になります 今回はこの a タグ合計 1-2-3-4-5 の 五つありますね その五つそれぞれに対してこの処理を実行する といった意味になります こうすることでこの五つある それぞれの a タグに対して― このスムーズスクロール効果を 付けることが出きるわけですね これでスムーズスクロール効果を 実装することが出来ました それでは この状態でこちらの index.html ファイルを― ブラウザで開いて その動作を確認してみたいと思います はい これがその index.html ファイルです それでは こちらのメニュー部分を クリックしてみましょうか まずは こちらのコンタクトを クリックしてみましょう そうすると このようにスルスルスルと スクロールされてきましたね それでは もう一つ試してみましょう こちらの Information を クリックしてみましょうか すると このように同様にスルスルスルと スクロールしてきましたね このような形でスムーズスクロール効果を 実装することが出来ました ただ 見て頂いて分るとおり 少し このようにずれた所に― スクロールしてきていますね 以降のレッスンでは このスクロール位置の 調整部分についてもみていきたいと思います 以上でレッスンは終了です 今回は jQuery と jKit プラグインを使って― 実際にスムーズスクロール効果を実装する 方法について解説致しました 次のレッスンでは jKit プラグインを使った― スムーズスクロール効果を実装する為の― 設定項目について解説いきますので そちらも合わせてご覧下さい

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

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

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

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

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