jQueryプラグイン活用講座

簡単なスクリプトで背景に粒子のアニメーションを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
簡単なスクリプトで、ページの背景に粒子のアニメーションを加えます。
講師:
03:23

字幕

このレッスンでは、プラグインParticleground を使ってページの背景に粒子のアニメーションを加えてみたいと思います。Dreamweaver で開いたHTML ドキュメントにはライブラリのparticleground は読み込んであります。script 要素に記述してあるんですがまだ、実際の JavaScript コードが書かれていません。背景に particle のアニメーションを加えるということですから前景に何かないと格好がつきませんのでテキストが書いてあります。h1 と p ですね。そして div 要素で囲んでさらに、その外に div 要素id="particles" という設定になっています。そして、簡単な css の設定がしてあります。body の領域それから、このid=”particles” の領域それから body のフォントなどの簡単な設定ということです。まだ particleground、機能していませんけれどもこの状態で確認してみたいと思います。「ファイル」>「ブラウザーでプレビュー」します。前景になるべきタイトルとテキストがあります。そして背景は真っ白ということです。 では particleground のコードを書き加えていきましょう。jquery のコードを、head 要素の中に加えた script 要素ここに書き加えていきます。まず jquery 、ドキュメントを読み込んで実行したい、というときに書くお約束のパターンですけれども$(functionそして () {}); とここはもう、完全にお約束ですね。改行しておきましょう。この中に particleground のコードを書きます。まずは selector です。particles という id が付けてありましたので、それを使いましょう。id の particles で閉じてそしてメソッドです。particleground のメソッド、まんまです。particleground () ;そして () の中には何も入れなくて平気です。では、保存します。ブラウザのウィンドウをリロードしてみましょう。particle のアニメーションが加わりました。この particleground のアニメーションなんですけれどもデフォルトで、マウスポインタに反応するようになっています。何かマウスポインタの方を向いている感じですね。 パララックス的な設定がしてあります。ですからこれだけでも、もう十分使えますね。このレッスンでは、プラグインparticleground を使ってたった3行のJavaScript コードでページの背景に、粒子のアニメーションを加えました。この書き方というのはまず、jquery のお約束事の括弧の中にselector で、今回はid で指定してありますけれどもid を指定し、それに対してプラグインの名前と同じです。particleground()これだけで、背景にアニメーションが加えられてしまう、ということでした。

jQueryプラグイン活用講座

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

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

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

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

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