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

画面縦幅に合わせたボックスサイズの調整

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画面の縦幅に併せて、各コンテンツボックスの高さを調整する方法について、解説致します。
講師:
04:11

字幕

このレッスンでは 画面の縦幅に合わせて 各コンテンツのボックスの高さを 調整する方法について解説いたします まずはダウンロードしてきた こちらの adjust_height という フォルダーの中に入っている この jsフォルダの中の この script.js ファイルを エディタで開いてください そしてこれがそのファイルを 開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それでは早速レッスンを始めていきましょう それではまず現状の index.html ファイルをブラウザで開いて 今回実装していく内容を 確認してみたいと思います その index.html ファイルですが 先ほどダウンロードしてきた ファイルの中に入っています こちらのファイルですね これをブラウザで開きます するとこのように表示されてきますね 今回実装する内容はといいますと こちらの 大きなボックスありますね この部分ですとか そしてこの部分ですとか そういったこの大きなボックスの この縦幅のサイズを このブラウザの表示領域の高さと 合わせるような形に 実装していく方法について 解説していきます このようにブラウザの縦幅と 合わせるような形で このコンテンツボックスの高さを 設定することによって このウエブページを表示するユーザーの PC 環境に関わらず それぞれのコンテンツを大きく 見せることができるようになります それではエディタに戻ります そして今回注目していただきたい部分は こちらの部分となります それでは順番に見ていきましょう まずこちらの2行をかこっている この部分ですが この部分はこの Web ページを ブラウザで開いた時に 全ての要素の表示が完了して 準備が整ったら この中に書かれている処理を実行する といった意味になります そしてこちらの2行ですね この2行は先ほどの コンテンツボックスの高さを ブラウザの高さに合わせる 実際の処理となります まずこちらの1行目では 変数の screenHeight というものを作成して そしてそのなかに $(window),height(); と書いて この $ window height のとこで ブラウザの表示領域の高さ の値を求めています そしてその取得できた高さの値を この変数 screenHeight に代入している といった形になります そしてその後に こちらの部分ですね まず $マークの body の直下にある section タグに対して height 高さを設定する そして ( ) ; そしてこの height 後の ( ) の中の引数に 先ほど作成した変数 screenHeight を記入してあります こうすることによって この body タグの直下にある section タグ 全てに対して 先ほど求めたこのブラウザの縦幅の高さを 設定することができるようになります この height という命令ですが 中に引数を入れない場合ですと この height の前に書いてある要素の 現在の高さを求めることが できる命令となっていて 逆にこちらの2行目のように この引数に値を入れた場合 こちらの height の前に書いてある この要素に対して この引数の値の高さのを設定する といった形となります こうすることによって 先ほど確認した通り 各コンテンツボックスの高さを ブラウザの高さに合わせて 設定することが できるようになるわけですね 以上でレッスンは終了です 今回は画面の縦幅に合わせて 各コンテンツボックスの高さを 調整する方法について解説いたしました 以降のレッスンでは JavaScript 側で パララックス効果を 実装する方法について解説していきますので そちらも併せてご覧ください

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

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

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

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

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

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