jQueryプラグイン活用講座

Parallax ImageScrollのオプションで表現を変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オプションのプロパティによりパララックス効果の表現を変えます。
講師:
06:24

字幕

このレッスンではプラグインParallax-ImageScrollの設定にオプションを加えてParallax の効果に少し変化を与えてみたいと思います現在 Parallax-ImageScroll をデフォルトの状態で設定してありますParallax-ImageScrollを使うにはまず画像の方は div 要素で共通の class を設定しdata-image で src にあたるソースのパスですね を指定します後 data-widthdata-height ということで画像の幅と高さを指定しますそれから Parallax-ImageScroll のライブラリjquery.imageScroll.min.jsこれは の前に置きますそしてもちろん jquery のプラグインですからjquery をここではcdn で読み込んでいますそして JavaScript コードの方は非常に簡単3行です初期化の時にその共通に設定してあるclass を selector で設定したうえでimageScroll ()ということで実行できます確認してみましょう「ブラウザーでプレビュー」してみますスクロールしてみましょうスクロールするとそのスクロールのスピードとそれから 画像のスクロールの仕方が時間差があるものですからParallax 効果示唆効果が表現されるということですねこれに少しオプションを加えて表現を変えてみましょうHTML ドキュメントの方に戻りますオプションはこの imageScroll のメソッドにオブジェクトを渡して指定しますそのオブジェクトをsettings ということで変数に宣言しましょうそして いくつも加えやすいように改行しておきますこの settings をimageScroll のメソッドの引数に渡すということですねコピーを持っていきますまず1つは画像がスクロールするスピードとそれから ウィンドウがスクロールするスピードと画像のスピードが違いましたよねその画像のスピードをspeed というプロパティで変えることができますデフォルトは 0.2 なんですけれども0.9 とすると画像のスクロールするスピードがウィンドウのスクロールとほぼ同じになります0から1の間の数字の指定なんですが1に近づくほど画像とウィンドウが同じようにスクロールするということになりますでは保存をして確認してみましょうブラウザをリロードしますスクロールしましょうほとんど画像が一緒にスクロールしているように見えますねでも端っこの方を見ていただくとParallax が少しだけ働いているのが分かりますねもう1回今度は上の方に行ってみますけど画像がちょっとずつずれてます端っこの方上と下の端っこの方を見てくださいParallax は効いているんですが非常に小さいウィンドウと一緒に動いていますじゃあもっと遅くしてみましょうデフォルトが 0.2 だと言いましたので今度はそれよりも小さい 0.1 としますそして ファイルを保存してブラウザで確かめましょうブラウザウィンドウをリロードしますそしてスクロールしますけれども今度は画像があまり動かない感じですねなかなか持ち上がっていきませんちょっとずつ持ち上がっているんですけれどもウィンドウのスクロールの方がずっと速いということですねこのように画像のスクロールのスピードがspeed というプロパティで調整できます他にもプロパティを設定してみましょう次は画像の領域ですオブジェクトで指定しますので, 区切りでカバー率ということですけれどもcoverRatio とウィンドウの画像を表示する領域ですね0.75 75% がデフォルトなんですが少し狭めてみます0.5 半分しか領域がないということになるんですけれども保存をして確かめますブラウザをリロードしますので画像の高さに注目してください丈が縮まりましたねスクロールについてはスピードは先ほどと変わりませんのでただ領域が狭いのですぐに下に行ってしまいますねこれをもう少し広げたいと思います画像の高さを広げるにはこの 0.5 という数字を変えてももちろんいいですけれどもその他にもう1つプロパティとしてオプションとしてextraHeight というのがあります高さを追加するということですねこれはピクセルで指定しますので分かりやすいように では100 ピクセルぐらい追加してみたいと思いますではこれをまた保存をしますブラウザウィンドウを再びリロードします高さが また広がりますのでご注目くださいリロードまた増えましたね示唆効果は先ほどと変わらずということで このようにオプションをオブジェクトに入れてプロパティとして指定することによってこの表現 Parallax の表現を調整することができますこのレッスンではParallax-ImageScrollの Parallax 効果についてオプションで表現を変更してみましたその場合 オプションはオブジェクトで指定しますそれを imageScroll のメソッドの引数として渡します今回使ったのはスクロールするスピードですねウィンドウのスピードに対して画像がスクロールするスピードをspeed というプロパティそれから 画像の領域高さになりますけれどもこれをパーセンテージで指定することができますさらにプロパティextraHeight ということでピクセル指定で画像の丈を高さを広げることができるということでした

jQueryプラグイン活用講座

jQueryは広く利用されているJavaScriptライブラリで、機能を拡張するプラグインも数多く公開されています。このコースではインターフェイスやアニメーションが簡単に作れるiQueryのプラグインを多数紹介します。パーティクルのアニメーションや切り替え効果を加えた写真表示、アニメーションするパーツなど多くの作例を実際にコードを書きながら詳しく説明します。

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

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

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

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