Diviの組み込みのスクロール効果を使用してスムーズなアニメーションを作成する方法を探している場合は、このチュートリアルを気に入るはずです。 スクロールスナップとDiviの組み込みモーションエフェクトを組み合わせて、一度にスクロールできるフルハイトセクションを作成する方法を紹介します。
最初のセクションを作成することから始めます。 したがって、このセクションはページのデザイン全体で再利用します。 スクロールスナップを有効にするには、ページのセクション、HTML、ヘッダー、およびフッターに割り当てるCSSスクロールスナッププロパティを使用します。
可能な結果
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
1.新しいページを作成し、最初のセクションのデザインを開始します
新しいページを追加してVisual Builderに切り替えます
新しいページを追加することから始めます。 ページタイトルを入力してページを公開し、VisualBuilderに切り替えます。
セクション設定
サイズ剤
新しいページに入ったら、すでにそこにあるセクションを開き、サイズ設定を変更します。
- 最低の高さ：100vh
主な要素
また、セクションにXNUMX行のCSSコードを追加します。 これらのCSSコード行は、セクションをスクロールスナップのスナップポイントに変えるのに役立ちます。
scroll-snap-align：開始; scroll-snap-stop：通常;
可視
セクションコンテナー以外に何もないことを確認するために、セクションオーバーフローを非表示にします。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
行＃1を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加し続けます。
サイズ剤
モジュールをまだ追加せずに、行の設定を開き、次のようにサイズを変更します。
- カスタムの樋幅を使用：はい
- 側溝の幅：1
- Width：100％
- 最大幅：100％
間隔
セクションのデフォルトの上部と下部のパディングも削除します。
- 上パディング：0px
- 下パディング：0px
役職
そして、それに応じて行を再配置します。
- ポジション：絶対
- 場所：下中央
列にテキストモジュールを追加
コンテンツボックスを空のままにする
この行で必要な唯一のモジュールは、テキストモジュールです。 モジュールのコンテンツボックスは空のままにしてください。
背景色
次に、背景色を変更します。
- 背景色：＃ffee00
テキスト設定
モジュールのテキスト行の高さも削除します。
- テキスト行の高さ：1em
サイジング
次に、サイズ設定に移動して幅を変更します。
- Width：30％
間隔
上部のパディングも追加して、モジュールを正方形に変えます。
- 上部パディング：30％
行＃2を追加
カラム構造
次の行。 次の列構造を使用します。
サイズ剤
モジュールをまだ追加せずに、行設定を開き、[デザイン]タブでサイズ設定を変更します。
- カスタムのガター幅を使用：はい
- 側溝幅：1
- 幅：60vw
- 最大幅：100％
スペーシング
次に、さまざまな画面サイズにカスタムの上部マージンを追加します。
- 上マージン：20vh（デスクトップコンピューター）、5vw（タブレットと電話）
列2の間隔
次に、列2の設定を開き、カスタムの塗りつぶし値を追加します。
- 上部パッド：2vh（タブレットと電話）
- 左パディング：2vw
- 右パディング：2vw
列1に画像モジュールを追加します
画像をアップロード
modを追加し、画像modを列1に追加して、選択した画像をアップロードします。
サイズ剤
次に、モジュールの全幅を強制します。
- 全幅を強制：はい
テキストモジュール＃1を列2に追加します
H2コンテンツを追加
XNUMX 番目の列で、必要な最初のモジュールは次のテキスト モジュールです。 コンテンツ H2。
H2テキスト設定
モジュールデザインタブに移動し、H2テキスト設定を次のように変更します。
- 見出し2フォント：アントン
- アイテム2テキストサイズ：5vw（デスクトップ）、7vw（タブレット）、9vw（電話）
テキストモジュール＃2を列2に追加します
コンテンツを追加する
前のテキスト モジュールのすぐ下に別のテキスト モジュールを追加し、 コンテンツ 選択した説明の。
テキスト設定
モジュールのテキスト設定を次のように変更します。
- テキストフォント：Open Sans
- テキストサイズ：0.8vw（デスクトップ）、2vw（タブレット）、2.5vw（電話）
- テキスト行の高さ：1,8 em
スペーシング
そして、間隔設定にカスタムの上下マージンを追加します。
- 上余白：2vw
- 下マージン：2vw
2列にボタンモジュールを追加します
コピーを追加
この列で必要な次の最後のモジュールはボタンモジュールです。 選択したコピーを追加します。
ボタン設定
それに応じてボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用：はい
- ボタンのテキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- ボタンのテキストの色：＃333333
- ボタンのボーダー色：＃333333
- ボタンの半径：1px
- ボタンのフォント：アントン
- ボタンのフォントスタイル：大文字
スペーシング
そして、画面サイズに基づいてカスタム値を追加して、モジュール設定を完了します。
- 高い内部マージン：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- 低い内部マージン：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- 左内部マージン：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
- 右インターネットマージン：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
2.さまざまな要素にスクロール効果を追加する
1行目のテキストモジュール
垂直アニメーション
すべての要素を配置したら、スクロール効果を追加します。 最初の行でテキストモジュールを開き、垂直方向の動きを使用します。
- 垂直運動を有効にする：はい
- 開始オフセット：4
- 中央オフセット：0
- 終了オフセット：-4
- モーションエフェクトトリガー：要素の中央
2行目
列1
横型アニメーション
次に、XNUMX行目の最初の列を開き、水平方向の動きを追加します。
- 水平移動を有効にする：はい
- 開始オフセット：-3
- 平均オフセット：0（40％から60％）
- 終了オフセット：-3
- トリガーモーション効果：要素の中央
フェードインとフェードアウト
また、同じ列にフェードインおよびフェードアウト効果を適用します。
- フェードインとフェードアウトを有効にする：はい
- 初期不透明度：0％
- 平均不透明度：100％
- 終了不透明度：100％
- トリガーモーション効果：要素の中央
列2
水平移動
次に、XNUMX列目のパラメーターを開き、次の水平移動パラメーターを適用します。
- 水平移動を有効にする：はい
- 開始オフセット：3
- 平均オフセット：0（40％から60％）
- 終了オフセット：3
- トリガーモーション効果：要素の中央
フェードインとフェードアウト
着信および発信フェード効果を使用。
- フェードインとフェードアウトを有効にする：はい
- 初期不透明度：0％
- 平均不透明度：100％
- 終了不透明度：100％
- トリガーモーション効果：要素の中央
4.最初のセクションを再利用する
セクションをXNUMX回クローン
最初のセクションとそのスクロール効果を完了したら、何度でもクローンを作成できます。
他のすべてのセクションの背景色を変更する
他のすべてのセクションの背景色を変更します。
- 背景色：＃111111
5. CSSコードを追加して、ページHTMLでスクロールキャプチャを有効にします
ページの最後のセクションにコードモジュールを追加する
次に、ページのHTMLでスクロールキャプチャを有効にするために、ページの最後のセクションの任意の場所にコードモジュールを追加します。
HTML CSSコードを挿入する
CSSコードの次の行は、ページのHTMLコードにスクロール配置を適用するのに役立ちます。
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
スクロールスナップ開始をヘッダーとフッターに追加
次のCSSコード行を追加することにより、ヘッダーとフッターが（セクションと同様に）スクロールキャプチャポイントでもあることを確認します。
ヘッダー、フッター{scroll-snap-align：start;}
フィニッシュへ
この記事では、スクロールスナップとDiviの組み込みモーションエフェクトを組み合わせてスムーズなアニメーションを作成する方法を紹介しました。 これは、XNUMX回のスクロールでスクロール効果をアクティブにするための優れた方法です。
スクロールキャプチャが役立ちます 訪問者 さまざまな部分を簡単にブラウズできます サイトのWeb. フルハイトセクションデザインと組み合わせました。 JSON ファイルを無料でダウンロードすることもできました。 ご質問やご提案がありましたら、下のコメント セクションにコメントを残してください。
