スムーズなアニメーションのためにスクロールスナップとモーションエフェクトを組み合わせる方法
公開: 2020-05-22Diviの組み込みのスクロール効果を使用してスムーズなアニメーションを作成する方法を探しているなら、この投稿を気に入るはずです。 スクロールスナップとDiviの組み込みモーションエフェクトを組み合わせて、一度にスクロールできるフルハイトセクションを作成する方法を紹介します。 最初のセクションを作成することから始めます。 次に、ページデザイン全体でそのセクションを再利用します。 スクロールスナップを有効にするには、ページのセクション、HTML、ヘッダー、フッターに割り当てるCSSスクロールスナッププロパティを使用します。 ページのJSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
スムーズなアニメーションレイアウトを無料でダウンロード
無料のスムーズなアニメーションレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1.新しいページを作成し、最初のセクションのデザインを開始します
新しいページを追加してVisualBuilderに切り替えます
新しいページを追加することから始めます。 ページのタイトルを入力し、ページを公開して、VisualBuilderに切り替えます。
セクション設定
サイジング
新しいページに入ったら、すでにそこにあるセクションを開き、サイズ設定を変更します。
- 最小高さ：100vh
主な要素
セクションにも2行のCSSコードを追加しています。 これらのCSSコード行は、セクションをスクロールスナップのスナップポイントに変えるのに役立ちます。
scroll-snap-align: start; scroll-snap-stop: normal;
可視性
セクションコンテナを超えるものがないことを確認するために、セクションのオーバーフローを非表示にします。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
行＃1を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、次のようにサイズを変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：100％
- 最大幅：100％
間隔
セクションのデフォルトの上部と下部のパディングも削除します。
- トップパディング：0px
- ボトムパディング：0px
ポジション
そして、それに応じて行を再配置します。
- 位置：絶対
- 場所：下部中央
列にテキストモジュールを追加
コンテンツボックスを空のままにします
この行に必要なモジュールはテキストモジュールだけです。 モジュールのコンテンツボックスは空のままにしてください。
背景色
次に、背景色を変更します。
- 背景色：＃ffee00
テキスト設定
モジュールのテキスト行の高さも削除します。
- テキスト行の高さ：1em
サイジング
次に、サイズ設定に移動して幅を変更します。
- 幅：30％
間隔
上部のパディングも追加して、モジュールを正方形に変えます。
- トップパディング：30％
行＃2を追加
カラム構造
次の行に進みます。 次の列構造を使用します。
サイジング
モジュールをまだ追加せずに、行設定を開き、デザインタブでサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：60vw
- 最大幅：100％
間隔
次に、さまざまな画面サイズにカスタムの上部マージンを追加します。
- トップマージン：20vh（デスクトップ）、5vw（タブレットと電話）
列2の間隔
次に、列2の設定を開き、いくつかのカスタムパディング値を追加します。
- トップパディング：2vh（タブレットと電話）
- 左パディング：2vw
- 右パディング：2vw
列1に画像モジュールを追加
画像をアップロード
モジュールを追加し、画像モジュールを列1に追加して、選択した画像をアップロードします。
サイジング
次に、モジュールに全幅を強制します。
- 全幅を強制：はい
テキストモジュール＃1を列2に追加します
H2コンテンツを追加する
2番目の列で、必要な最初のモジュールは、H2コンテンツを含むテキストモジュールです。
H2テキスト設定
モジュールの[デザイン]タブに移動し、H2テキスト設定を次のように変更します。
- 見出し2フォント：アントン
- 見出し2テキストサイズ：5vw（デスクトップ）、7vw（タブレット）、9vw（電話）
テキストモジュール＃2を列2に追加します
コンテンツを追加する
前のテキストモジュールのすぐ下に別のテキストモジュールを追加し、選択した説明コンテンツを挿入します。
テキスト設定
モジュールのテキスト設定を次のように変更します。
- テキストフォント：Open Sans
- テキストサイズ：0.8vw（デスクトップ）、2vw（タブレット）、2.5vw（電話）
- テキスト行の高さ：1.8em
間隔
そして、間隔設定にカスタムの上下マージンを追加します。
- トップマージン：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
水平方向の動き
次に、2番目の行の最初の列を開き、水平方向の動きを追加します。
- 水平方向の動きを有効にする：はい
- 開始オフセット：-3
- ミッドオフセット：0（40％から60％）
- 終了オフセット：-3
- モーションエフェクトトリガー：要素の中央
フェードインとフェードアウト
同じ列にもフェードインとフェードアウトの効果を適用しています。
- フェードインとフェードアウトを有効にする：はい
- 開始時の不透明度：0％
- 中程度の不透明度：100％
- 終了不透明度：100％
- モーションエフェクトトリガー：要素の中央
列2
水平方向の動き
次に、2番目の列の設定を開き、次の水平方向のモーション設定を適用します。
- 水平方向の動きを有効にする：はい
- 開始オフセット：3
- ミッドオフセット：0（40％から60％）
- 終了オフセット：3
- モーションエフェクトトリガー：要素の中央
フェードインとフェードアウト
フェードインおよびフェードアウト効果とともに。
- フェードインとフェードアウトを有効にする：はい
- 開始時の不透明度：0％
- 中程度の不透明度：100％
- 終了不透明度：100％
- モーションエフェクトトリガー：要素の中央
4.最初のセクションを再利用する
セクションを4回クローンする
最初のセクションとそのスクロール効果を完了したら、必要な回数だけクローンを作成できます。
1つおきのセクションの背景色を変更する
1つおきのセクションの背景色を変更します。
- 背景色：＃111111
5. CSSコードを追加して、ページのHTMLでスクロールスナップを有効にします
ページの最後のセクションにコードモジュールを追加
ここで、ページのHTMLでスクロールスナップを有効にするために、ページの最後のセクションの任意の場所にコードモジュールを追加します。
HTMLCSSコードを挿入します
CSSコードの次の行は、ページのHTMLにスクロールスナップを適用するのに役立ちます。
<style>
html {
overflow-x: hidden;
scroll-snap-type: y proximity;
}
</style>
スクロールスナップ開始をヘッダーとフッターに追加
次のCSSコード行も追加して、ヘッダーとフッターが（セクションと同じように）スクロールスナップポイントであることを確認します。
header, footer {
scroll-snap-align: start;
}
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、スクロールスナップとDiviの組み込みモーションエフェクトを組み合わせてスムーズなアニメーションを作成する方法を紹介しました。 これは、1回のスクロールでスクロール効果を有効にするための優れた方法です。 スクロールスナップは、訪問者がWebサイトのさまざまな部分を簡単にスクロールするのに役立ちます。 これをフルハイトセクションデザインと組み合わせました。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。