ユニークなデザインのためにDiviでアニメーションと視差を組み合わせる方法
公開: 2019-08-07食事の準備でもウェブサイトのデザインでも、食材だけでは美味しい料理や美しい場所を保証するものではありません。 すべての違いを生むのは、これらの要素をどれだけうまく組み合わせるかです。 このチュートリアルでは、これまで考えたことのない方法でアニメーションと画像視差を組み合わせる方法を紹介します。 まだご存じない場合、アニメーションは組み込みのDivi機能であり、ページの読み込み時に任意のDivi要素に追加できます。 視差は、スクロール時に背景画像に独自の動きを追加できるDiviオプションでもあります。
今日は、Diviの組み込みのデザイン設定を使用して、アニメーションと視差をあらゆる種類の創造的な方法で組み合わせます。 この組み合わせは非常に魔法のように連携して、ページを下にスクロールすると見栄えのするアニメーション視差画像の美しいレイアウトを作成します。
始めましょう！
スニークピーク
レイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
チュートリアルに行きましょう。
始めるために必要なもの
開始するには、次のものが必要です。
- Diviテーマがインストールされ、アクティブになっています
- フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
- モックコンテンツに使用する画像。 このチュートリアルで使用される画像は、Life Coach Divi LayoutPackにあります。
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
基本的な考え方
このデザインコンセプトの背後にある基本的な考え方は、背景画像でのCSS視差の使用に集中しています。 CSS視差の動作方法により、視差画像は固定されたままになり、使用する要素のサイズに関係なく、ブラウザウィンドウ全体に自動的に表示されます。 画像の固定された性質により、Diviの複数の要素で同じ視差画像を使用し、アニメーションを使用してそれらの要素を移動できます。 アニメーションが落ち着くと、使用される視差の背景画像が一致し、ページを下にスクロールしたときに期待どおりに機能します。
パート1：Diviアニメーションと視差デザインの作成（バージョン1）
2列（1/2 1/2）行の新しいセクションを作成します。
モジュールを追加する前に、セクションと行にいくつかの調整を加えましょう。
セクションと行の設定を更新する
まず、セクション設定を開き、次のようにデフォルトのパディングを削除します。
パディング：0px上、0px下
次に、行の設定を開き、行に視差の背景画像を付けます。
背景画像：[画像をアップロード]
視差効果を使用する：はい
視差法：CSS
ここで、デザインを機能させるには、視差メソッドをCSSに設定する必要があります。
幅：100％
最大幅：100％
パディング：上10vw、左10vw、右10vw
視差の背景が一致するテキストモジュールを追加する
これで、テキストモジュールをデザインに追加する準備が整いました。 最初のテキストモジュールは、この設計の鍵です。 まったく同じ背景画像とcss視差をテキストモジュールに適用することで、アニメーションをクリエイティブに表現して、完全にユニークな効果を得ることができます。
先に進み、新しいテキストモジュールを列1に追加します。
次に、テキストモジュールの設定を次のように更新します。
ボディコンテンツ：
<p>Hi!<br>I'm Jane...</p> <a href="#">about me</a>
次に、テキストモジュールに、行に追加したのと同じcss視差の背景画像を指定します。
背景画像：[画像をアップロード]
視差効果を使用する：はい
視差法：CSS
テキストフォント：Fira Sans
テキストフォントの太さ：軽い
テキストテキストの色：#ffffff
テキストテキストサイズ：70px
テキスト行の高さ：1em
リンクフォントスタイル：下線（U）
リンクテキストの色：#ffffff（デフォルト）、＃881e67（ホバー）
リンクテキストサイズ：30px
リンク文字の間隔：2px
パディング：上20％、下20％、左10％、右10％
ボーダー幅：20px
ボーダーカラー：#ffffff
次に、次のアニメーションをテキストモジュールに追加します。
アニメーションスタイル：スライド
アニメーションの方向性：右
アニメーション時間：1500ms
アニメーション強度：80％
アニメーションの開始不透明度：20％
これまでの効果を確認してみましょう…
アニメーションテキストモジュールの背景画像が、行の背景の一致する場所にどのように配置されるかに注目してください。 これは、両方がcss視差効果で同じ背景画像を共有しているためです。
真の視差背景画像を使用した2番目のテキストモジュールの追加
この時点で、次のテキストモジュールを追加する準備が整いました。 この次のものは、真の視差効果を使用して異なる背景画像を持ちます。 また、アニメーションもいくつか提供します。
列2に新しいテキストモジュールを追加します。
次に、本文のコンテンツを「myblog」という単語で更新します。
次に、真の視差法を使用して背景画像を追加します。
背景画像：[画像をアップロード]
視差効果を使用する：はい
視差法：真の視差
テキストフォント：Fira Mono
テキストフォントスタイル：TT
テキストテキストの配置：中央
テキストテキストの色：#ffffff
テキスト文字の間隔：10px
幅：320px
最大幅：320px
モジュールの配置：中央
マージン:(デスクトップ）：-5vw上部、4vw下部
マージン（タブレットと電話）：3vwトップ
パディング：上70px、下70px
ボーダー幅：20px
ボーダーカラー：#ffffff
アニメーションスタイル：スライド
アニメーションの方向：下
アニメーションの遅延：200ms
新しい視差背景画像を使用した3番目のテキストモジュールの作成
3番目のテキストモジュールを作成するには、列2で作成したテキストモジュールを複製します。
次に、背景画像を同じに保ちますが、CSS視差メソッドを使用して視差効果を更新します。
幅：240px
最大幅：240px
モジュールの配置：左
マージン：0px下
パディング：上170px、下170px、左95px、右95px
カスタム幅と左右のパディングを使用して、長いモジュール設計に適した垂直テキスト表示を作成します。
次に、アニメーションの方向を下ではなく上に更新します。
アニメーションの方向性：UP
最終結果
それでは、最終結果を確認しましょう。
パート2：アニメーションと視差デザインの作成（バージョン2）
この次のデザインでは、モジュールの最初のアニメーションの後に行の視差背景画像をロードすることにより、独自のアニメーションを追加します。 これを行うには、コンテンツの背後に移動するCSS視差背景画像に厳密に別の行を使用する必要があります。 また、最初にセクションの背景を公開するので、行のアニメーションの前にコンテンツのカスタム背景色を追加できます。
これがその方法です。
まず、ワイヤーフレームビューモードを展開します。 次に、テキストモジュールを含む行を複製します。 これで、2つの同じ行ができます。 次に、一番上の行内のテキストモジュールを削除します。 私たちが本当にやりたかったのは、一番上の列のデザインを先取りすることだけでした。
次に、一番上の行の設定を次のように更新します。
高さ：900px（デスクトップ）、2000px（タブレットと電話）
パディング：0px上、0px下
アニメーションスタイル：スライド
アニメーションの方向性：右
アニメーション時間：1250ms
アニメーションの遅延：1800ms
空の行にはデフォルトで高さがないため、行に設定された高さを指定しています。 したがって、行の高さが2番目の行のコンテンツをコンテンツでカバーするのに十分であることを確認する必要があります。 また、テキストモジュールが表示された後、コンテンツの後ろにスライドするように、行に遅延のあるアニメーションを与えました。
2つの行が重なっている
これで、下の行を負のマージンを使用して上に移動し、上の行が背景アニメーションと重なるようにするだけです。
下の行の設定を開き、次のようにマージンを更新します。
マージン：-900pxトップ（デスクトップ）、-2000px（タブレットと電話）
次に、一番上の行の背景画像を代わりに使用するため、行のcss視差メソッドを使用して背景画像を取り出します。
これがこれまでのデザインです。 最初の行の遅延背景アニメーションと、列1のテキストモジュールの視差背景が完全に一致していることに注目してください。
セクションの背景色の追加
行アニメーションの前にテキストモジュールに最初の背景色を与えるために、セクションに背景色を与えることができます。
セクション設定を開き、以下を追加します。
背景グラデーションの左の色：rgba（136,30,103,0.61）
背景グラデーション右の色：＃881e67
グラデーションタイプ：ラジアル
最終結果
それでは、最終結果を確認しましょう。
オプションのブレンドモードとアニメーションの組み合わせ
2行目にブレンドモードを追加し、モジュールアニメーションと連携して機能するズームアニメーションを追加することで、さらにクリエイティブにすることもできます。
ブレンドモード：明度
アニメーションスタイル：ズーム
これが最終結果です。
そして、これがモバイルでどのように見えるかです。
最終的な考え
アニメーションと視差画像を組み合わせるいくつかのユニークな方法を探求しながら、途中でいくつかのことを学んだことを願っています。 結果は間違いなくユニークであり、この設定を簡単に調整して、次のプロジェクトで見事に見える他の無数の組み合わせを構築できると確信しています。
コメントでお返事をお待ちしております。
乾杯！