ディビのスクロール効果で画像ギャラリーを表示する方法

画像ギャラリーは、ほとんどのWebサイトで人気のある目的地です。そして、多くの場合、これらの画像ギャラリーを明るく静的に保ち、画像が魔法のように機能するようにするのが最善の場合があります。

ただし、スライドパズルのスクロール効果を追加します画像ギャラリー（このチュートリアルで行うように）、時代を超えたクラシックにさわやかなタッチを与えることができます。

このチュートリアルでは、Diviでスライドパズルスクロール効果を使用して画像ギャラリーを表示する単純なレイアウトを作成する方法を示します。

重要なのは、画像のサイズが各スクロール効果の垂直方向と水平方向のオフセット値にどのように関連しているかを理解して、画像を正確にXNUMXポイント移動することです。しかし、完了すると、結果として得られるモーションエフェクトは、独自の方法で画像のギャラリーを徐々に組み立てて表示するため、鮮明で正確になります。

可能な結果

これは、このチュートリアルで作成するスライディングパズルスクロール効果を備えた画像ギャラリーレイアウトの概要です。

ヘッダーセクションの作成

開始するには、ページをスクロールしてギャラリーを表示し、すばらしいスクロール効果を使用するようにユーザーに指示するクイックヘッダーセクションを作成しましょう。

行を追加する

デフォルトのセクションにXNUMX列の行を追加します。

テキストモジュールを追加する

列/行内に新しいテキストモジュールを追加します。

テキスト設定で、本文の内容を次のように更新します。

<h1>Image Gallery</h1>

テキストモジュール設定

[デザイン]タブで、テキストデザインを次のように更新します。

タイトルのフォント：Roboto
タイトルのフォントの太さ：太字
タイトルのフォントスタイル：TT
ヘッダーテキストの配置：中央
ヘッダーテキストサイズ：50px（デスクトップ）、40px（タブレットと電話）
タイトル文字の間隔：4px

Blurbモジュールアイコンを追加する

テキストが配置されたら、テキストモジュールの下に新しいプレゼンテーションテキストモジュールを追加します。

次に、デフォルトのコンテンツからすべてのタイトルと本文を削除し、下矢印アイコンを使用することを選択します。

プレゼンテーションのテキスト設定

次に、プレゼンテーションのテキスト設定を新しい色で更新し、スライドアニメーションを繰り返します。

アイコンの色：＃ffb500
アニメーションスタイル：スライド
アニメーションの方向：下
アニメーション強度：20％
アニメーションの繰り返し：ループ

セクションのパディング

セクションにスクロール用のスペースを与えるには、次のようにパディングを更新します。

パディング：上20vh、下50vh

ここでは、間隔がすべてのブラウザーサイズに一貫して収まるように、ブラウザーウィンドウの高さを基準にした長さvhの単位を使用しています。

スクロール効果のある画像ギャラリーの作成

ヘッダーセクションが完成したので、スライド式パズルスクロール効果を使用して実際の画像ギャラリーを構築する準備が整いました。ギャラリー全体は、各行に4つの画像/列の12つの行で構成され、合計XNUMXの画像になります。ただし、レイアウトが完成したら、簡単に線や画像をレイアウトに追加できます。

セクションとラインの作成

新しいセクションを追加する

まず、タイトルセクションの下に新しい通常のセクションを追加します。

行を追加する

次に、XNUMX列の行をセクションに追加します。

ライン設定

ライン設定で、以下を更新します。

側溝幅：1
幅：100％
最大幅：1200ピクセル（デスクトップ）、600ピクセル（タブレット）、300ピクセル（電話）

線幅が画像サイズを決定する方法

行の幅は、1つの列のそれぞれの幅を決定するため、この設計にとって非常に重要です。ガター幅をXNUMXに設定すると、画像間にマージンがなくなります。

また、最大幅を1200pxに設定すると、300列のレイアウトにより、各列/画像の幅は正確に1200pxになります（4px / 300 = XNUMXpx）。

また、各画像は正方形であるため、各画像の高さも300ピクセルになることがわかります。望まないのであれば、そのように保つ必要はありません。

たとえば、400 x400ピクセルの画像を含む300列のレイアウトを選択することもできます。画像の幅（300px）と高さ（XNUMXpx）を知ることは、後でスクロール効果を作成するための鍵になります。

画像を追加する

画像1を追加

画像1スクロール効果

画像サイズとスクロール効果オフセットの関係

垂直および水平スクロール効果を使用する場合、入力された数値が何を表すかを理解することが重要です。この例では、垂直移動開始オフセットが-3です。この-3は、実際には画像の幅である-300px（または300px下）です。

ユーザーがスクロールすると、オフセットは0（ホームポジション）に達します。これは、画像を正確に3つのブロック/フレームに移動するスクロール効果を作成するものです。水平方向の移動は300（右からXNUMXピクセル）から始まり、デフォルトの位置で停止します。これらのXNUMXつの効果を組み合わせて、独自のXNUMXつの部分からなるスクロール効果を作成します。