ディビのスクロール効果でアニメーション時計をデザインする方法
公開: 2020-07-20Webには、時間に関連するデザインのアクセント（速度の最適化、今後のイベントなど）が必要なサイトがたくさんあります。 ほとんどの場合、時計のアイコンやグラフィックがうまく機能します。 しかし、アニメーションの時計のデザインを作成すると、間違いなくWebサイトのデザインに独自の「スピン」が与えられます。
Diviで利用可能なすべての組み込みデザインオプションを使用して、素晴らしいアニメーション時計デザインを最初から作成できます。 このチュートリアルでは、ユーザーがページを下にスクロールすると時計の針が回転するアニメーション時計を作成します。
始めましょう！
スニークピーク
これは、このチュートリアルで構築するデザインの概要です。
アニメーション時計のレイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。
[インポート]ボタンをクリックします。
移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。
次に、インポートボタンをクリックします。
完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。
チュートリアルに取り掛かりましょう。
始めるために必要なもの
開始するには、次のことを行う必要があります。
- まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
- WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
- 「最初から構築」オプションを選択します。
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
パート1：文字盤のデザイン
開始するには、通常のセクションに1列の行を追加します。
行設定
モジュールを追加する前に、行設定を開き、以下を更新してください。
- 背景色：＃003a5c
[デザイン]タブで、以下を更新します。
- 側溝幅：1
- 幅：50vw
- 最大幅：500px
- 高さ：50vw
- 最大高さ：500px
- 丸みを帯びた角：50％
- ボーダー幅：15px
- ボーダーカラー：#ffffff
- ボックスシャドウ：スクリーンショットを参照
- ボックスシャドウの垂直位置：0px
- ボックスシャドウブラー強度：68px
- 影の色：rgba（0,0,0,0.22）
[詳細設定]タブで、表示オプションを次のように更新します。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
パート2：時間マーカーの追加
行が文字盤として設計されたら、12の0時、3つの0時、6つの0時、および9つの0時を表す時間マーカーを追加する準備が整います。 各マーカーは、仕切りモジュールを使用して作成されます。
12時のマーカー
行内に新しい仕切りモジュールを追加することから始めます。
次に、背景色を次のように更新します。
- 背景色：＃78acf4
- 幅：10vw
- 最大幅：150px
- 高さ：3px
- 丸みを帯びた角：8px
- 変換回転Z軸：90度
[詳細設定]タブで、仕切りに絶対位置を指定します。
- 位置：絶対
- 場所：トップセンター
6時のマーカー
3時のマーカーを作成するには、120時のマーカーの作成に使用した仕切りを複製します。 （この時点で、レイヤーモーダル内のモジュールにラベルを付けることをお勧めします。）次に、複製の仕切りを開き、次のように位置の位置を更新します。
- 場所：中央下
3時のマーカー
3時のマーカーを作成するには、6時のマーカーを複製します。 次に、新しい複製の設定を開き（必ず「3時」というラベルを付けてください）、以下を変更します。
- 場所：右中央
次に、変換オプションを次のように更新します。
[翻訳]タブの下…
- 変換変換X軸：50％
[回転]タブの下
- 変換回転Z軸：0度
9時のマーカー
3時のマーカーを作成するには、6時のマーカーを複製します。 次に、新しい複製の設定を開き（必ず「9時」というラベルを付けてください）、以下を変更します。
- 場所：左中央
次に、変換オプションを次のように更新します。
[翻訳]タブの下…
- 変換変換X軸：-50％
パート3：時計の針の作成（秒、分、時間）
時間マーカーが配置されたら、時計の針の作成を開始する準備が整いました。 秒針から始めましょう。
中古
秒針を作成するには、12時の仕切りを複製し、レイヤーモーダルを使用して列の残りの仕切りの下にドラッグします。
次に、新しい複製に「second」というラベルを付けます。
モジュールの設定を開き、[詳細設定]タブで位置を更新します。
- 場所：センターセンター
[デザイン]タブで、次のようにサイズを更新します。
- 幅：20vw
- 最大幅：200px
- 高さ：0.5vw
- 最大高さ：7.5px
これで秒針は文字盤の真ん中にありますが、通常の時計の針のように秒針の下部を中央から開始する必要があります。 次に、実際の時計のように手を回転できるように、手の下部をピボット原点として中央に残しておきます。 これを行うには、変換オプションの組み合わせを使用して、特定の変換原点から仕切りを配置および回転する必要があります。
以下を更新します。
[翻訳]タブの下…
- 変換変換X軸：0％（これは重要なステップです）
[回転]タブの下…
- 変換回転Z軸：-90度
[原点]タブの下…
- 変換原点：左中央
スクロール効果を追加すると、この手は非常に速く動くので、気が散りすぎないように、半透明の背景色を付けましょう。
- 背景色：rgba（175,175,175,0.12）
分針
分針を作成するには、秒針モジュールを複製し、複製した「分」にラベルを付けます。 次に、新しい仕切りモジュールを開き、背景色を更新します。
- 背景グラデーションの左の色：＃78acf4
- 背景のグラデーションの正しい色：＃b0b9ff
- グラデーション方向：90度
次に、次のようにデザインを更新します。
- 幅：15w
- 最大幅：150px
- 高さ：1vw
- 最大高さ：15px
アワーハンド
分針が完成したら、秒針モジュールを複製し、複製した「時」にラベルを付けます。 次に、新しい仕切りモジュールを開き、次のように背景色を更新します。
- 背景色：#ffffff
次に、[デザイン]タブのサイズを次のように更新します。
- 幅：10vw
- 最大幅：100px
この時点で、3つの時計の針すべてがスクロール効果の準備ができています！
パート4：各時計の針に回転スクロール効果を追加する
時計の針を回転させるために、3つの時計の針のそれぞれに回転スクロール効果を追加します。 私たちは時計のデザインを扱っているので、実際の時間を表すために各時計の針の回転角度を使用できることを覚えておくことが重要です。 たとえば、時針を30度回転させると、1時を表し、60度を回転させると2時を表します。
時間針回転スクロール効果
まず、時針に回転スクロール効果を追加します。 時針の仕切り設定を開き、次の変換効果を追加します。
回転タブの下…
- 回転を有効にする：はい
- 先発投手：0度（10％）
- 中回転：15度（50％）
- 終了回転：30度（90％）
分針回転スクロール効果
次に、分針に回転スクロール効果を追加します。 分針の仕切り設定を開き、次の変換効果を追加します。
回転タブの下…
- 回転を有効にする：はい
- 先発投手：0度（10％）
- 中回転：180度（50％）
- 終了回転：360度（90％）
中古回転スクロール効果
次に、秒針に回転スクロール効果を追加します。 中古の仕切り設定を開き、次の変換効果を追加します。
回転タブの下…
- 回転を有効にする：はい
- 先発投手：0度（10％）
- 中回転：5400度（50％）
- 終了回転：10800度（90％）
注：秒針が1時間に達するための正確な回転には、21600度の回転が必要です。 でもそれは速すぎるので、半分に切るのが一番いいと思いました。 結局のところ、これは設計目的のためです。
最終結果
これが最終的なデザインです。
そして、これがスクロール効果の最終結果です。 ページを下にスクロールすると、時間が正確に1時間経過することに注意してください。
最終的な考え
時間を正確に表すスクロール効果を使って、このような時計のデザインを作成できるのは非常に驚くべきことです。 回転スクロール効果を追加して、スクロール中の時計の時間を速くしたり遅くしたりしてみてください。 さらに、この時計のデザインを使用して、たくさんのCTAやヘッダーにアクセントを付けることができます。
コメントでお返事をお待ちしております。
乾杯！