Diviのアニメーションを使用して画像をフロートおよびバウンスする
公開: 2017-10-20この6部シリーズのパート6へようこそ。このシリーズでは、Diviの新しいアニメーションオプションを使用してすばらしいページセクションをデザインする方法を説明します。 Webサイトにアニメーションを追加するためのテクニックを示すために、ライブデモページのさまざまなセクションを作成する方法について説明します。 アニメーション機能は本当に楽しくて使いやすいです。 また、ビジュアルビルダーを使用すると、あらゆる段階で自分の作品が生き生きと動くのを見ることができます。 Diviアニメーションの力を探求するときに、ぜひご参加ください。
前回の投稿では、アニメーションデモページのセクション7を作成しました。ここでは、ロールアニメーションスタイルを使用して画像をアニメーション化し、コンテンツにリアルな動きを追加する方法を示しました。
今日は、アニメーションデモページのセクション8と9に取り組みます。 セクション8は、スライドアニメーションとぼかし効果の組み合わせを使用して、注目のアイテムを目立たせる方法の優れた例です。 セクション9は、チームの写真を紹介するチームセクションにアニメーションを追加するためのシンプルでエレガントな方法です。
始めましょう。
これが今日の投稿で構築するもののスニークピークです
デザイン要素の準備
このチュートリアルには4つの画像が必要です。 カスタムの背景画像と3つのレシピカード画像が必要になります。 背景画像は1280×936で、黄色の背景に6つの半透明の白い長方形があり、奥行きのある影が追加されています。 視差のある部分で背景を使用すると、レシピカードが背景に浮かんでいるような印象を与えます。 レシピカードの画像はそれぞれ375×667です。 このチュートリアルで使用される画像は次のとおりです。
背景画像
レシピカード画像＃1
レシピカード画像＃2
レシピカード画像＃3
Diviのアニメーションを使用して画像をフロートおよびバウンスする
私たちのYoutubeチャンネルを購読する
セクション8の構築
構築プロセスを開始する前に、ビジュアルビルダーを使用して作成する断面レイアウトのワイヤーフレームビューを垣間見ることができます。
Visual Builderを使用して、レイアウトに別の通常のセクションを追加することから始めましょう。 次に、セクションに3列（1 / 3、1 / 3、1 / 3）の行を追加します。
行設定を更新する
最初のモジュールを追加する前に、行の設定に移動して、以下を更新します。
[デザイン]タブの下…
カスタム幅を使用：はい
カスタム幅：1366px
カスタムガター幅を使用：はい
側溝幅：1
列1のカスタムパディング：6％右
列3のカスタムパディング：残り8％
セクションに背景を追加する
次に、メインの背景画像をセクションに配置しましょう。 セクション設定に移動し、以下を更新します。
[コンテンツ]タブの下…
背景画像：[1280×936画像を挿入]
視差法を使用する：はい
視差法：真の視差
画像＃1を追加
これで、モジュールを行に追加するための準備が整いました。 最初の（左）列に、画像モジュールを追加します。
次に、次のように設定を更新します。
[コンテンツ]タブの下…
画像のURL：[レシピカードの画像＃1を入力]
[デザイン]タブの下…
全幅を強制：はい
アニメーションスタイル：スライド
アニメーションの方向性：上
アニメーション強度：20％
[詳細設定]タブの下…
ここでは、カスタムCSSを追加して、カードイメージに丸みを帯びたエッジ、ボックスシャドウ、およびぼかしフィルターを追加します。 [メイン要素]ボックスに次のCSSを入力します。
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7); filter: blur(2px) opacity(.75);
設定を保存する
中央の列に2つのテキストモジュールを追加します
次に、2番目（または中央）の列にテキストモジュールを追加し、次のように設定を更新します。
[コンテンツ]タブの下…
コンテンツボックスのテキストタブに次のh1ヘッダーを入力します。
<h1>The Best Recipes for Success</h1>
[デザイン]タブの下…
ヘッダーフォント：Playfair Display、太字（B）
ヘッダーフォントサイズ：60px
ヘッダー行の高さ：1.3em
カスタムマージン：20px下
アニメーションスタイル：折り
アニメーションの方向性：上
設定を保存する
作成したテキストモジュールの下に別のテキストモジュールを追加し、次のように設定を更新します。
[コンテンツ]タブの下…
内容：Lorem ipsum dolor sit amet、consectetur adipiscingelit。 Phasellus bibendum est vitae felis rhoncusgravida。 Sed nec purus tempus、sagittis mi id、efficitur。
[デザイン]タブの下…
テキストフォントサイズ：18px
テキストテキストの色：rgba（0,0,0,0.56）
テキスト行の高さ：1.9em
カスタムマージン：40px
アニメーションスタイル：折り
アニメーションの方向：下
アニメーションの遅延：150ms
設定を保存する
画像＃2を追加
作成した2つのテキストモジュールの下に画像モジュールを追加します。
次に、次のように設定を更新します。
[コンテンツ]タブの下…
画像のURL：[カード画像＃2を入力]
[デザイン]タブの下…
全幅を強制：はい
アニメーションスタイル：スライド
アニメーションの方向性：上
アニメーション強度：10％
[詳細設定]タブの下…
ここでは、カスタムCSS（ぼかし効果がないことを除いて最初のカード画像と同様）を追加して、カード画像に丸みを帯びたエッジとボックスシャドウを与えます。 [メイン要素]ボックスに次のCSSを入力します。
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
設定を保存する
画像＃3を追加
画像モジュールを挿入して、3番目と最後のカード画像を3番目（または右）の列に追加しましょう。
次に、次のように設定を更新します。
[コンテンツ]タブの下…
画像のURL：[カードの画像＃3を入力]
[デザイン]タブの下…
全幅を強制：はい
カスタムマージン：20％トップ
アニメーションスタイル：スライド
アニメーションの方向性：上
アニメーション強度：30％
設定を保存する
[詳細設定]タブの下…
このカスタムCSSを[メイン要素]ボックスに追加します。
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7); filter: blur(8px) opacity(.4);
設定を保存する
素晴らしい！ これで、デモページのセクション8は終了です。 最終結果を確認してください。
アニメーションは驚くほどリアルで、スクロール時に上にあるモジュールとは異なる速度で背景を下に移動する視差機能をうまく利用しています。 カードが上向きにアニメーション化され、背景が下がっているという事実は、カードが浮いているような印象を与えます。 私が言わなければならないのは、コンテンツは本当にこのセクションに飛び出します。
デモのセクション9の構築
最後のセクションでは、文字通り「ポップ」する小さなアニメーションを使用して、単純な「チーム」セクションを作成します。 これが私たちが構築しようとしているものです：
これは、ワイヤーフレームビューからのレイアウトの概要です。
セクションヘッダーを追加します
まず、1列の行を持つ通常のセクションを追加します。 次に、テキストモジュールを列に追加します。
次のようにテキスト設定を更新します。
[コンテンツ]タブの下…
内容：私たちのチーム
[デザイン]タブの下…
テキストフォント：Raleway、太字（B）、大文字（TT）
テキストフォントサイズ：15px
テキストテキストの色：rgba（0,0,0,0.32）
テキスト文字の間隔：5px
テキスト行の高さ：1.9em
カスタムマージン：20px
アニメーションスタイル：スライド
アニメーションの方向性：上
アニメーション時間：500ms
アニメーションの遅延：1000ms
[詳細設定]タブの下…
設定を保存する
作成したテキストモジュールの下に別のテキストモジュールを追加し、次のように設定を更新します。
[コンテンツ]タブの下…
コンテンツボックスのテキストタブに次のh1タグを入力します。
<h1>Highly Skilled Ninjas</h1>
[デザイン]タブの下…
ヘッダーフォント：Raleway Light
ヘッダーテキストの配置：中央
ヘッダーフォントサイズ：48px
ヘッダーテキストの色：＃3a3830
ヘッダー行の高さ：1.3em
カスタムマージン：20px下
アニメーションスタイル：スライド
アニメーションの方向性：右
アニメーション強度：12％
設定を保存する
次に、小さな緑色の仕切り線を追加するには、テキストモジュールの下に仕切りモジュールを追加します。
次に、次のように仕切りの設定を更新します。
[コンテンツ]タブの下…
仕切りを表示：はい
[デザイン]タブの下…
色：＃7cda24
仕切りの重量：3px
高さ：3px
幅：60px（これを入力してください）
モジュールの配置：中央
アニメーションスタイル：スライド
アニメーションの方向：下
アニメーション時間：500ms
アニメーションの遅延：1000ms
アニメーション強度：200％
設定を保存する
4つのチーム画像を追加する
チームメンバーの画像を追加するには、作成したヘッダーを含む行の下に4列の行を追加します。
最初の列に個人モジュールを追加し、次のように設定を更新します。
[コンテンツ]タブの下…
名前：ニック
画像のURL：[150×150の写真を入力してください]
[デザイン]タブの下…
ヘッダーフォント：Raleway Light、太字（B）、大文字（TT）
ヘッダーフォントサイズ：13px
ヘッダーテキストの色：rgba（0,0,0,0.71）
ヘッダー文字の間隔：3px
[詳細設定]タブの下…
[メンバー画像]ボックスに次のCSSを追加します。
border-radius: 100%; overflow: hidden; width: 180px; margin: auto auto 20px auto;
これにより、画像に素敵な円の境界線が表示されます。
次のカスタムCSSをメンバーの説明に追加します。
text-align: center; display: block;
これにより、名前が中央に配置されます。
設定を保存する
これで、作成したPersonモジュールを複製して、次の3つを追加し、次の3つの列に入力できます。 複製する各モジュールのイメージと名前を更新するだけです。
4つすべてのpersonモジュールを追加したら、このセクションの最後のステップである行のスタイル設定とアニメーション化の準備が整います。 これを行うには、次のように行設定を更新します。
[デザイン]タブの下…
カスタムガター幅を使用：はい
側溝幅：2
カスタムパディング：60pxトップ
アニメーションスタイル：バウンス
アニメーション時間：700ms
アニメーションの遅延：1000ms
これで、アニメーションデモページのセクション9は終わりです。 また、Diviでのアニメーションの使用に関する6部構成のシリーズも締めくくっています。
シリーズのまとめ
アニメーションデモページの作成を楽しんでいただけたでしょうか。 デザインだけでも素晴らしいインスピレーションです。 そして、全体を通してアニメーションを使用することは、間違いなく将来のページ構築のためのリファレンスガイドとして役立つでしょう。 このレイアウトを作成してくれたディレクターのKennySingに特に感謝します。 私たちはそれをとても誇りに思っています。次のプロジェクトをすぐに開始できるように、このレイアウトを無料で提供したいと思います。
ボーナス：簡単にインポートできるようにこれらのセクションをダウンロードしてください
ボーナス特典として、本日のチュートリアルに組み込まれているセクションを無料でダウンロードできるようにパッケージ化しました。このダウンロードは、以下のメールオプトインフォームを使用して入手できます。 メールアドレスを入力するだけで、ダウンロードボタンが表示されます。 すでにDiviニュースレターに参加している場合は、「再購読」について心配する必要はありません。 メールアドレスを再入力しても、メールアドレスが増えたり重複したりすることはありません。 ダウンロードが表示されるだけです。
楽しみ！
レイアウトパックをダウンロードする
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
これらのダウンロードを使用するには、ダウンロードフォルダーでAll_Animation_Effects_1.zipというzipファイルを見つけることから始めます。 解凍して、この投稿の最後の2つを含む、このシリーズからのすべてのインポートを表示します。
WordPress管理者で[Divi]> [Diviライブラリ]> [インポートとエクスポート]に移動します。 ポータビリティモーダルがポップアップしたら、[インポート]タブをクリックし、[ファイルの選択]というラベルの付いたボタンをクリックします。
好みのjsonファイルを選択し、「DiviBuilderレイアウトのインポート」をクリックします。 インポートが完了したら、上記のセクションのいずれかを追加する投稿またはページに移動します。
ビジュアルビルダーをアクティブにします。 上記のセクションのいずれかを追加するページの部分に移動します。 [新しいセクションを追加]アイコンをクリックすると、[ライブラリから追加]オプションが表示されます。 このオプションを選択し、必要なレイアウトを選択します。
以下のコメントであなたからの連絡を楽しみにしています。
乾杯！