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

Feb 2, 2026
操作方法
parallax mouse site
（画像クレジット：Renaud Rohlinger）

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

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

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

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

parallax mouse site

モノクロスプラッシュスクリーンに開くと、サイトはすぐにアニメーションの3D背景を日本のタイポグラフィーと並置します。 （画像クレジット：Renaud Rohlinger）

最初のステップは、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コンテナを作成します

parallax mouse site

スクロールダウン、物事は猫のキャラクターに従う励ましで、よりカラフルになり、メインポートフォリオへの道をクリックしてください。 （画像クレジット：Renaud Rohlinger）

新しいファイルを作成します 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バックグラウンドレイヤーを使用してください

parallax mouse site

サイトの宣伝から開発作業を見つけることを熱心に、RENAU向廃棄物は彼のWebGL Prowessを展示する機会はありません （画像クレジット：Renaud Rohlinger）

各画像層はステップ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ウェブデザインツール

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

FormikでReact Form Stateを管理する

操作方法 Feb 2, 2026

（イメージクレジット：マット・クラウチ） FormikでReact Form Stateを管理する方法につい�..

How to make a photo collage in Photoshop CC

操作方法 Feb 2, 2026

Photoshopでフォトコラージュを作る方法を学ぶと、さまざまな状況が多いです。個々の写真は間に合うようにシングルモーメントをキャプチャ�..

CSSでグリッチテキストとイメージ効果を作成する方法

操作方法 Feb 2, 2026

このチュートリアルでは、グリッチテキスト効果を作成する方法を説明します。特別な効果とアニメーションは、ウェブサイトが際立ってい�..

2Dイラストを3Dアートに回す

操作方法 Feb 2, 2026

私の作りへの旅 3Dアート 私の兄弟が試してみるように私に言ったときに数年前に始�..

Zbrushのエイリアン海賊クリーチャーをモデル化する

操作方法 Feb 2, 2026

3Dエイリアンの海賊キャラクターを作成する方法を学ぶのを助けるために、私は私が私のクリー�..

SASSから始める方法

操作方法 Feb 2, 2026

セスティ 機能、変数、ループなど、他のプログラミング言語からCSSへの多くの機能を�..

サイトにビジュアルキューを追加する

操作方法 Feb 2, 2026

Webページが興味を持っていないことを見つけるためにのみ、Webサイトのユーザーにとって迷惑で..

10トップヒューディーチュートリアル

操作方法 Feb 2, 2026

Houdiniは強力な獣であり、多くのハリウッド映画で使用されるVFXを構築するためのツールがあります。しかし、最初の学習曲線は急勾配である�..

カテゴリ