Diviサイトのヒーローセクション用の4つのアニメーションスクロールボタン（およびそれらの作成方法）
公開: 2019-08-08アニメーションスクロールボタンには、ユーザーの注意を引き付けてWebページに誘導するというシンプルでありながら重要な役割があります。 これらのタイプのボタンは通常、折り目の上にあるため、訪問者はWebページの次の重要なセクションにスクロールしなくてもボタンをクリックするだけで済みます。 実際、Diviには、このスクロールボタン機能が全幅ヘッダーモジュールに組み込まれています。
このチュートリアルでは、Diviで完全にカスタムのアニメーションスクロールボタンを作成する方法を紹介します。 したがって、全幅ヘッダーモジュールにあるDiviの組み込みスクロールボタンのクリエイティブな代替手段を探している場合、これらのアニメーション化されたスクロールボタンのデザインは、（文字通り）正しい方向を示すのに役立ちます。
スニークピーク
一緒に構築するデザインを簡単に見てみましょう。
アニメーションスクロールボタンのレイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
チュートリアルに行きましょう。
始めるために必要なもの
開始するには、次のものが必要です。
- Diviテーマがインストールされ、アクティブになっています
- フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
- モックコンテンツに使用する画像
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
ヘッダーセクションの構築
アニメーションのスクロールボタンのデザインを開始する前に、モックヘッダーセクションを設定する必要があります。 アニメーションのスクロールボタンのデザインを取得することに集中するため、ヘッダーのデザインをシンプルに保ち、背景を暗くします。 完了したら、セクションを複製して、新しいスクロールボタンのデザインに取り組むことができます。
まず、1列の行を持つ通常のセクションを作成します。
次に、モジュールを追加する前に、セクション設定を開き、次のように暗い背景を追加します。
背景色：＃222222
暗い背景でも機能します。
ヘッダーテキストを追加する
モックヘッダーテキストを作成するには、1列の行に新しいテキストモジュールを追加します。
次に、デフォルトの段落テキストのすぐ上にあるh1ヘッダーで本文のコンテンツを更新します。
<h1>scroll button animation</h1> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
次に、次のように設計設定を更新します。
テキストフォント：Karla
テキストテキストの配置：中央
見出しテキストサイズ：5vw
テキストの色：明るい
これは、さまざまなアニメーションスクロールボタンに使用する基本的なセクションデザインになります。
アニメーションスクロールボタンデザイン＃1：スローバウンスアニメーションの垂直テキスト
基本的なセクションデザインが整ったら、最初のアニメーションスクロールボタンを追加する準備が整いました。 このスクロールボタンは、右側にアイコンが表示される宣伝文モジュールで構成されています。 次に、矢印アイコンが下を向くように、テキストとアイコンが垂直方向に回転します。 その後、ゆっくりとしたバウンスアニメーションを追加します。
これがその方法です。
まず、ヘッダーテキストを含む行のすぐ下に新しい1列の行を追加します。
次に、行に宣伝文モジュールを追加します。
宣伝文の設定で、デフォルトの本文コンテンツを削除し、以下を追加します。
タイトル：スクロール
アイコンを使用：はい
アイコン：右矢印（スクリーンショットを参照）
次に、次のように設計設定を更新します。
アイコンの色：#ffffff
画像/アイコンの配置：左
アイコンのフォントサイズを使用：はい
アイコンフォントサイズ：50px
タイトルフォントスタイル：TT
タイトルテキストの色：#ffffff
タイトルテキストサイズ：14px
タイトル文字の間隔：3px
タイトル行の高さ：50px（アイコンのフォントサイズと同じ）
次に、宣伝文句に設定された幅を指定し、次のように垂直方向に回転させる必要があります。
幅：132px
モジュールの配置：中央
変換回転Z軸：90度
これで、宣伝文の内容の順序を逆にして、矢印アイコンが宣伝文の左側ではなく右側に表示されるようにするだけです。 これにより、意図したとおりに垂直テキストの下に矢印が表示されます。 これを行うには、次のカスタムCSSをメイン要素に追加する必要があります。
direction: rtl;
スローパルスアニメーションの追加
アニメーションを追加するには、以下を更新します。
アニメーションスタイル：バウンス
アニメーションの方向：下
アニメーション時間：5000ms
アニメーションの遅延：400ms
画像/アイコンアニメーション：左から右
最終結果
それでは、デザイン＃1の最終結果を確認しましょう。
アニメーションスクロールボタンデザイン＃2：垂直マーキーテキストアニメーション
この次のデザインは、宣伝文句モジュールを使用して作成された垂直テキストスクロールボタンを保持するという点で、デザイン＃1から構築されています。 違いはアニメーションになります。 このデザインでは、スクロールボタンが行コンテナの上に非表示になり、ボタンが行の下に非表示になるスライドアニメーションを追加します。 アニメーションオンループを使用すると、ユーザーの目を引くテキストマーキーアニメーション効果が作成されます。
これがその方法です。
まず、デザイン＃1のセクション全体を複製します。
行2の設定を更新する
次に、宣伝文句モジュール/スクロールボタンを含むセクション行を次のように更新します。
水平オーバーフロー：非表示
垂直オーバーフロー：非表示
宣伝文モジュールの設定を更新する
マーキーアニメーションを作成するには、最初にトランスフォームトランスレートを使用して、宣伝文を行コンテナの下に移動する必要があります（ビューから非表示になっています）。 これは、テキストがアニメーションの最後にある位置になります。 以下を更新します。
変換変換Y軸：115px
次に、次のアニメーション設定を追加します。
アニメーションスタイル：スライド
アニメーションの方向：下
アニメーション時間：4000ms
アニメーション強度：195％
アニメーションの開始不透明度：100％
アニメーション速度曲線：線形
アニメーションの繰り返し：ループ
最終結果
それでは、デザイン＃3の最終結果を確認しましょう。
アニメーションスクロールボタンデザイン＃3：スライドダウンアニメーションが遅れた矢印タブ
この次のデザインでは、テキストモジュールと宣伝文モジュールを組み合わせて、独自の矢印タブデザインを作成します。
この設計では、基本的なヘッダーセクションの設計から始めます。 したがって、重複するデザイン＃3セクションを複製してから、行2の宣伝文句モジュールを削除できます。
次に、最初の行のすぐ下の1列の行にテキストモジュールを追加します。
次に、本文の内容を「スクロール」という単語で更新します。
次に、次のように設計設定を更新します。
背景色：#ffffff
テキストテキストの色：＃222222
テキストの配置：中央
幅：50px
モジュールの配置：中央
マージン：0px下
パディング：上20px、下20px
丸みを帯びた角左下5px、右下5px
宣伝文のアイコンを追加する
テキストモジュールが配置されたので、矢印タブのデザインを完了するために、そのすぐ下に宣伝文アイコンを作成する必要があります。 これを行うには、テキストモジュールの下に新しい宣伝文モジュールを追加します。
次に、デフォルトのタイトルと本文を削除します。 次に、次の更新を追加します。
アイコンを使用：はい
アイコン：下矢印の三角形（スクリーンショットを参照）
次に、次のように設定を更新します。
アイコンの色：#ffffff
マージン：-36px上、0px下
この負のマージンにより、矢印がテキストモジュールにアタッチされ、矢印タブのデザインが向上します。
次に、次のcssを宣伝文の画像に追加して、アイコンの下の不要な余白を取り除きます。
宣伝文の画像CSS：
margin-bottom: 0px;
行2の設定とアニメーション
スクロールボタンのデザインを構成する両方のモジュールに同じアニメーションを追加する必要があるため、それらを含む行にアニメーションを追加する必要があります。 次のように行の設定を更新します。
最大幅：100px
パディング：0px上、0px下
アニメーションスタイル：スライド
アニメーションの方向：下
アニメーション時間：1200ms
行1の背景色とボックスの影
このデザインの最後の仕上げには、スクロールボタンの行のすぐ上の最初の行に背景色を追加することが含まれます。 また、その行のZインデックスを更新することで、スクロールボタンのアニメーションがヘッダーを突破しているように表示できるようになります。
次のように行1の設定を開きます。
背景色：＃222222
Zインデックス：10
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの垂直位置：80px
ボックスシャドウブラー強度：22px
ボックスシャドウスプレッド強度：-70px
影の色：＃222222（これが背景色と一致していることを確認してください）
最終結果
次に、最終結果を確認します。
アニメーションスクロールボタンデザイン＃4：マウススクロールアニメーション
この最後のアニメーションスクロールボタンでは、テキストモジュールと宣伝文モジュールを組み合わせてマウススクロールアニメーションを作成します。
これがその方法です。
開始するには、基本的なヘッダーセクションを使用できます。 次に、行1の下に新しい行を追加します。
宣伝文モジュールを追加する
次に、行に宣伝文モジュールを追加します。 次に、デフォルトのタイトルと本文を削除します。
その後、次のようにアイコンを更新します。
アイコンを使用：はい
アイコン：円（スクリーンショットを参照）
次に、宣伝文のデザイン設定を次のように更新します。
アイコンの色：#ffffff
アイコンのフォントサイズを使用：はい
アイコンのフォントサイズ：15px
アニメーションスタイル：スライド
アニメーションの方向：下
アニメーション時間：1200ms
アニメーションの繰り返し：ループ
画像/アイコンアニメーション：アニメーションなし
次に、次のカスタムCSSを宣伝文画像に追加します。
margin-bottom: 0px;
テキストモジュールを追加する
次に、宣伝文句モジュールのすぐ下に新しいテキストモジュールを追加します。 次に、本文を「スクロール」という単語で更新します。
次に、次のテキスト設定を更新します。
テキストテキストの色：#ffffff
テキストの配置：中央
幅：90px
マージン：上10px、左-30px
行2の設定を更新する
次に、行の設定を次のように更新します。
幅：30px
高さ：60px
丸みを帯びた角：16px
ボーダー幅：1px
ボーダーカラー：#ffffff
ボーダースタイル：ソリッド
水平オーバーフロー：表示
垂直オーバーフロー：表示
最終結果
それでは、最終結果を確認しましょう。
アンカーリンク機能の追加
アンカーリンクは、ページのさまざまなセクションにジャンプするリンクです。 それらは1ページのWebサイトでよく使用されます。 同じ概念を使用して、スクロールボタンにアンカーリンクを追加し、ページを目的のセクションにジャンプすることができます。 アニメーションのスクロールボタンにアンカーリンク機能を追加するには、主に2つのことを行う必要があります。
- ジャンプ先のセクションまたは行にCSSIDを追加する必要があります
- 同じCSSIDのアンカーリンクをスクロールボタンに追加する必要があります
これがどのように機能するかを示します。 まず、スクロールボタンを含むヘッダーセクションの下に新しいセクションを作成します。 次に、[詳細設定]タブで新しいセクションにCSSIDを指定します。
次に、アンカーリンクに変換する要素/スクロールボタンを見つけて、ハッシュタグ（またはポンド記号）で始まり、すぐにジャンプ先の要素のCSSIDが続くURLを追加します。
たとえば、セクションのCSS IDが「section-2」の場合、リンクURLとして「＃section-2」を追加します。
DiviではDiviのすべての要素にリンクURLを追加できるため、アニメーションのスクロールボタンを含む行全体にリンクを自由に追加できることを忘れないでください。
詳細については、アンカーリンクでできるいくつかのクールなことを確認してください。
クリエイティブに！
さまざまなモジュールを組み合わせて、さまざまな方法でアニメーション化することを恐れないでください。 実際、Diviを使用してスクロールボタンをデザインする新しい方法を模索していたときに、モバイルで使用できる楽しいサムスクロールアニメーションを作成しました。 あなたがそれをチェックしたい場合に備えて、私はそれを上記の無料ダウンロードに含めました。
最終的な考え
このようなアニメーションのスクロールボタンは、Diviで簡単に作成できます。 また、アンカーリンクのように扱うと、ヘッダーよりも多くの場所で使用できます。 これらのデザインが、次のプロジェクトのために新しいスクロールボタンを作成するきっかけになることを願っています。
コメントでお返事をお待ちしております。
乾杯！