JavaScript 実践講座:パララックスアニメーション

stellar.jsとは?

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
パララックス効果を実装する為に利用するプラグイン「stellar.js」について、簡単にご紹介致します。
講師:
01:52

字幕

このレッスンでは パララックス効果を実装するために 利用するプラグイン Stellar.js について簡単にご紹介いたします 今 画面に表示されているのが その Stellar.js の ウエブサイトとなります この Stellar.js は ウエブページ上に パララックス効果を付与するために 利用するプラグイン となっていて jQuery を 利用することを前提としたー プラグインとなっています 要するに Stellar.js を 利用するためには jQuery を読み込んでおく 必要があるわけですね さてこの Stellar.js ですが 大きく3 つの特徴があります まず1つ目は バックグラウンドイメージに設定した 背景画像に対して パララックス効果を付与する効果 そして2つ目は 背景画像ではなくて ウエブページ上のあらゆる要素に対して パララックス効果を付与する効果 そして3つ目は こちらのように縦ではなく横に対しても パララックス効果をつけていくことができる といった特徴をもっています また Stellar.js では iOS といったスマートフォン端末に対しても パララックス効果を 実装する機能をもっています 今回のコースでは先にご紹介した 背景画像に対する パララックス効果の付与と そしてウエブページ上の要素に対しての パララックス効果の付与を この Stellar.js を使って 実装していきたいと思います 詳しい実装方法については 以降のレッスンで 順次取り上げていきますので そちらも合わせて参考にしてみてください 以上でレッスンは終了です 今回はパララックス効果を 実装するために利用するプラグイン Stellar.js について簡単に ご紹介いたしました 以降のレッスンからは 画面の縦幅に合わせて 各コンテンツボックスの高さを 調節する方法について解説いたしますので そちらも合わせてご覧ください

JavaScript 実践講座:パララックスアニメーション

このコースではページに奥行き感が出せるパララックス効果と、ページをスクロールしてゆくと少しずつ表示内容が変わってゆくスクロールエフェクトを使って、動きのあるWebページを作成する方法について解説します。jQueryプラグインstellar.jsとWaypointsについてや実装のためのHTMLやCSSのコーディング方法などについても解説します。

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

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

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

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