背景のデザインをお願いします Divi マスクとパターンのおかげでページをスクロールするとアニメーション化されますか? このチュートリアルはあなたのためのものです...
にスクロールアニメーションを追加する Divi その背景マスクとパターンは、背景デザインに新しい命を吹き込むことができる便利なデザインのヒントです。 サイトのWeb.
このチュートリアルでは、Divi のスクロール オプションを使用して背景マスクとパターンを作成およびアニメーション化する方法を説明します (カスタム コードは必要ありません)。
これを行うには、ユーザーがセクションをスクロールするときに背景マスクとパターンをアニメーション化するために使用する Divi 行を使用してフローティング背景レイヤーを作成します。 コンテンツ.
結果は気に入っていただけると思います。
のは、始めましょう！
概要
このチュートリアルの背景スクロール アニメーションがどのように見えるかを簡単に示します。
コンセプト
このデザインのコンセプトを理解するのは難しくありません。 グラデーションの背景を持つセクションから始めます。
次に、(オーバーレイのように) セクションを完全に覆うように配置された (絶対) 線を作成します。 行に背景パターンを追加できます。
次に、列に背景マスクを追加できます。
次に、追加します スクロール効果 セクションの背景でパターンとマスクを別々にアニメーション化する行と列（スケールと回転のような）。
セクション オーバーフローを非表示にすると、セクション内に含まれるアニメーションだけが表示されます。
Divi Builderでページを作成することから始めましょう
開始するには、次のことを行う必要があります。
WordPress ダッシュボードから、 ページ>新規追加 新しいページを作成します。
わかりやすいタイトルをつけてクリック DiviBuilderを使用する
その後、クリック 構築を開始 (ゼロから構築)
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
Divi でアニメーション化されたスクロール背景マスクとパターンを作成する方法
セクションの背景デザイン
まず、行の作成をスキップして、テーマ ビルダーの既存のデフォルト セクションの編集に進みます。
背景デザインをブラウザいっぱいにするには、セクションに垂直方向の高さを追加する必要があります。 これを行う簡単な方法は、セクションに最小の高さを追加することです。
セクション設定を開きます。 タブの下 設計、最小の高さを更新し、次のようにパディングを削除します。
- 余白: 80 vh (上下)
- パディング: 0px (上下)
セクションの背景グラデーションのデザイン
セクションにカスタムの背景グラデーションを追加できるようになりました。
最初のグラデーション ストップを追加するには、タブの下でセクション設定が開いていることを確認します。 コンテンツ. 次に、タブを選択します 背景グラデーション をクリックして、新しいグラデーションを追加します。 これにより、XNUMX つのデフォルトのグラデーション カラーが追加されます。 次のように、色と位置を指定して次のグラデーション ストップを追加します。
- 勾配停止:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
次に、線形グラデーションの方向を変更します。
- 勾配方向: 270 度
セクションに行を追加
セクションが配置されたので、セクションに XNUMX 列の行を追加します。 この行は、背景マスクとパターン スクロール アニメーションに使用されます。
次に、作成した行を複製します。 この XNUMX 行目 (複製) は次の目的で使用されます。 コンテンツ いつものように。
これで、背景のスクロール アニメーションの先頭行と、 コンテンツ ノーマル。
カスタマイズライン
セクションの背景のグラデーションの準備ができたので、背景のスクロール アニメーションに使用する行に注意を向けることができます。
回線設定を開きます。 タブの下 高機能、次を更新します。
- ポジション: アブソリュート
これにより、ドキュメント内の実際のスペースを占有することなく、行をセクションに重ねることができます。
あとは、高さと幅がセクションの幅と高さ全体に及ぶように更新するだけです。 これにより、必要なオーバーレイと XNUMX 番目の背景デザイン レイヤーが作成されます。
タブの下 設計で、サイズ変更オプションを次のように更新します。
- Aquasize カラムの高さ: はい
- 幅: 100%
- 最大幅：100％
- 高さ: 100%
- パディング: 0px (上下)
今は線が見えないかもしれませんが、セクション全体の背景を完全にカバーしています。
線の背景パターンを作成する
この例では、パターンを追加します 紙吹雪 線の背景として。
回線設定を開きます。 オプションの下に 経歴、タブを選択します 背景パターン 以下を更新します。
- 背景パターン: 紙吹雪
- パターン：
- カラー: #f6bef7
- サイズ: カスタムサイズ
- 幅: 35 vw
- リピート原点：センター
NOTE : VW の長さ単位を使用すると、パターンがブラウザーに合わせてスケーリングされ、デザインの一貫性と応答性が維持されます。
行にスクロール効果を追加する
背景パターンが配置されたので、行にスクロール効果を追加できます。
タブに移動 高機能. オプションの下に スクロール効果、次を更新します。
タブを選択します 水平方向の動き 以下を更新します。
- 水平移動を有効にする: はい
- 開始オフセット: 0,5 (0% で)
- 中間オフセット: 0 (40% から 60%)
- 終了オフセット: -0,5 (100%)
これにより、線の背景パターンが 50 ピクセル左に移動し、50 ピクセル右に移動します。
[スケール アップとスケール ダウン] タブを選択し、以下を更新します。
- スケールアップとスケールダウンを有効にする: はい
- 開始スケール: 150% (0%)
- ミッドスケール: 100% (40% から 60%)
- エンディングスケール：150%（100%時）
これにより、スクロール時に行の背景パターンがスケーリングされます。
タブを選択します « 回転 » 以下を更新します。
- 回転を有効にする: はい
- 開始回転: 10 度 (0% で)
- 中回転: 0 度 (40% から 60%)
- 終了回転: -10 度 (100%)
重要なヒント: 回転を最小限に抑える必要があります。そうしないと、ラインがセクションを超えて延長されないギャップが表示されるリスクがあります。 経験則として、回転を増やしたい場合はスケールを増やすことをお勧めします。 これにより、エッジを露出させることなく、ラインをセクション上でピボットできます。
スクロール効果のある背景マスクを列に追加
行が完成したら、スクロール効果のある背景マスクを同じ行の列に追加する準備が整いました。 まず、背景マスクを追加しましょう。
これを行うには、列設定を開きます。 タブの下 背景マスク、次を更新します。
- マスク: レイヤーブロブ
- 色: #ffffff
- マスク変換: 水平反転、反転
列にスクロール効果を追加する
背景マスクが配置されたので、列にスクロール効果を追加できます。 列には、親行から継承されたスクロール効果が既にあることに注意してください。
スクロール中にマスクとパターンをより分離するために、列を行の反対方向に回転させるだけです。
タブに移動 高機能. オプションの下 スクロール効果、タブを選択します ロタティng を実行し、以下を更新します。
- 回転を有効にする: はい
- 開始回転: -15 度 (0% で)
- 中回転: 0 度 (40% から 60%)
- 終了回転: 15 度 (100% で)
セクションのオーバーフローを非表示
現在、スクロールによってセクションを超えて拡張するたびに、行は表示されたままになります。
これをクリーンアップするには、セクション オーバーフローを非表示にする必要があります。 これを行うには、セクション設定を開きます。 タブの下 高機能、オプションを更新します 可視性 次のように ：
- 水平オーバーフロー: 非表示
- 垂直オーバーフロー: 非表示
今では見栄えが良くなりました。
この目的のために作成された行にコンテンツを追加する
この時点で、背景マスクとパターン スクロール アニメーションは完了です。 コンテンツ用に以前に作成した行に、必要なコンテンツを追加するだけです。
この例では、静的テキストで背景アニメーションがどのように見えるかを確認できるように、ダミーのタイトルを追加しました。
最終結果
設計の最終結果を見てみましょう。
今すぐDIVIをダウンロードしてください!!!
まとめ
Divi の背景オプションを使用して、こんなに美しい背景を簡単に作成できるのは驚くべきことです。 さらに、Divi のスクロール効果でアニメーションを追加すると、これらのデザインに新しい命が吹き込まれます。
異なる外観を得るには、各レイヤーで異なるマスクとパターンを試すことができます。 使用方法についてさらにインスピレーションが必要な場合は、 マスクとパターン 背景、これらをチェックしてください 12 種類の背景マスクとパターンの組み合わせ
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...