jQuery APIでWebサイトを演出しよう

イージング・プラグインを使おう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
動きに緩急をつけるイージングについて学んでみましょう。一手間で面白い動きに変えることができます。
講師:
08:19

字幕

このレッスンでは jQuery によるイージングについて学びます。イージングとは動きの緩急の事です。まずは final のフォルダーの中のhtml をブラウザーで開いてみましょう。ブラウザーで開くとこのキャッチコピーの画像が少し跳ねるような形で落ちてきたのが分かると思います。これもイージングで実現をしていたりとか後はこのページトップに戻るのボタンを押してみると、最初は速くてだんだん遅くなるといったような動きになっています。またこちらのページのコンテンツに移動するリンクの矢印もクリックをすると段々遅くなるというようなイージングが掛かっています。このイージングを使うことで単純な動きにも少し演出を加えられるようになります。それではフォルダーに切り替えてbegin のフォルダーをフォルダーごとSublime Text に落とします。そうしたら index.html をダブルクリックで開きます。そして右クリックからOpen in Browser でブラウザーで確認をしておきましょう。現状の動き、これを確認します。一度更新ボタンを押すと動きを確認できますがあまり自然ではありません。これはどのようなコードで実践されているかというと、Sublime Text 2 に戻ってスクロールを1番下まで移動してアニメーションのスクリプトを確認しますとこれは animate のメソッドで実現がされています。 まず上から下りてくるアニメーションがあってちょっと上に戻ってまた下に行くとというアニメーションを実装しています。そしてここに swing という風に書かれている所がありますが実はこれがイージングのパターンになります。イージングのプラグインをまだ付けていないのでswing と linear の2種類しかアニメーションのイージングとして付けることができません。例えばコンテンツへのスクロール部分もswing という単語があります。こちらを例えば linear という単語に書き換えてみて上書き保存をします。そしてブラウザーを切り替えて一度更新ボタンを押して更新をしたらこちらの下向きの矢印をクリックしてみましょう。そうするとこの動きについては等速直線運動 linear は特に加速度とか減速、そういった機能がないアニメーションです。これはこれで動くので充分だとは思うのですけれどももう少しアクションを加えたいので検索をしてイージングプラグインを実装しましょう。それでは検索のウィンドウにjQuery と easing という2つの単語を入力してEnter を押してみてください。そうするとjQuery Easing Pluginというページに飛べるかと思いますのでこちらをクリックしましょう。 クリックしたら、まずDownload という項目があるのでこちらから jquery.easing.1.3という物を使ってみましょう。こちらをクリックするとこのようにjQuery プラグインの中身が出てきます。でてきたら「ファイル」から「ページを別名で保存」をクリックしましょう。クリックするとファイルを保存する場所を聞かれるのでeasing_begin というフォルダーの中のjs フォルダーを開いてこちらに保存をしましょう。保存したらSublime Text に戻ってこのプラグインを読み込みます。読み込み方は外部の js フォルダーの読み込み方なのでこの biggerlink やcommon.js と同じ形式になります。それでは Sublime Text で行の位置にまずカーソルを合わせたらコピーペーストをするとこのように一瞬で行を増やすことができます。後はここにファイル名を正しく記述するだけですね。jquery.easing.1.3.jsということになります。こういう風に読み込んでしまえば後はここの linear だとかswing という単語を変えることが可能です。まずは上書き保存をしておきましょう。 そしてイージングの内容について確認します。Google Chrome にまた切り替えます。そしてこの画面を一度戻るを押して前の画面に戻ったらこちらにデモを閲覧することができます。Example と書かれていますがここをクリックすると、この動きが使えるということですね。例えば easeOutBounce というのはこの戻ってきたときに弾むような設定を与えることができます。また easeInCubic クリックするとIn というのが最初に対して加速度を与える。Out は最後の方に向かって加速度を掛けるというような意味なので全ての項目を少しずつ試してみると色々な動きが試せると思います。それでは Sublime Text に戻ってここのコメントにある動きを試してみましょう。まずは easeOutBounce というのをコピーをして linear を入れ替えてみましょう。その時クォーテーションを消さないように気を付けてください。では上書き保存をしてブラウザーを切り替えてbegin のファイルが選ばれていることを確認して更新、そして今イージングを設定したのはコンテンツのスクロールなのでこの矢印をクリックすると、このように先程までは移動するだけだったのがバウンス、跳ねるようなエフェクトに変わりました。 では Sublime Text に戻りましょう。ただあまり跳ねすぎるのも、とおもうのでこちら easeOutQuart というのがこちらにありますのでこちらを選択して書き換えておきましょう。そしてアニメーションの部分を書き換えます。アニメーションを今はメソッドチェーンで記述していますがこの .animate の2つ目からを一度削ってしまいましょう。そしてこの swing という部分をeaseOutBounce という単語をコピーして、ここにペースト。そしてこの 300 を1000 という状態にして上書き保存をしましょう。それでは Google Chrome を開いて更新を一度クリックすると、上から降ってくるアニメーションが跳ね返るようなアニメーションに変わりました。このようにイージング bounce を使うと物が弾むようなアニメーションをすぐに実装ができるので非常に便利です。このレッスンではイージングについて学びました。

jQuery APIでWebサイトを演出しよう

jQueryはJavaScriptを効率良く記述することができる、世界中で広く使われているライブラリです。APIとは外部のウェブサービスを自分のサイト内で利用できる仕組みのことです。このコースではjQueryやAPIの基本を学習したのち、jQueryのプラグインやGoogle APIなどの実践的な使い方について学びます。

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

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

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

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