スクロールダウンホバー効果を追加してDiviでWebページのデザインをプレビューする方法

それがポートフォリオページであろうと画像ギャラリーであろうと、ウェブデザイナーはビジネスを推進する重要な部分としてクライアントのために彼らのデザインを紹介する必要があります。 そして、多くの場合、これらの作業の例には、多くのスペースを占める可能性のあるWebページデザイン全体の画像が含まれています。 そのため、これらの画像にスクロールダウンホバー効果を追加すると、ポートフォリオを際立たせることができます。 これにより、ユーザーは最初にデザインのコンパクトな部分を見ることができます。 ただし、ユーザーが画像にカーソルを合わせると、画像がスクロールして、Webページを下にスクロールしているかのように、デザインの残りの部分がゆっくりと表示されます。 このタイプのエフェクトが使用されているのは、独自のDivi LayoutPacksページで確認できます。

このチュートリアルでは、Diviを使用して画像にスクロールダウンホバー効果を追加し、ユーザーがWebページのデザインをプレビューできるようにする方法を紹介します。 これは、あなたが気に入ると思うエレガントなインタラクティブ要素です。

スニークピーク

これは、このチュートリアルで一緒に構築するスクロールダウンホバー効果のプレビューです。

スクロールダウンホバー効果レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

それでは、チュートリアルに取り掛かりましょう。

始めるために必要なもの

このユースケースチュートリアルでは、Diviを使用して最初から設計を構築します。 また、ポートフォリオアイテムに使用するいくつかの画像/スクリーンショットが必要になります。 幅が1080px以上の画像を使用することをお勧めします。

3列の行の作成

まだ作成していない場合は、新しいページを作成します。 次に、ページにタイトルを付けて、フロントエンドにDiviビルダーをデプロイします。 次に、3列の行を持つ新しいセクションを作成します。

次のように行設定を更新します。

カスタム幅：100％
カスタムパディング（デスクトップ）：左5％、右5％
カスタムパディング（タブレット）：左25％、右25％
カスタムパディング（電話）：左15％、右15％

次に、次のカスタムCSSスニペットを各列のメイン要素に追加する必要があります。 [詳細設定]タブで、次のCSSを追加します。

列1のメイン要素CSS：

overflow: hidden;
height: 400px;

列2のメイン要素CSS：

overflow: hidden;
height: 400px;

列3の主要要素CSS：

overflow: hidden;
height: 400px;

各列の高さが400pxであることに注意してください。 これは最終的に、ホバー時にスクロールする画像のビューポートの高さとして機能します。 「overflow：hidden」プロパティは、（ホバー時に）列の外側に移動された画像の部分が非表示のままであることを確認します。 これは、画像に変換ホバー効果を追加するたびに意味があります。

スクロールダウンホバー効果で画像を作成する

これで、スクロールダウンホバー効果を使用して画像の作成を開始する準備が整いました。 効果がどのように機能するかを理解していれば、これは驚くほど簡単です。 基本的には、画像を追加してから、transform translateプロパティを使用して、ホバー時に画像を100％上に移動するだけです。 次に、画像が正しい位置で停止することを確認するために、ホバーしたときの列の高さに等しい上マージンを追加する必要があります。 これにより、画像の下部が表示されている正確なポイントで画像のスクロールが停止します。

これがその方法です。

列1に画像モジュールを追加します。次に、次のホバーオプションを追加します。

カスタムマージン（ホバー）：400pxトップ
変換変換Y軸（ホバー）：-100％

ホバーのカスタム上部マージンが、上記のカスタムCSSで列に指定された高さと等しいことを確認してください。

また、変換変換Y軸の値はピクセルではなくパーセンテージ（-100％）であるため、変換変換コントロールの入力ボックスに値を入力して、これを手動で入力する必要があります。

スクロールダウンホバー効果のしくみ

このセットアップの機能をいくつかの視覚的なイラストで説明すると役立つ場合があります。 使用している画像の高さが700pxだとします。 列の高さはわずか400pxです。 これは、デフォルト（ホバー前）では、画像が列の外側に広がるため、その画像の下部オーバーフローが非表示になることを意味します。

ユーザーが画像にカーソルを合わせると、2つのことが起こります。

まず、transform translateプロパティは、Y軸の値を-100％にして画像を上に移動します。 つまり、画像の高さ（700px）が何であれ、画像は100％上に移動します。

次に、画像の上マージンに400pxを指定して、画像を列ビューポートに戻し、画像が完全に下部に配置されるようにします。

これは、変換ホバー効果と同時に発生するため、結果はスムーズなスクロールになり、完全な配置で終了します。

実例での結果は次のようになります。

遷移時間と速度曲線の調整

お分かりのように、トランジションの継続時間は、ホバーで画像をプレビューするには速すぎます。 速度を落とすために、遷移期間を更新できます。 速度曲線を調整して、期間中の速度を変更することもできます。

以下を更新します。

移行時間：4000ms
遷移速度曲線：使いやすさ

一般に、ホバースクロール効果が発生したときにユーザーが画像を処理する時間を確保するために、高さが高い画像の遷移時間を長くする必要があります。

イメージモジュールをコピーして残りの列に貼り付けます

これで、画像モジュールをコピーして2列目と3列目に貼り付けるだけです。次に、それぞれの画像を新しい画像に更新します。 それでおしまい！

テキストモジュールを使用して各画像の上に見出しを追加する

各画像に見出しを追加する場合は、テキストモジュールを使用してこれを行うことができます。 ただし、テキストモジュールと画像モジュールを機能させるには、いくつかの調整を行う必要があります。

先に進み、列1の画像の上に新しいテキストモジュールを追加します。列が列の高さに設定されているため、ワイヤーフレームビューモードを使用しやすくなります。

次に、次のようにh2見出しでコンテンツを更新します。

<h2>Homepage</h2>

次に、次のように設計設定を更新します。

背景色：#ffffff
テキストの向き：中央
見出し2テキストサイズ：20px
見出し2行の高さ：2em
カスタムマージン：0px下
カスタムパディング：10pxトップ
ボックスシャドウ：スクリーンショットを参照

これらの設定は恣意的に見えるかもしれませんが、そうではありません。 これらの値は、後で知ることが重要なテキストモジュールの高さを予測できます。 たとえば、テキストモジュールの高さは60pxになることがわかっています。 数学をやってみましょう…

行の高さは2emで、見出し2のテキストサイズ（20px）の2倍です。 これは、私の行の高さが40pxになることを意味します。

カスタムトップパディングは10pxに設定されています。 また、Diviには、デフォルトですべての見出しにすでに存在する10pxの非表示の下部パディングがあります。 上部と下部のパディングを組み合わせて、20pxの高さを追加します。

つまり…40px（行の高さ）+ 20px（パディング）= 60px

これで、テキストモジュールの高さがわかりました。 もちろん、確認のために、開発ツールを使用していつでも要素を検査できます。

モジュールの下に存在するデフォルトのマージン（ガター幅で追加）を取り除くには、カスタムの下部マージン0pxが必要です。

ホバー時にテキストモジュールと画像が重なるため、テキストモジュールが画像の上に重ねられていることを確認する必要があります。 これを行うには、テキストモジュールに相対位置を指定し、次のようにz-index値を変更します。

次のカスタムCSSをメイン要素に追加します。

position:relative;

次に、zインデックスを更新します。

Zインデックス：3

テキストモジュールをコピーして貼り付ける

テキストの見出しが完成したので、2列目と3列目の画像の上に（ワイヤーフレームビューモードを使用して）コピーして貼り付けることができます。

次に、それぞれのコンテンツを更新するだけです。

テキストモジュールの高さに対応するために、各画像のホバーの上部マージン値を更新します

現在、列1、2、および3の各画像には、ホバー時に400pxのカスタム上マージンがあります。 これは、柱のカスタム高さの高さと等しくなるように設定されました。 ただし、テキストモジュールが列スペースの一部（高さ60px）を占有しているため、上マージンのホバー値を調整する必要があります。

これを行うには、複数選択機能を使用して3つの画像すべてを選択します。 次に、要素の設定を次のように更新します。

カスタムマージン（ホバー）：340pxトップ

これで、ホバー状態の終了時に画像が列の下部で完全に停止します。

最終結果

これが設計の最終結果です。

より多くのポートフォリオを表示するために、必要に応じて行を複製し、画像と見出しのテキストを更新してください。

タブレットと携帯電話での表示は次のとおりです。

最終的な考え

カスタムスクロールダウンホバー効果を使用してWebページのデザインを紹介すると、非常に優れたインタラクションが追加されるだけでなく、スペースも大幅に節約されます。 これにより、コンパクトで対称的なレイアウトで多くの画像を表示できます。 この種の機能は通常、プラグインで得られるものです。 ただし、Diviを使用すると、別のプラグインを追加しなくても、デザインと機能を完全に制御できます。 これがあなたの次のプロジェクトのために美しいポートフォリオギャラリーを作成するきっかけになることを願っています。

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

乾杯！