Diviのスクロール効果を使用してブレークアウェイ画像トランジションを作成する方法

Diviのスクロールエフェクトを使用すると、目を引くデザインで訪問者を驚かせることができる優れたトランジションアニメーションを作成できます。 特に画像は、これらのスクロール効果の力を驚くべき方法で示すことができます。 このチュートリアルでは、Diviのスクロール効果を使用して分離した画像遷移を作成する方法を段階的に説明します。 この効果は、もともとデモページで紹介されていました。 この効果には、Photoshopなどのフォトエディターを使用して事前に画像をスライスすることが含まれます（非常に簡単です）。 画像をスライスしたら、Diviに画像を追加し、組み込みのスクロール効果を使用して魔法を実行するだけです。

始めましょう。

スニークピーク

今日のデザインをのぞいてみましょう。

デザインのオリジナルのライブデモは、デモページの「エクササイズは退屈である必要はありません」というタイトルで見ることもできます。

Breakaway Image TransitionDiviレイアウトを無料でダウンロード

このチュートリアルのレイアウトを手に入れるには、まず下のボタンを使用してレイアウトをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトをページにインポートするには、zipファイルを抽出し、JSONファイルをDiviBuilderにドラッグするだけです。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

上記のDiviセットアップとは別に、次のものが必要になります。

• 2つの画像（少なくとも1080px x 540px）
• Diviに追加する前に画像をスライスするPhotoshopなどの写真編集ソフトウェア。

パート1：Photoshopで画像をスライスする

Diviでデザインの作成を開始する前に、ブレークアウェイトランジションスクロール効果に使用される2つの画像をスライスする必要があります。 両方の画像は、正確に1080px x540pxになるようにトリミングする必要があります。 その後、それらを8つの等しい部分（横に4つ、下に2つ）にスライスする必要があります。 準備ができたら、それらをコンピューターに保存して、画像スライスをサイトにアップロードできます。 最初の画像から始めましょう。

画像＃1

画像のトリミング

最初に行う必要があるのは、1080px x540pxの正確なサイズになるように画像をトリミングすることです。 これを行うには、任意の画像編集ソフトウェアを使用できます。 Photoshopでは、切り抜きツールを使用できます。

画像をスライスする

次に、クリックしてスライスツールを使用し、画像全体を選択します。 スライス/画像を右クリックして、[スライスの分割]オプションを選択します。

[スライスの分割]オプションボックスで、以下を更新します。

水平方向に次のように分割します。

• 2スライス下、等間隔
• スライスあたり270ピクセル

垂直方向に次のように分割します。

• 等間隔で4スライス
• スライスあたり270ピクセル

次に、[OK]をクリックします。

画像スライスの保存

これで、画像が8つの等しいブロックにスライスされ、それぞれが270px x270pxになりました。

画像スライスを保存するには、[ファイル]> [エクスポート]> [Web用に保存]に移動します。

次に、ファイル形式を選択して[保存]をクリックします。

ポップアップボックスで、必ず以下を更新してください。

• 名前を付けて保存：[画像の名前を入力してください]
• フォーマット：画像のみ
• 設定：デフォルト設定
• スライス：すべてのスライス

次に、[保存]をクリックします。

これで、すべての画像スライスがコンピューターに保存され、Diviにアップロードできるようになります。

画像＃2

この分離した画像遷移スクロール効果に必要な2番目の画像を作成するには、最初の画像の作成に使用したのと同じプロセス（トリミング、スライス、保存）に従う必要があります。

画像スライスを回転する

ただし、回転スクロール効果の仕組みにより、2番目の画像を構成する各画像スライスを左または右に90度回転させる必要があります。

画像を回転させるには、オペレーティングシステムからPhotoshopまたは組み込みの画像編集ソフトウェアを使用できます（サイトにアップロードした後、WordPressメディアギャラリーを使用して画像を編集および回転することもできます）。

これは、画像をスライスするときに画像を元の位置内で回転させる方法のガイドです。

これが元の画像です。

画像スライスをサイトにアップロードする前に、画像スライスを回転させる方法は次のとおりです。

これは、最終的に次のスクロール効果を得ることができるようにするために必要です。

両方の画像がトリミング、スライス、保存、回転されたので、Diviサイトに追加する準備が整いました。 合計16枚の画像が必要です（画像1から8枚、画像2から8枚）。

パート2：Diviでの分離画像遷移スクロール効果の作成

画像スライスの準備ができたら、Diviでデザインプロセスを開始できます。 これがその方法です。

行＃1を追加

まず、4列の行を作成します。

行設定

行設定を開き、以下を更新します。

• 側溝幅：1
• 最大幅：1080px（デスクトップ）、540px（タブレットと電話）
• パディング：0px上、0px下
• 水平オーバーフロー：表示
• 垂直オーバーフロー：表示

セクションのパディングを更新

2番目の行を最初の行の完全に上に配置するので、セクションの上部（および下部）のパディングを削除して、2番目の行の位置がずれないようにする必要があります。 セクション設定を開き、以下を更新します。

• パディング：上0px、左0px

画像の追加

最初の行では、最初の画像を構成する8つの画像/スライスのそれぞれを追加します。 画像は、フォトショップでスライスされたとおりに列内に配置する必要があります（横に4つ、下に2つ）。

これは、番号が付けられた各画像の図です。 これは、すべての画像が行に追加された後の外観です。

画像＃1

最初の画像モジュールを列1に追加します。

次に、最初の画像スライスをモジュールにアップロードします。

スクロール効果

[詳細設定]タブで、次のスクロール効果を画像に追加します。

• フェードインとフェードアウトを有効にする：はい
• 開始時の不透明度：100％（20％のビューポートで）
• 中程度の不透明度：100％（20％のビューポートで）
• 終了不透明度：0％（50％ビューポート）

[スケール]タブをクリックして、以下を更新します。

• スケールアップとスケールダウンを有効にする：はい
• 開始スケール：100％（20％ビューポートで）
• ミッドスケール：70％（32％– 48％ビューポート）
• 終了スケール：100％（60％ビューポート）

[回転]タブをクリックして、以下を更新します。

• 回転を有効にする：はい
• 回転開始：0度（0％ビューポート）
• 中間回転：0度（20％ビューポートで）
• 終了回転：-90度（60％ビューポートで）

ページを下にスクロールすると、スクロール効果は次のようになります。

画像＃2

イメージ＃2を作成するには、イメージ＃1を複製し、その複製を列2に配置します。

複製されたイメージモジュールをイメージ＃2で更新します。

スクロール効果を更新する

画像＃1から引き継がれた同じスクロール効果のほとんどを保持します。 変更する必要があるのは回転だけです。 [詳細設定]タブに移動し、終了回転を（-90度ではなく）90度に変更して、反対方向に回転させます。

• 終了回転：90度

画像＃3

画像＃3を作成するには、画像＃1をコピーして列3に貼り付けてから、画像を画像＃3に変更します。

画像＃4

イメージ＃4を作成するには、イメージ＃2をコピーして列4に貼り付け、イメージをイメージ＃4に更新します。

画像＃5

画像＃5を作成するには、画像＃1を複製して、複製が列1の真下にくるようにします。

画像を画像＃5に更新します。 次に、フェードインとフェードアウトのスクロール効果を次のように更新します。

• 開始時の不透明度：100％（0％ビューポート）
• 中間不透明度：100％（0％ビューポート）
• 終了不透明度：0％（40％ビューポート）

次に、スケールアップおよびスケールダウンスクロール効果を次のように更新します。

• 開始スケール：100％（0％ビューポートで）
• ミッドスケール：70％（12％– 28％ビューポート）
• 終了スケール：100％（40％ビューポートで）

そして最後に、回転スクロール効果を次のように更新します。

• 回転開始：0度（0％ビューポート）
• 中間回転：0度（0％ビューポートで）
• 終了回転：90度（40％ビューポートで）

画像＃6

画像＃6を作成するには、画像＃5を複製し、それを列2（画像＃2の下）に移動します。

イメージモジュールをイメージ＃5で更新します。 次に、次のように回転スクロール効果を反対方向（-90度）に調整します。

• 終了回転：-90度

画像＃7

イメージ＃7を作成するには、イメージ＃5を複製し、列3のイメージ＃3の下に移動します。次に、複製イメージモジュールをイメージ＃7で更新します。

画像＃8

イメージ＃8を作成するには、イメージ＃6を複製し、列4のイメージ＃4の下に移動します。次に、複製イメージモジュールをイメージ＃8で更新します。

これで、すべての画像スライスが行＃1に追加され、ブレークアウェイスクロール効果が得られました。

これまでの結果は次のようになります。

行＃2を追加

画像の2行目は、デザインにそれほど時間はかかりません。 行＃1を複製し、すべての画像を正しい画像で更新してから、絶対位置を指定するだけです。

先に進み、行＃1を複製します。

行＃2の画像を更新する

画像＃2用に作成した回転画像を思い出してください。 今、私たちがする必要があるのは、それらのそれぞれを行＃2内の正しい画像モジュールの場所にアップロードすることです。

画像のスクロール効果を更新する

新しい回転画像を配置したら、行＃2のすべての画像からフェードインおよびフェードアウトスクロール効果を取り除く必要があります。

これを行い、ワイヤーフレームビューモードを展開し、複数選択を使用して、行＃2の8つの画像すべてを選択します。 次に、選択したイメージの1つの設定を開いて、要素設定を展開します。 [フェードインおよびフェードアウト]スクロール効果オプションで、以下を更新します。

• フェードインとフェードアウトを有効にする：いいえ

行＃2を配置します

最後のステップは、行＃2を行＃1のすぐ後ろに配置することです。 これを行う簡単な方法は、行と絶対位置を指定することです。 行＃2の設定を開き、以下を更新します。

• 位置：絶対
• 場所：トップセンター

最終結果

結果を確認するには、セクションにかなりの量の上下マージンを与えるか、デザインの上下に他のセクションを作成する必要がある場合があります。 これにより、スクロール効果を正しく表示するために必要なスペースが得られます。

最終結果を確認してみましょう。

そして、ここではモバイル上にあります。

最終的な考え

この分離した画像遷移は、それ自体が印象的なデザインですが、簡単に使用して、訪問者に変換タイプのメッセージを伝えることができます（前後のように）。 そして、あなたもこのデザインに落ち着く必要はありません。 さまざまなスクロール効果を自由に試して、さらにすばらしい画像トランジションを作成してください。 何かアイデアはありますか？

コメントでお返事をお待ちしております。

乾杯！