ホバー時にアニメーションGIFを使用して背景画像を切り替える方法
公開: 2019-06-14ホバー時にアニメーションGIFで背景画像を切り替えることは、商品やサービスのクールなイラストを提供しながら、コンテンツに命を吹き込むための優れた方法です。 たとえば、特定のソフトウェア製品の機能を宣伝している場合、アニメーションGIFは、製品の機能の側面を説明するのに役立ちます（これは、ここのエレガントなテーマの製品に対して行います）。 ただし、最初にそのGIFを表示する代わりに、ホバー時にアニメーションバージョン（またはGIF）に置き換えられたその関数の静止スクリーンショットを表示したい場合があります。
このチュートリアルでは、ホバー時にアニメーションGIFを使用して背景（静止）画像を切り替える宣伝文を作成する方法を紹介します。 まず、Snagit（画面キャプチャソフトウェア）を使用してスクリーンショットとGIFを作成する方法について説明します。 次に、これらの背景画像を宣伝文に実装して、ホバーをオンにする方法について説明します。 画像の実際の切り替えは、Diviの背景ホバーオプションを使用すると非常に簡単です。
このデザインは、デザインを前もって静的に保ち、ユーザーがコンテンツを操作するたびにユーザーを引き付けるのに役立ちます。
始めましょう。
スニークピーク
ホバーレイアウトのGIF背景を無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、DiviBuilderがアクティブな状態でjsonファイルを新しいページにドラッグするだけです。
チュートリアルに行きましょう。
始めるために必要なもの
私たちのYoutubeチャンネルを購読する
開始するには、次のものが必要です。
- Diviテーマがインストールされ、アクティブになっています
- スクリーンショットの撮影、スクリーンビデオの録画、GIFの作成を可能にするスクリーンキャプチャソフトウェア（またはツールの組み合わせ）。 このチュートリアルでは、主にSnagitを使用します。これは、ブログの投稿やチュートリアルに毎日使用するオールインワンソリューションだからです。
- フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
その後、Diviでいくつかのホバータブの作成を開始するための空白のキャンバスが作成されます。
パート1：スクリーンショットとGIFの作成
このデザインでは、宣伝文句モジュールの静止背景画像として表示するスクリーンショットを作成します。 次に、製品がどのように機能するかを簡単に説明した、静止した背景画像を生き生きとさせるGIF（アニメーション画像）を作成します。 秘訣は、ホバー時に一方の画像をもう一方の画像に切り替えるときにスムーズに移行できるように、十分に似ている画像とGIFを作成することです。
2つの画像が作成されると、静止画像を最初の背景画像として使用できます。 次に、blurbモジュールにカーソルを合わせると、背景画像をgif画像に切り替えることができます。
スクリーンショットとGIFを作成するには、Snagitを使用します。 これは無料のソフトウェアではありませんが、非常に使いやすく、スクリーンショットの作成、画面の記録、および画面の記録のGIFへの隠蔽をすべて1か所で行うことができます。
スクリーンショットの静止画像の作成
スクリーンショットを作成するには、Snagitを開いてキャプチャボックスを開きます。 次に、画面の領域を選択して、画像をキャプチャすることを選択してください。 これにより、画面上の領域をドラッグして画像としてキャプチャできます。 画面キャプチャを初期化するには、キャプチャボタンをクリックします。
次に、画像としてキャプチャする画面の領域の周りのキャプチャ領域をクリックしてドラッグします。
画像をコンピューターに保存します。 次に、Snagitキャプチャボックスをもう一度開き、画面の領域を選択してビデオをキャプチャすることを選択します。 画面キャプチャを初期化するには、キャプチャボタンをクリックします。
次に、キャプチャしてビデオクリップとして記録する画面の領域の周りのキャプチャ領域をクリックしてドラッグします。 静止画像とgifの間でよりシームレスな遷移を作成するには、画像の場合と同じ（またはできるだけ近くの）ビデオの領域をキャプチャする必要があります。
準備ができたら、録音ボタンをクリックして、録音したいデモを行います。
完了したら、[停止]をクリックして記録を停止します。 次に、Snagitエディタでビデオクリップを編集できます。 エディションが完了したら、ビデオの横にあるGifボタンをクリックして、ビデオからGifを作成します。
[GIFの作成]ポップアップで、必要に応じて出力設定を変更します。 gifが繰り返されるように、必ずループを有効にしてください。 次に、[作成]ボタンをクリックします。
gifが作成されたら、コンピューターに保存します。
これで、Diviのデザインに静止画像とgif画像を追加する準備が整いました。
パート2：ホバーでアニメーションGIF画像を使用して背景画像を切り替える宣伝文を作成する
まだ行っていない場合は、新しいページを作成し、DiviBuilderをデプロイしてフロントエンドでビルドします。 次に、2列の行を持つ新しい通常のセクションを作成します。
列1に、宣伝文モジュールを追加します。
次に、コンテンツ設定を次のように更新します。
本文：「本文はここに表示されます」
アイコンを使用：はい
アイコン：クラウド（スクリーンショットを参照）
デフォルトの背景画像を追加する
次に、次のようにデフォルトの背景画像を宣伝文に追加します。
背景画像：作成した背景画像（静止画のスクリーンショット）をアップロードします。
背景画像のサイズ：フィット（これにより、画像全体が表示されたままになります）
背景画像の位置：上部中央（これにより、画像が宣伝文の上部に保持されます）
ホバー背景GIF画像を追加する
最初の背景画像を配置したら、背景ホバーオプションを展開し、ホバータブを選択します。 次に、ホバー状態で新しい背景画像として機能するGif画像を追加します。
宣伝文モジュールのスタイリング
次のデザイン設定を更新して、宣伝文句のスタイルを設定し続けます。
アイコンの色：＃6bb962
円のアイコン：はい
円の色：#ffffff
テキストの配置：中央
タイトルフォント：Lora
タイトルテキストサイズ：34px
パディング：上50％、下5％、左3％、右3％
このデザインの本当の鍵はパディングです。 背景を宣伝文のコンテンツの上に配置するには、上部のパディングの約50％を追加する必要があります。 また、背景画像のサイズが「フィット」に設定され、位置が「上部中央」に設定されているため、ブラウザの幅に応じてコンテンツの上にうまく配置されます。
最後に、次のように、ホバー時に宣伝文にボックスシャドウを付けます。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの垂直位置：0px
ボックスシャドウブラーの強さ：0px（デフォルト）、24px（ホバー）
最終結果
これが最終結果です。
そして、これがタブレットと電話のデザインです。
そして、スクリーンショットと色が異なる追加の宣伝文句を使用すると、次のようになります。
最終的な考え
WebサイトでのGIFの使用に慣れていない場合は、必ず検討する必要があります。 彼らは本当にあなたのコンテンツを生き生きとさせ、あなたの訪問者に非常に有用なイラストを提供することができます。 また、Diviの背景ホバーオプションを使用すると、ホバー時にGIFを使用して静止画像を簡単に切り替えることができます。 このソリューションは、コンテンツを操作するときにユーザーを実際に引き付ける、気を散らすことの少ないデザインを事前に提供できます。 次のプロジェクトに役立つことを願っています。
コメントでお返事をお待ちしております。
乾杯！