サイトに階層化された視差効果を作成する方法

Sep 12, 2025

操作方法

（画像クレジット：www.beargrylls.com）

視差運動、異なる速度での移動層の概念は、アニメーションで何年も使用されています。 Bear Gryllsの公式ウェブサイト（私たちのお気に入りの1つ 視差スクロールサイト ）、新しく興味深い方向に効果を及ぼす。背景山は、それらが完全に不透明になるようにフェードアップしながら、そのページの背景では、そのテキストの「冒険」が山の後ろに立ち上がっているので、山の後ろに立ち上がる。

より多くの感動的な動き効果については、私たちのガイドを最高にチェックアウトしてください。 CSSアニメーションとそれらをコーディングする方法 。

Bear Gryllsサイトデザインはイギリスのクリエイティブマーケティング機関の作品です。前哨地ターゲットオーディエンスは16から55歳まで、世界中で700万人以上の範囲で、彼らは自分の手に深刻な仕事をしました。

「ウェブサイトの主な特徴はホームページでした。私たちは文字通りスクリーンに飛び込んで彼の冒険にクマに参加することを望みました」と、共同創設者のChris WilcockとCreative Director Dan Williamsについて説明しました。「これを達成するために、編集されたビデオ、劇的なイメージとサイト上の全体的な言語と結合された賢い遷移を利用しました。」

Action Atのサイトを参照してください www.beargrylls.com 。この記事では、自分のサイトで効果を再作成する方法を説明します。始めるチュートリアルファイルのダウンロード。

01.スケーリング効果を作成します

すべてのアニメーションコンテンツを機能させることを可能にするための構造は比較的簡単です。ラッパーはすべてを保持し、オーバーフローコンテンツを隠します。その後、上に3層のDIVタグがあります。

 divクラス= "ラッパー"＆gt;

02. CSSを起動します

設計を行うために、バックグラウンドグラデーションイメージがボディに追加され、画面のサイズを埋めるように設定されます。ラッパーはすべてのレイヤーを保持し、コンテンツのオーバーフローは隠されてスケーリング効果が適用される可能性があります。

ボディ{
マージン：0;
パディング：0;
高さ：100％。
背景：URL（img / bg.jpg）
センターセンター。
背景サイズ：カバー。
}
.wrapper {
幅：100VW;
高さ：100VH;
位置：相対;
オーバーフロー：非表示;

03.各レイヤーを配置します

次のコードは、各層が絶対に配置されていることを保証します。このサイズはビューポートの幅と高さを塗りつぶすので、画像が画面に塗りつぶされています。

 .pos {
位置：絶対;
トップ：0;
左：0;
幅：100VW;
高さ：100VH;

04.テキストを追加します

テキストクラスは本当に正しい画像を追加し、それを使用してアニメーション化する前に開始位置を設定します。 move move 最後のステップで追加されるキーフレーム。

 .Text {
背景：URL（img / text.png）
センターセンター。
背景サイズ：カバー。
変換：translate3d（0,30px、0）;
不透明度：0;
アニメーション：移動1.8sを緩めます。
アニメーションフィルモード：転送;
}

05.最初の山をアニメートしてください

最初の山は画面からさらに離れたものです、そしてこれはアニメーション化される小さなスケーリングを得るでしょう。すべてのレイヤーの不透明度もローに設定されているため、それらが適所に表示されます。

 .mountain1 {
背景：URL（img / mountain1.png）
センターセンター。
背景サイズ：カバー。
変換：Scale3D（1.1,1.1,1.1）;
不透明度：0.2;
アニメーション：スケーラ1S ease-out;
アニメーションフィルモード：転送;
}

06.前景マウンテンをアニメートします

前景のための山は他の山とほぼ同じです - それはただのスケールを所定の位置にするだけです。どちらの山もアニメーションの「スケーラ」キーフレームを共有しています。

 .mountain2 {
背景：URL（IMG / Mountain2.png）
センターセンター。
背景サイズ：カバー。
変換：Scale3D（1.3,1.3,1.3）;
不透明度：0.1;
アニメーション：スケーラ1.2S ease-out;
アニメーションフィルモード：転送;
}

07.キーフレームアニメーションを追加します

それを指定するキーフレームが作成されるようになりました。動きの終了状態では、この終了状態が適所に保持されます。テキストが上がり、山はデザインに収まります。

 @keyframes moveup {
100％{
変換：translate3d（0,0,0）;
不透明度：1;
}
}

@keyframesスケーラ{
100％{
変換：scale3d（1,1,1）;
不透明度：1;
}

generate CSS — 大きな割引のために今CSSを生成するためのチケットを拾う（画像クレジット：未来）

この記事はもともと発行289に発行されました ウェブデザイナー - 今発売中 。 ここで購読する 。

続きを読む：

CSSを使用してSVGにアニメーションを追加する方法
Dosと楽しいWebアニメーションのための違いはありません
CSS形状で設計する方法はじめに：

サイトに階層化された視差効果を作成する方法

01.スケーリング効果を作成します

02. CSSを起動します

03.各レイヤーを配置します

04.テキストを追加します

05.最初の山をアニメートしてください

06.前景マウンテンをアニメートします

07.キーフレームアニメーションを追加します

操作方法 - 最も人気のある記事

SvelteとSapperで高速反応ブログを構築する

8素晴らしい新しいグラフィックデザインチュートリアル

How to build a blog with Jekyll

より良い生き物を描く17の方法

現実的な透明な表面をどのようにレンダリングするか

Daz StudioとZbrushの間の移動方法

あなたの静物画絵画を鮮明にする

Zbrushの漫画の頭を彫刻してポーズする方法

カテゴリ