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

要素サイズに合わせた背景画像サイズの調整

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
パララックス効果をもったWebページを制作するにあたって、CSS3の機能をつかって、要素サイズに合わせた背景画像サイズの調整方法について解説致します。
講師:
02:56

字幕

このレッスンではパララックス効果をもった ウエブページを制作するにあたって CSS3 の機能を使って 要素サイズに合わせた 背景画像サイズの 調整方法について解説いたします まずはダウンロードしてきた こちらの background_size というフォルダの中に入っている この CSS フォルダの中の style.css ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回 注目していただきたいのは このファイルの中の こちらの部分となります この部分は大きなボックスで その中に背景画像を大きく 表示している部分でしたね このようなボックスが 今回 制作するウエブページだと 3 つほどあります このように背景画像を 設定している要素に対して background size cover というスタイルを設定してあげます これは CSS3 から利用できる 設定項目となったのですが この background size に 対して cover を設定することによって 背景に設定している画像が その背景画像を設定している要素 今回ですと この sectionIDbox1ですね このサイズに追随するような形で 背景画像を隙間ができないように 拡大して表示してくれるような 機能となってます それでは実際にこの状態で ブラウザで確認してみましょう ちなみに今回はこの height の部分を わかりやすいように 500px に更変しています それではブラウザで見てみましょう するとこのように表示されてきましたね では試しに このブラウザのサイズを 変更してみたいと思います こちらのこの部分の縦は 今 500px ですね そしてこの状態でこのように 横幅を移動していくと このように背景画像のサイズが 変更されていっていますね このように background size cover を設定することによって どのような解像度でこのウエブページを見ても この背景画像が  その解像度のサイズに応じて 隙間ができないように適切に 拡大縮小をして 画像を表示してくれます このテクニックはパララックス効果を もったウエブページを作るにあたって 必要となってきますので ぜひとも覚えておきましょう 以上でレッスンは終了です 今回はパララックス効果をもった ウエブページを制作するにあたって CSS3 の機能を使って 要素サイズに合わせた 背景画像サイズの調整方法について 解説いたしました 以降のレッスンでは html ファイルから jQuery とその他のパララックス効果や スクロールエフェクト用のプラグインの 読み込み方法について解説いたしますので そちらも合わせてご覧ください

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

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

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

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

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

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