Diviを使用して遅延時に重複するアニメーションを作成する方法

公開: 2019-04-12

あなたのウェブサイトの成功の大部分はあなたがあなたの訪問者を感動させることができるかどうかに依存します。あなたの製品やサービスだけでなく、あなたのコミュニケーションの仕方やあなたのウェブサイトがどれほどうまく設計されているかも。それに直面するので、ウェブサイトはしばしば第一印象です。そして、他の種類の第一印象と同様に、あなたはそれが良い後味を残すことを望みます。

さて、コンテンツの一部にスポットライトを当てる独自の方法を探しているなら、微妙に重なり合うアニメーションを作成することがまさにあなたが探しているものかもしれません。これらの微妙に重なり合うアニメーションは、訪問者向けのスライドショーのようなものです。スクロールしたりクリックしたりする必要はありません。コンテンツはエレガントな方法で表示されます。

それを手に入れよう！

プレビュー

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

デスクトップ

重複するアニメーション

モバイル

重複するアニメーション

アプローチ

重複することなく、必要なすべてのデザイン要素を垂直方向に追加することから始めます。
すべてのデザイン要素を追加するので、特定のアニメーション遅延を伴うカスタムアニメーションも追加します
これらのアニメーションの遅延は、オーバーラップに焦点を当てたチュートリアルの最後の部分を通過した後にのみ意味があります
このチュートリアルの重要な部分は、セクションと同じ背景色の整形されたディバイダーモジュールを使用して、遅延時に行コンテンツを「非表示」にすることです。
アプローチを機能させるために必要なさまざまな手順を理解すれば、この手法を作業中のあらゆる種類の設計に適用できます。

作り始めましょう！

新しいセクションを追加

背景色

新しいページを作成するか、既存のページを開いて、通常のセクションを追加することから始めます。セクション設定を開き、背景を追加します。

背景色：＃f3f3ec

重複するアニメーション

行＃1を追加

カラム構造

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

重複するアニメーション

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。これを行う理由は、デフォルトのピクセル間隔をすべて取り除くためです。次の手順では、代わりにビューポートユニットを使用して必要なすべてのスペースを追加します。

この行を全幅にする：はい
カスタムガター幅を使用：はい
側溝幅：1

重複するアニメーション

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

H2コンテンツを追加する

モジュールの追加を始めましょう！最初に必要なモジュールは、H2コンテンツを含むテキストモジュールです。このモジュールは数秒後に「消える」ので、短く、関連性があり、覚えやすいものにしておく必要があることに注意してください。

重複するアニメーション

H2テキスト設定

次に、[デザイン]タブに移動し、H2テキスト設定を変更します。

見出し2フォント：ポピンズ
見出し2のテキストの色：＃333333
見出し2テキストサイズ：5vw

重複するアニメーション

間隔

間隔設定で左右のパディングを使用して、必要なスペースを作成します。

左パディング：15vw
右パディング：39vw

重複するアニメーション

Dividerモジュールを列に追加

可視性

次のモジュールであるDividerモジュールに進みます。このモジュールを使用して、テキストモジュールを「非表示」にします。そのために必要なものは4つあります。背景色（セクションと同じ色なので気付かない）、十分なパディング（前のモジュールのすべてのコンテンツをオーバーラップできるようにするため）、垂直オーバーラップ（モジュール全体をカバーするため）エリア）、およびアニメーションの遅延（最初のモジュールが引き継ぐ前に輝きを放つ時間を与えるため）。 Divider Moduleを追加したら、必ず「ShowDivider」オプションを無効にしてください。

仕切りを表示：いいえ

重複するアニメーション

背景色

次に、背景設定に移動し、背景色を追加します。滑らかな効果を作成するために、セクションで使用したのと同じ背景色を使用していることを確認してください。

背景色：＃f3f3ec

重複するアニメーション

間隔

間隔設定に上下のパディングを追加して、仕切りモジュールのサイズを大きくします。

トップパディング：9vw
ボトムパディング：9vw

重複するアニメーション

アニメーション

そして、遅延アニメーションを追加して、仕切りの設定を完了します。

アニメーションスタイル：スライド
アニメーションの方向性：上
アニメーション時間：1200ms
アニメーションの遅延：1500ms
アニメーション強度：50％
アニメーションの開始不透明度：50％

重複するアニメーション

行＃2を追加

カラム構造

2列目へ！次の列構造を選択します。

重複するアニメーション

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。

この行を全幅にする：はい
カスタムガター幅を使用：はい
側溝幅：1

重複するアニメーション

間隔

次に、間隔設定で行の左側と右側にパディングを追加します。

左パディング：10vw（デスクトップ）、2vw（タブレットと電話）
右パディング：10vw（デスクトップ）、2vw（タブレットと電話）

重複するアニメーション

画面

また、行のメイン要素にCSSコードを1行追加することで、小さい画面サイズで列が隣り合って表示されるようにしています。

display: flex;

重複するアニメーション

列1に宣伝文モジュールを追加する

コンテンツを追加する

モジュールの追加を開始する時が来ました！列1に宣伝文モジュールを追加し、選択したコンテンツを入力します。

重複するアニメーション

アイコンを選択

選択したアイコンを選択して続行します。

重複するアニメーション

アイコン設定

次に、アイコンの外観を変更します。

アイコンの色：＃dbd6bd
円のアイコン：はい
円のアイコン：#ffffff
画像/アイコンの配置：上
アイコンのフォントサイズを使用：はい
アイコンのフォントサイズ：2.5vw（デスクトップ）、1.7vw（タブレット）、1.9vw（電話）

重複するアニメーション

タイトルテキスト設定

タイトルテキストの設定も変更します。

タイトルフォント：Source Serif Pro
タイトルテキストの配置：中央
タイトルテキストサイズ：1.7vw（デスクトップ）、2.1vw（タブレット）、2.5vw（電話）
タイトル行の高さ：1.9em

重複するアニメーション

本文の設定

本文の設定とともに。

ボディフォント：Open Sans
本文の配置：中央
本文のサイズ：0.8vw（デスクトップ）、1.2vw（タブレット）、1.6vw（電話）
ボディラインの高さ：2.5em

重複するアニメーション

サイジング

このモジュールと、2列目と3列目に追加するモジュールとの間に十分なスペースがあることを確認するために、モジュールのサイズをわずかに縮小しています。

幅：91.7％
モジュールの配置：中央

重複するアニメーション

間隔

また、カスタムのパディング値を使用して、モジュールにスペースを追加します。

トップパディング：2vw
ボトムパディング：2vw
左パディング：1vw
右パディング：1vw

重複するアニメーション

国境

次に、境界線の設定に移動し、微妙な境界線を追加してモジュールを定義します。

ボーダー幅：1px
ボーダーカラー：＃333333

重複するアニメーション

アニメーション

遅延アニメーションを追加して、宣伝文モジュールのデザインを完成させます。お気づきのように、追加するデザイン要素が多いほど、アニメーションの遅延が大きくなります。

アニメーションスタイル：スライド
アニメーションの繰り返し：1回
アニメーションの方向性：上
アニメーション時間：1000ms
アニメーションの遅延：2000ms
アニメーション強度：16％
アニメーションの開始不透明度：0％

重複するアニメーション

宣伝文句モジュールを2回クローンし、残りの列に複製を配置します

宣伝文モジュールの設計が完了したら、先に進んで2回クローンを作成できます。行の残りの2つの列に重複を配置します。

重複するアニメーション

複製＃1のアニメーションを変更する

最初の複製のアニメーション遅延を変更します。

アニメーションの遅延：2200ms

重複するアニメーション

複製＃2のアニメーションを変更する

次に、2番目の複製を開き、そこでアニメーションの遅延も変更します。

アニメーションの遅延：2400ms

重複するアニメーション

Dividerモジュールを列3に追加します

可視性

この行で必要な次の最後のモジュールは、Dividerモジュールです。繰り返しになりますが、このモジュールを使用して、宣伝文句モジュールを「非表示」にするのに役立つ遅延オーバーラップを作成しています。 Divider Moduleを列3に追加したら、[ShowDivider]オプションが無効になっていることを確認してください。