マウス制御視差の背景効果を生み出す

Sep 17, 2025

操作方法

（画像クレジット：Renaud Rohlinger）

Parallax Scrollingを持つサイトは、その理由で普及し続けています。それらはユーザーのための快適で魅力的な閲覧の経験を作成します。私たちはすでに最高の見事を見ました 視差スクロール あなたを刺激するためのウェブサイトしかし、あなたがあなた自身のものを作りたいのなら何をしますか？

幸いなことに、フランスのクリエイティブ開発者Renaud Rohlingerはあなたがあなたのマウスでコントロールできる視差スクロールバックグラウンドを作成する方法のためのロープをあなたに示すためにここにあります。驚くべき結果をチェックしてください彼のサイト次に、次のプロジェクトで効果を複製する方法について、Rohlinger自分自身から学びましょう。

あなたはこれらのうちの1つを試すこともできます ウェブサイトのビルダー そして、あなたがあなたのサイトのパフォーマンスを検討している間、あなたのチェックをチェックしてください ウェブホスティング サービスはあなたのために働いています。メディアの重サイトを手に入れましたか？信頼できるものにバックアップしてください クラウドストレージ 。

01. HTMLドキュメントフレームワークを定義します

最初のステップは、HTML文書のフレームワークを定義することです。これは、文書をヘッドとボディのセクションを持つものとして記述するHTMLコンテナで構成されています。ヘッドセクションが外部JavaScriptとCSSファイルをリンクしている間、本文セクションはステップ2のページコンテンツ要素を定義するために使用されます。

Doctype HTML＆GT; DOCTYPE; ＆lt; html＆gt; ＆lt;頭＆gt; ＆lt;標題視差の背景＆lt; / title＆gt; ＆lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / gt; ＆lt; scrc = "code.js"＆gt; / script＆gt; ＆lt; / gt; ＆lt; body＆gt; ***ステップ2ここに＆lt; / body＆gt; ＆lt; / html＆gt;

02. HTMLコンテンツを識別します

本体の内容は表示テキストとDIVコンテナで構成されています。 データ視差 属性。視差の背景に使用されるこのコンテナ要素は、その子要素のそれぞれが必要な背景画像でスタイルされることができます。この例では、コンテナには、子DIV要素から作成されるべき3つの画像層があります。

 こんにちは！＆lt; / h1;
＆lt; divデータ視差＆gt。
   ＆lt; div＆gt; / div＆gt。
   ＆lt; div＆gt; / div＆gt。
   ＆lt; div＆gt; / div＆gt。
＆lt; / div＆gt;

03. CSS Parallaxコンテナを作成します

新しいファイルを作成します styles.css. 。このファイルの最初のステップは、デフォルトのコンテンツカラーを白く、視差の背景コンテナの設定を設定します。固定された位置決めが視差容器に適用されて、内容がそれをスクロールするのと同じ位置に残ることができます。デフォルトの色がページ色として適用され、負のz-indexはページコンテンツの下にコンテナを表示することを可能にします。

 HTML、ボディ{
   カラー：#FFF;
}
[データ視差] {
   位置：固定
   幅：100VW;
   高さ：100VH;
   トップ：0;
   左：0;
   Z-Index：-1;
   背景色：＃000;

04. CSS視差レイヤーを設定します

各画像層は、ブラウザウィンドウに一致するサイズで絶対位置決めを使用するように設定されている。この例の視差画像は、繰り返すように設定された特定のサイズのパターンに基づくものとする。 Repeat-Yを使用して、またはRepeat-Xを使用して水平方向にイメージを繰り返すことを選択できます。

 [データ視差]＆gt。 * {
   位置：絶対;
   幅：100VW;
   高さ：100VH;
   背景 - 繰り返し：繰り返します。
   背景サイズ：20VW 20VW;

05. CSSバックグラウンドレイヤーを使用してください

各画像層はステップ4で定義された位置とサイズの設定を共有しているが、各層は固有の画像を使用する。 NTH子セレクタは、Parallaxコンテナ内の各要素を参照するために使用されます。 background-image属性は、タイル張りのときにグリッド効果を生み出す2行を描画するために使用されます。下位層は暗い色を使用して深さの知覚を提供するのを助けます。

 [データ視差]＆gt。 *：Nth-Child（1）{
   背景 - イメージ：
      線形グラデーション（右へ、＃333 1px、
  透明1px）、
      線形グラデーション（下へ、＃333 1px、
  透明1px）。
}
[データ視差]＆gt; *：Nth-Child（2）{
   背景 - イメージ：
      リニアグラデーション（右へ、＃777 1px、
透明1px）、
      線形グラデーション（下へ、＃777 1px、
透明1px）。
}
[データ視差]＆gt; *：Nth-Child（3）{
   背景画像
      線形グラデーション（右へ、#FFF、
透明1px）、
      線形グラデーション（下、#ffF 1px、
 透明1px）。

06. JavaScriptレイヤーの開始を実行します

新しいファイルを作成します code.js 。このステップは視差コンテナを見つけ、その画像層のそれぞれを開始します。 データインデックス 手順7で使用される属性は、ブラウザウィンドウのロードイベントに添付されている関数から実行する必要があるため、このページのボディコンテンツの準備ができているときにのみコードは実行されます。

 Window.AdDeventListener（ "load"、function（）{
   var container =文書
QuerySelector（ "[data-parallax]"）;
   var childnodes = container.children;
   （var n = 0; n

07. JavaScriptマウスの動きを計算します

この効果は、マウスの動きに応答して各視差層に関連する画像を動かすことに依存しています。ステップ6で識別された視差容器にはAがあります マウスメモーブ マウスの動きがあるときはいつでも視差層の背景画像を再配置する機能を起動します。各層は、ステップ6で適用されるインデックス番号に基づく動き計算を有する。

 Container.AdDeventListener（ "MouseMove"、
 関数（e）{
   var elms = this.children;
   （var c = 0; c + length; c ++）の場合
      VAR MOTION = PARSEINT（ELMS [C]。
GetAttribute（ "データインデックス"））/ 10;
      var x =（（e.clientX）* Motion）+ "px";
      var y =（（E.clienty）* Motion）+ "px"; ELMS [C] .Style.BackgroundPosition = X +
"" + y;
   }
}）;

この記事はもともとCreative Web Design Magazineで公開されました ウェブデザイナー 。 今問題290を購入してください。

関連記事：

2019年に10件のCSSフレームワーク
CSSを使用してSVGにアニメーションを追加する方法
2019年に賢く働くのを助けるための52ウェブデザインツール

マウス制御視差の背景効果を生み出す

01. HTMLドキュメントフレームワークを定義します

02. HTMLコンテンツを識別します

こんにちは！＆lt; / h1; ＆lt; divデータ視差＆gt。＆lt; div＆gt; / div＆gt。＆lt; div＆gt; / div＆gt。＆lt; div＆gt; / div＆gt。＆lt; / div＆gt;

03. CSS Parallaxコンテナを作成します

04. CSS視差レイヤーを設定します

05. CSSバックグラウンドレイヤーを使用してください

06. JavaScriptレイヤーの開始を実行します

07. JavaScriptマウスの動きを計算します

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

オールドスクールのアナグリフ効果を作成する

Adobe Illustratorでの視点を作成する

これらのヒントを含むグラファイトからもっとゲットする

あなたのCSSを最適化し、あなたのサイトをスピードアップする方法

GoogleのFlutterでクロスプラットフォームモバイルアプリを構築する

Blenderで複雑な3D SCI-Fiシーンを構築する

Sustomer Designerで華やかなタイルを作成する

わずか4色で自画像を作成する

カテゴリ

マウス制御視差の背景効果を生み出す

01. HTMLドキュメントフレームワークを定義します

02. HTMLコンテンツを識別します

こんにちは！＆lt; / h1; ＆lt; divデータ視差＆gt。 ＆lt; div＆gt; / div＆gt。 ＆lt; div＆gt; / div＆gt。 ＆lt; div＆gt; / div＆gt。 ＆lt; / div＆gt;

03. CSS Parallaxコンテナを作成します

04. CSS視差レイヤーを設定します

05. CSSバックグラウンドレイヤーを使用してください

06. JavaScriptレイヤーの開始を実行します

07. JavaScriptマウスの動きを計算します

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

カテゴリ

こんにちは！＆lt; / h1; ＆lt; divデータ視差＆gt。＆lt; div＆gt; / div＆gt。＆lt; div＆gt; / div＆gt。＆lt; div＆gt; / div＆gt。＆lt; / div＆gt;