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

「スムーズスクロール効果」の設定項目

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jKitプラグインを使った「スムーズスクロール効果」を実装する為の設定項目について、解説致します。
講師:
03:49

字幕

このレッスンでは jKit プラグインを 使ったスムーズスクロール効果を実装する為の― 設定項目について解説していきます まずはダウンロードしてきた smootnscroll-setting ― というフォルダーの中に入っている― こちらの index.html ファイルと そして  この js フォルダーの中に入っている― こちらの javascript.js ファイルを エディターで開いて下さい そして これがそれらのファイルを 開いた状態です 左側には index.html ファイル そして 右側には― javascript.js ファイルを 表示させている状態です これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは前回までのレッスンのおさらいです 前回までのレッスンでこちらの メニュー部分の a タグに対して― こちらの javascript の部分で スムーズスクロールの実装を行ってきました 今回はそのスムーズスクロール効果に 設定項目を追加してその動きを― カスタマイズしたいと思います 今回 注目して頂きたい部分は こちらの部分となります それでは 順番に見ていきましょう まず 設定項目を追加する為には こちらの jKit の括弧の中の第二引数に― このように波括弧で囲って 複数の設定項目を追加していきます 今回は二つの設定項目を追加しています まずは offset というものと もう一つは speed というものです まず この offset の方から 説明します この offset というのは スムーズスクロールした際の移動先の位置を― カスタマイズすることが出来ます 今回は -120 と書いていますね これは -120 ピクセルという 意味になります このように書いておくことで 例えば こちらの Information の部分に― スムーズスクロールさせたい場合 このスムーズスクロールした先の― Information のコンテンツよりも -120 ピクセルの位置にスクロールさせる― といった意味になります そして 次にこちらの speed という 設定項目ですが この部分にはスムーズスクロールの スピードを設定することが出来ます 今回は 1000 と書いていますね これは 1000 ミリ秒のことで 一秒を指します このように記述しておくことによって スムーズスクロールする際― 一秒掛けて移動してくる といった意味になります それでは この状態で こちらの index.html ファイルを― ブラウザで開いてその動きを 確認してみたいと思います はい これがその index.html ファイルを ブラウザで開いた状態です では こちらのメニューを クリックしてみましょう 例えば Photo Gallery です このようにクリックすると このようにぴったりと― Photo Gallery のタイトルが 表示されている状態でこの部分に― スムーズスクロールしてきましたね 前回までのレッスンでは 若干ずれて このような形で表示されていたかと思います 今回はその部分のオフセットを 修正したのでこのように綺麗に― スクロールしてくるようになりました そして そのスクロールのスピードも― このような形で一秒間掛けて― スクロールしてくるようになっています このように jKit プラグインを 利用すればスムーズスクロールの― 細かな設定を行うことも可能です 以上でレッスンは終了です 今回は jKit プラグインを使った スムーズスクロール効果を実装する為の― 設定項目について解説致しました 以降のレッスンからは jQuery を使って― スクロール位置に応じてヘッダーレイアウトを― 変更する方法について解説していきますので そちらも合わせてご覧下さい

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

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

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

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

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

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