Diviでアプリのイラストを使用するための拡張レイヤースクロール効果を作成する方法
公開: 2020-03-11ウェブサイトでアプリや製品を紹介するのは、静止画像やグラフィックに限定する必要はありません。 Diviのスクロール効果を使用すると、訪問者を引き付ける微妙で効果的なアニメーションを追加することで、アプリのイラストに命を吹き込むことができます。 このチュートリアルでは、Diviで拡張レイヤースクロール効果を作成する簡単な方法を明らかにします。 必要なのは、同じサイズの3つの画像（またはスクリーンショット）と、Diviビルダーに組み込まれているすべての魔法だけです。
すぐに飛び込んで始めましょう。
スニークピーク
レイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、JSONファイルをDiviBuilderにドラッグするだけです。
チュートリアルに取り掛かりましょう。
始めるために必要なもの
開始するには、次のことを行う必要があります。
- まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
- WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
- 「最初から構築」オプションを選択します。
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
Diviで魅力的なアプリのイラストの拡張レイヤースクロール効果を作成する
行を追加する
2列（1/2）行を追加することから始めましょう。
セクションに一時的なマージンを追加する
後でスクロール効果をプレビューできるようにするには、次のようにセクションに上下の余白を追加します。
- マージン：上80vh、下80vh
3つの画像をレイヤーとして追加
アプリのイラストの3つのレイヤーとして機能する3つの画像を作成します。 アイデアは、同じサイズ/寸法のアプリの機能の3つの画像（またはスクリーンショット）を使用して、画像が互いに完全に重なるようにすることです。 次に、Diviスクロール効果を使用して3つのレイヤーを移動します。
最初の画像から始めましょう。
画像の作成1
左側の列に画像モジュールを追加します。
次に、最初の画像をモジュールにアップロードします。 3つの画像すべてが同じサイズになることを忘れないでください。 これは500pxx1050pxです。
画像1の設定
イメージモジュールの設定を開き、以下を更新します。
幅とマージン
- 幅：300px（デスクトップとタブレット）、150px（電話）
- モジュールの配置：左
- マージン：0px下
国境
- 丸みを帯びた角：40px
- ボーダー幅：15px
- ボーダーカラー：#ffffff
ボックスシャドウ
- ボックスシャドウ：スクリーンショットを参照
- ボックスシャドウの垂直位置：0px
- ボックスシャドウブラー強度：48px
- 影の色：rgba（0,0,0,0.2）
画像2を作成する
イメージ2を作成するには、イメージ1を複製します。
次に、複製した画像モジュールを同じサイズ（500px x 1050px）の新しい画像で更新します。
画像2の設定
次に、以下を更新して境界線を削除します。
国境
- ボーダー幅：0px
この画像には境界線は必要ありませんが、画像がシームレスにスタックされるように、境界線の間隔をパディングに置き換える必要があります。
パディング
- パディング：上15px、下15px、左15px、右15px
ポジション
次に、画像2の位置を絶対に更新します。 これにより、画像が画像1と完全に重なります。
- 位置：絶対
詳細については、Diviで絶対位置を使用する方法に関する投稿全体を確認してください。
スクロール効果
次に、ページを下にスクロールするときにレイヤー（画像2）を移動するスクロール効果を追加します。
スクロール効果を次のように更新します。
[垂直モーション]タブの下…
- 垂直モーションを有効にする：はい
- 開始オフセット：0（0％ビューポートで）
- 中間オフセット：0（0％ビューポートで）
- 終了オフセット：-1（100％ビューポートで）
[水平モーション]タブの下…
- 水平モーションを有効にする：はい
- 開始オフセット：0（0％ビューポートで）
- 中間オフセット：1（50％ビューポートで）
- 終了オフセット：-1.5（100％ビューポートで）
[フェードインとフェードアウト]タブの下…
- フェードインとフェードアウトを有効にする：はい
- 開始不透明度：0％（0％ビューポートで）
- 中程度の不透明度：100％（10％〜15％のビューポート）
- 終了不透明度：70％（30％ビューポート）
画像3を作成する
すべてのスクロール効果が画像2に追加されたら、画像3を作成する準備が整います。
ビルダーの下部にある設定メニューを開き、[レイヤー]ボタンを選択してレイヤーポップアップを展開します。 次に、列1内に画像モジュール2を複製して、画像3を作成します。重複するモジュールを選択するのは難しいため、このためにレイヤー機能を使用すると便利です。
次に、複製画像（画像3）の設定を開き、新しい画像をアップロードします。 必ず同じサイズ（500px x 1050px）にしてください。
画像3スクロール効果
[詳細設定]タブで、画像3のスクロール効果オプションを更新します。
[垂直モーション]タブで、垂直モーションオフセットを次のように更新します。
- 終了オフセット：-2（100％ビューポートで）
[水平方向のモーション]タブで、水平方向のモーションを次のように更新します。
- 中間オフセット：2（50％ビューポート）
- 終了オフセット：3（100％ビューポートで）
[フェードインとフェードアウト]タブで、次のようにフェードインとフェードアウトの設定を更新します。
- 開始時の不透明度：5％（0％ビューポート）
- 中程度の不透明度：100％（30％〜40％のビューポート）
- 終了不透明度：100％（50％ビューポート）
結果
これまでの結果を確認してください。
変換スキューを列1に追加します
これは現状では見栄えの良い効果ですが、列を傾斜させて3D効果をさらに作成します。
列1の設定を開き、次のように変換スキューを追加します。
変形スキュー（X軸とY軸）：8度
これにより、拡大するレイヤーに素晴らしい3D効果が作成されます。
それでおしまい！
オプション：列2にCTAを追加します
これで、いくつかの無料のスクロール効果を使用して、任意のタイトルとボタン（または任意のCTA）を右側の列に追加できます。 この図で同じCTAを取得するには、上記のこのレイアウトの無料ダウンロードを確認してください。
最終結果
これが最終結果です。
そして、これがタブレットと電話でどのようにスタックするかです。
Diviレイアウトパックの画像を使用する
このチュートリアルで使用されている画像は、Shutterstockのモック画像であり、スクロール効果のデモページにも掲載されています。
自分のニーズに合わせてデザインを変更するには、無料のレイアウトパックの画像を使用するか、独自のスクリーンショットを作成します。 これは、モバイルアプリレイアウトパックの画像を使用したデザイン例です。 また、拡大するレイヤーに使用される明るい画像を補完するために、グラデーションの背景を追加しました。
数分で、まったく異なるデザインになりました！
最終的な考え
拡張レイヤースクロール効果は、より複雑なCSSテクニックや写真編集に頼ることなく、アプリや製品を紹介するためのエレガントなソリューションです。 そして、これと同じテクニックを使用して、ほぼすべてを説明できます。 自分用に画像を切り替えて、Diviの1つの簡単なオプションで画像/レイヤーのコレクション全体を歪めることがいかに簡単であるかが大好きです。 うまくいけば、これはあなたに素晴らしいDiviデザインを作成する力を与えるいくつかのインスピレーションを与えるでしょう。
コメントでお返事をお待ちしております。
乾杯！