Divi＆GSAPで垂直方向にスクロールするときに自動的に水平方向にスクロールする方法

Web上のWebサイトを探索すればするほど、実際にカスタマイズされたページ上のエクスペリエンスに出くわすことが多くなります。 特定の高度な機能を実現する方法を疑問に思っているかもしれませんが、答えは多くの場合、アニメーションJavaScriptライブラリを使用することです。 最近人気のあるアニメーションライブラリはGSAPです。 ただし、JavaScriptライブラリを何かに使用したいからといって、HTMLとCSSの部分も手動で実行する必要があるわけではありません。 Diviはあなたのウェブデザインプロセスの大部分を引き継ぐことができます。 構築と設計。これにより、カスタム機能とアニメーションに集中する時間を増やすことができます。 たとえば、今日のチュートリアルでは、DiviとGSAPを使用して実際に垂直方向にスクロールするときに、水平方向にスクロールする方法を示します。 これにより、高度なアニメーション効果が得られ、必要に応じてカスタマイズできます。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

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

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

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

無料でダウンロード

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

ダウンロード

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

アプローチの概要

私たちが使用しているもの

• ディビ
• GSAPJavaScriptライブラリ
• GSAP用のScrollTriggerプラグイン
• ScrollTriggerデモ

私たちが作成しているもの

• 垂直方向にスクロールするときの偽の水平方向のスクロール
• ピン効果
• 選択したいくつかのセクション（必ずしもページ全体ではない）でエフェクトを機能させる
• すべての画面サイズで簡単な水平画面エクスペリエンス

1.プレースホルダーセクションを追加します

セクション＃1を追加

作業中のページに最初のセクションを追加することから始めます。 このセクションはプレースホルダーとして機能するため、効果が適切に配置されるのを確認できます。

サイジング

セクション設定を開き、サイズ設定に高さを割り当てます。

• 高さ：60vh

クローンセクション＃1

次に、プレースホルダーセクションのクローンを1回作成します。 これにより、水平スクロールの一部ではなく、ページの上部と下部にスペースを生成できます（プレビューを参照）。

1.セクションデザインを構築する

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

2つのプレースホルダーセクションが配置されたので、水平スクロール内で使用する最初のセクションを作成します。 このセクションを2つのプレースホルダーセクションの間に追加します。

サイジング

セクション設定を開き、サイズ設定で最大高さを割り当てます。

• 最大高さ：100vh

オーバーフロー

また、垂直オーバーフローを自動に設定しています。 これは、前の手順の最大高さと組み合わせて、セクション要素がビューポートの高さを超える特定の画面サイズでスクロールバーを自動的に生成するのに役立ちます。

• 垂直オーバーフロー：自動

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

背景画像

モジュールをまだ追加せずに、行設定を開き、背景画像を使用します。

• 背景画像サイズ：カバー
• 背景画像の位置：中央

サイジング

次に、行のサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：
  • デスクトップ：70％
  • タブレットと電話：80％

間隔

間隔の設定と一緒に。

• トップパディング：
  • デスクトップ：30vh
  • タブレットと電話：20vh
• ボトムパディング：0px

列の設定

次に、列の設定を開きます。

背景色

列には白い背景色を使用します。

• 背景色：#ffffff

間隔

列のデザインタブに移動し、いくつかのカスタムパディング値を適用します。

• トップパディング：5％
• ボトムパディング：5％
• 左パディング：5％
• 右パディング：5％

国境

ボーダーも使用してください。

• ボーダー幅：1px
• ボーダーカラー：＃000000

テキストモジュール＃1を列に追加

H4コンテンツを追加する

モジュールを追加するときは、H4コンテンツを含む最初のテキストモジュールから始めます。

H4テキスト設定

モジュールの[デザイン]タブに移動し、H4テキスト設定を次のように変更します。

• 見出し4フォント：ソースコードプロ
• 見出し4テキストの色：＃000000
• 見出し4テキストサイズ：
  • デスクトップ：1.2vw
  • タブレット：2.5vw
  • 電話：3.5vw
• 見出し4文字の間隔：1px

テキストモジュール＃2を列に追加

H3コンテンツを追加する

前のテキストモジュールのすぐ下に別のテキストモジュールを追加し、コンテンツボックスでH3コンテンツを使用します。

H3テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてH3テキスト設定を変更します。

• 見出し3フォント：Alata
• 見出し3テキストサイズ：
  • デスクトップ：2.5vw
  • タブレット：4vw
  • 電話：7vw

テキストモジュール＃3を列に追加

コンテンツを追加する

選択した説明コンテンツを含む最後のテキストモジュールを列に追加します。

テキスト設定

それに応じてモジュールのテキスト設定を変更します。

• テキストフォント：ソースコードプロ
• 文字サイズ：
  • デスクトップ：0.8vw
  • タブレット：2vw
  • 電話：3vw
• テキスト行の高さ：1.5em

サイジング

次に、サイズ設定を変更します。

• 幅：
  • デスクトップ：67％
  • タブレットと電話：100％

間隔

そして、いくつかのレスポンシブパディング値を間隔設定に適用して、モジュール設定を完了します。

• トップパディング：
  • デスクトップ：3vh
  • タブレットと電話：5vh
• ボトムパディング：
  • デスクトップ：3vh
  • タブレットと電話：5vh

ボタンモジュールを列に追加

コピーを追加

行の設計を完了するために必要な最後のモジュールは、ボタンモジュールです。 選択したコピーをいくつか追加します。

ボタンの設定

モジュールの[デザイン]タブに移動し、それに応じてボタンの設定を変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：
  • デスクトップ：0.8vw
  • タブレット：2vw
  • 電話：3vw
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃000000
• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px
• ボタンフォント：ソースコードプロ
• ボタンのフォントスタイル：大文字

間隔

次に、いくつかのカスタムパディング値を追加します。

• トップパディング：15px
• ボトムパディング：15px
• 左パディング：50px
• 右パディング：50px

ポジション

そして、[詳細設定]タブでモジュールを再配置します。

• 位置：絶対
• 場所：左下隅
• 垂直オフセット：-5％
• 水平オフセット：5％

2.再利用セクション

セクションを2回クローンする

最初のセクションを完了したら、2回クローンを作成できます。

画像の変更とコピーとリンク

重複する各セクションで、画像を変更し、コピーしてリンクしてください。

2.機能を追加する

水平スクロールに含める各セクションにCSSクラスを追加する

すべての要素が整ったので、すべての機能に焦点を当てることができます。 結果を達成するための最初のステップは、水平スクロールの一部にしたい各セクションにカスタムCSSクラスを割り当てることです。 この場合、それはプレースホルダーセクション間の3つのセクションを意味します。

• CSSクラス：horizo​​ntal-section

ページ内のどこかに新しいコードモジュールを追加する

次に、コードモジュールをページに追加します。 これはどこでも構いません。

最初にGSAPとScrollTriggerライブラリを追加します

GSAPライブラリとScrollTriggerライブラリをコードモジュール内にコピーして貼り付けます。 次のソースでこれにスクリプトタグを使用します。

src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"

カスタムコードの新しいスクリプトタグを追加する

ライブラリスクリプトタグのすぐ下に、いくつかの新しいスクリプトタグを追加します。

JSコードを追加する

JQueryの使用に備える

これらのスクリプトタグ内で、JQueryをロードすることから始めます。

jQuery(document).ready(function($){  
});

ScrollTriggerプラグインを登録する

次に、ScrollTriggerプラグインを登録します。

gsap.registerPlugin(ScrollTrigger);

関連するすべてのセクションを新しいDivにラップする

また、次のコード行を使用して、関連する各セクションを新しいdiv内に配置します。

var allSections = $('.horizontal-section');
allSections.wrapAll('<div class="horizontal-container"/>');  

ScrollTriggerを使用して新しいGSAPトゥイーンを作成する

偽の水平スクロールを機能させるために、スクロールトリガー付きの新しいトゥイーンを使用します。 これを実現するコードは次のとおりです。

gsap.to(allSections, {
  xPercent: -100 * (allSections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-container",
    pin: true,
    start: "top top",
    scrub: 1,
    snap: false,
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
  }
});

カスタムCSSコードのスタイルタグを追加する

次に、コードモジュールにいくつかのスタイルタグを追加します。

スタイルタグの間にCSSコードを挿入する

そして、スタイルタグの間に次のCSSコード行を追加して、チュートリアルと機能を完成させます。

.horizontal-container {
width: 300%;
height: 100%;
display: flex;
flex-wrap: nowrap;
max-width: none;
}

#page-container {
overflow: hidden;
}

.horizontal-section {
width: 100%;
will-change: transform;
}

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、DiviとGSAPを使用してWebサイトをさらに進化させる方法を紹介しました。 具体的には、実際にページを垂直方向にスクロールするときに水平方向にスクロールする方法を示しました。 これは、ある時点で出くわしたかもしれないカスタムタイプのアニメーションであり、DIViでどのようにそれを行うことができるのか疑問に思いました。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。