jQueryプラグイン活用講座

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オプションのプロパティでアニメーションの表現が変えられます。
講師:
05:52

字幕

このレッスンでは プラグインparticleground のオプション設定を加えて背景に動く粒子のアニメーションの表現を変えてみたいと思います今見たページの HTML ドキュメントをドリームウィーバーで開きましたまず jquery とそれからプラグインparticleground をscript 要素で読み込んでありますそして script はこの3行なんですけれどもparticles と言うセレクターを使っていますそれがこの div 要素 のid particlesここを指定している事になりますそして実際の呼び出しはそのセレクターに対してparticleground ( ) と極めて簡単ですではここにオプションをちょっと加えてみましょうオプションはこの中にオブジェクトで加えますそのオブジェクトを変数で宣言しておきましょうsettings としておきますオブジェクトですから{ で始まり } 閉じ ; ですそしてこの settings を引き継ぐとしてこの中にコピーしておきますもちろん空っぽでは意味がありませんのでこの中にオプション設定を書いていくわけですけれども先ず1つ加えてみましょうdotColor ですこれは particle の点の色を示す事になります= ではだめですねオブジェクトですから : ですそして css のカラー設定と同じように指定すればいいですですから # で始まる16 進数 6 ピタでも結構ですしカラーネームも 使えますカラーネーム "turquoise" とちょっとグリーンですねこの設定で確認して見ましょうファイルを「保存」しますブラウザーウィンドウをリロードしましょう今この点は黒ですねリロードしますと点の色がグリーン掛かった色ターコイズに変わりました線の色も合わせたほうがいいですねHTMLドキュメント に戻りまして線の色も同じにしますのでこの dotColor「コピー」しちゃいましょう「コピー」 をして改行をして「ペースト」 しますオブジェクトですから, 区切りですねそして線の色はと言うと大体 検討が付くと思いますけれどもdot を line に変えればいいですさらに点の大きさも変えてみましょう点の大きさをちょっと大きくしますparticleRadius ですデフォルトが 7 なんですが少し大きめと言う事で 10 と入力しますでは一旦「保存」をしてブラウザーで確認します再びブラウザーをリロードします線の色が揃ってあとこの丸が少し大きくなりましたねもう少しオプションを加えてみましょうHTML ドキュメント に戻りましてこの後にまた , 区切りでcurvedLines と言うオプションを試したいと思いますこれは  オンオフ  の意味でtrue false を指定しますデフォルトでは false ですこれを true にするとcurvedLine 線がカーブします「保存」しましょうブラウザーウィンドウのリロードですちょっと変わった感じになりましたねでも個人的には線の方が好みなので線に戻したいと思いますcurvedLines を消す代わりに別のオプションに書き換えましょうここで density密度 と言う事ですどれくらい粒子をたくさん密度を濃くするかと言う事です数値で指定しますデフォルトは 10000 です5000 にしましょうここで注意は数ではありません10000 と言うのは100×100 の中に粒子をどれくらい詰め込むか と言う事ですその詰め込む領域を狭めると粒子がよりたくさんになりますよねですから数字を少なくすると粒子の数は増えますでは「保存」をしてブラウザーで確認しましょうブラウザーウィンドウを再びリロードします点の数が増えましたね一応倍に増えているはずですPARTICLEGROUND には他にも多くのオプションがありますそのオプションの説明を見るにはこのダウンページからGitHub に飛んでその README ですここを見ると簡単な使い方から Options と言うところにオプションが英語なんですけれども記載されていますのでこちらを研究するといいでしょうこのレッスンではparticlegroundのプラグインに対してオプションの設定を加えましたその場合にはオプション設定 を オブジェクト で設定をして その オブジェクト をparticleground の呼び出しの引数として加えます今回試したのはdotColor lineColor点 と 線 の色particleRadiusparticle の 点の大きさですねdensity 密度です後 消してしまいましたがcurvedLine と言うので線をカーブさせる事が出来ました

jQueryプラグイン活用講座

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

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

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

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

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