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

アニメーション

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
トップページにアニメーションによる演出を加えてみましょう。
講師:
07:46

字幕

このレッスンでは jQuery によるanimate の演出について学びます。それでは final のフォルダーで動きを確認してみましょう。final に入っている index.html をGoogle Chrome で開きます。開いたらこのようにキャッチコピーの画像が上から降ってくるようなアニメーションが付いています。もう一度確かめるためにはMac は Command+RWindows は Ctrl+R で更新をしてみると、もう1回再生ができるようになっています。このアニメーションを作っていきましょう。それではファインダー、フォルダーに戻ってからanimate_begin のフォルダーをSublime Text にドラッグアンドドロップします。そして index.html をダブルクリックで開きます。そしてそのまま下の方にスクロールをしましょう。スクロールをすると、このようにトップページ用のスクリプトを書くエリアがあるのでこの位置に追記をして行きたいと思います。そしてここに改行ですき間を開けてここに書いていきますね。では $ でセレクターをまず必ず作りましょう。そしてクォーテーションを忘れないで記述をしたら、動かすものがどの id かというとid メッセージに入っている h2という風に特定します。 そして動かすためのメソッドはanimate でしたね。animate({そして Enter です。そしてここにアニメ―とさせたいcss のプロパティ名を書いていきますがここに終点のプロパティを書きます。終点は top: 90そしてもう1つセレクターを作ります。改行して opacity透明度の方の終点。透明度の終点は 1 と書いておきましょう。これでどうなるかというと終点が透明度 100% の上からの座標が 90 ピクセルの位置に止まるようになります。そして速度などのオプションはこの波括弧の後ろでカンマを打ってここにミリセカンドでまず数字を入れると、ここが 0.3 秒という扱いになりましてそしてイージングという緩急を付けるオプションも付けることができますのでクォーテーションを打ってswing と入れておきましょう。そうしたら一度上書き保存をして今度はスタイルシートを編集します。なぜかというと、これは終点しか表していないので始点はスタイルシートで今回は決める手法でいきたいと思います。それでは css フォルダーを開いてstyle.css をダブルクリックで開きましょう。開いたら今のメッセージの h2 がどのような始点になっているかを探したいと思います。 132行目に id message のh2 という記述がありました。こちらに top: 90px が最初の位置だよという風に書いてあります。これだと終点も 90 なので動きません。ですのでここを -300 といった数字に変えてあげましょう。こうすることで css が読み込まれた時は上の方にいるものがanimate のメソッドによって90 の位置まで降りてくるというような操作が可能です。では一度上書き保存をしてhtml にフォーカスをしたら右クリックから Open inBrowser で動きを確かめてみましょう。このように上からスッと下りてくるアニメーションが可能になりました。つまり animate のメソッドがなければ上の方で止まったままになっているのをanimate のメソッドで下ろしてきたということになります。それでは Sublime Text に戻ってではこの opacity の設定は何なのかというと、実は透明度をつかさどっているので初期設定は当然ながらopacity 1 です。透明度は普通は透明になっていません。しかし最初の開始位置をopacity 0 にすることで0 から 1 へのアニメーション。 つまり段々現れてくるというアニメーションがこれで可能になります。それでは保存をしたらブラウザーにアプリケーションを切り替えて更新を押してみましょう。一瞬なので微妙ですが実はフェードインの効果が掛かっています。分かり易くするためにSublime Text に行ってそしてスクリプトの 0.3 秒を例えば3 秒、つまり 3000 という風に数字を打ち変えて上書き保存をしてそしてブラウザーに切り替えて更新をしてみましょう。そうすると 3 秒かけて下りてくるので段々段々半透明から透明になるよう様子が伺えると思います。それでは Sublime Text に戻って3 秒を 0.3 秒につまり 0 を1個削って戻しておいて、今度はメソッドチェーン、つまりこの後ろに animate を加えて更に動きを加えていきましょう。animate({そしてその中にtop: 20 としました。これで一旦 90 の位置に来るのだけれどもその次に 20つまり上の方に上がるという動きを加えて、そしてこの波括弧と括弧のすき間にカンマを入れて0.2 秒という設定を入れて更につなげましょう。.animate({そして Enterそして top: 90これで一瞬上に上がるのですけどその後また 90 の位置に戻るという風なアニメーションに変わります。 そして秒数は 0.1 秒という風に設定をしてセミコロンで行を閉じました。では上書き保存をしてブラウザーに切り替えて更新をしてみましょう。このように一度下りてちょっと上に上がって下に落ちるというようなアニメーションができました。このようにメソッドチェーンと css の組み合わせでアニメーションができるのでjQuery の書き方さえ覚えてしまえば後は css の数値をコントロールするだけです。汎用性が非常に animate 高いのでぜひ使ってみてください。このレッスンでは jQuery によるアニメーションを学びました。

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

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

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

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

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

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