Diviでシンプルなテキストマーキーを作成する方法

テキストマーキーは、コンテンツの有用なスニペットで読者を引き付けるテキストのスクロール領域をWebサイトに提供します。これらは、ティッカー（またはニュースティッカー）とも呼ばれ、ページの上部または下部にニュースの更新の安定したストリームを表示するためによく使用されます。 。 通常、スクロールアニメーションは、情報が繰り返し表示されるように、ループ内の1行のコンテンツで実行されます。 残念ながら、html <marquee>タグは廃止されたため、最近ではCSSとJavaScriptを使用してマーキーを作成しています。 ただし、Diviを使用すると、カスタムコードを気にすることなく、簡単なマーキーを作成できます。

このチュートリアルでは、Diviを使用して簡単なテキストマーキーを作成するのがいかに簡単かを説明します。 ホバー時にスクロールするテキストアニメーションを一時停止する方法や、ヘッダーの一意のデザイン要素として大きなテキストマーキーを追加する方法についても説明します。

始めましょう。

スニークピーク

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

私たちのYoutubeチャンネルを購読する

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、次のものが必要です。

1. Diviテーマがインストールされ、アクティブになっています
2. フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

パート1：Diviでシンプルなテキストマーキーを作成する

この最初の例では、テキスト行の単純なテキストマーキーを作成します。 これを行うには、オーバーフローを非表示にして行に最大幅を指定します。 次に、テキスト行を含むテキストモジュールにループスライドアニメーションを追加して、行をスライドしてマーキーのように繰り返し表示されるようにします。

これがその方法です。

まず、1列の行を持つ通常のセクションを作成します。

次に、モジュールを追加する前に、次のように、固定幅、ボックスシャドウ、および境界線半径で行を更新します。

• 最大幅：200px
• パディング：上10px、下10px
• 丸い角：10px
• ボックスシャドウ：スクリーンショットを参照
• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

テキストモジュールを追加する

行が終了したら、新しいテキストモジュールを行に追加します。

次に、本文の内容を1行のテキストで更新します。 今のところ、テキストの行が別の行に分割されていないことを確認してください。

• 本文：「これは文です」

テキストモジュールの設計

テキストモジュールのデザイン設定を次のように更新します。

• マージン：左-100％、右100％

これにより、テキストモジュールが行の左側の外側に配置されます。 行にはオーバーフローの可視性が非表示になっているため、アニメーションを追加して表示するまで、モジュールは非表示になります。

• アニメーションスタイル：スライド
• アニメーションの方向性：右
• アニメーション時間：5000ms
• アニメーション強度：100％
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：線形
• アニメーションの繰り返し：ループ

結果

それでは、結果を確認してみましょう。

より長いテキスト行の作成

上記の単純なテキストマーキーのデザインでは、テキストの行の幅を行の同じ幅に制限しています。 ただし、同じ行幅でより長いテキスト行を作成する場合は、設定を少し変更する必要があります。

まず、テキストモジュールで、本文テキストを次のように置き換えます。

<p>This is a sentence in a marquee with a <a href="#">link</a></p>

より長いテキスト行に対応するために、幅とマージンを追加します

お気づきかもしれませんが、テキストは1行ではなく3行に分割されています。

したがって、マージンとアニメーションの強度を調整する必要があります。

• 幅：207％
• マージン：-207％左、207％右
• アニメーション強度：75％

ここでの秘訣は、幅を広げて余白の値を更新し、1行のテキストに十分なスペースを提供することです。 次に、アニメーションの強度を調整して、ループするアニメーションの間に大きな切れ目がないようにします。

結果

これが最終結果です。

ホバーでマーキーテキストアニメーションを一時停止する

このマーキーにはリンクが含まれているため、移動中にユーザーが実際にリンクをクリックすることは困難です。 ただし、ホバー時にアニメーションを一時停止するcssの小さなスニペットをテキストモジュールに追加できます。

CSSスニペットを追加して、ホバーでアニメーションを一時停止します

cssスニペットを追加するには、テキストモジュール設定を開き、ホバータブの下のメイン要素に次のカスタムCSSを追加します。

animation-play-state: paused;

最終結果

次に、最終結果を確認します。 カーソルをテキストの上に置くと、テキストアニメーションが一時停止し、ユーザーがリンクをクリックできるようになります。

パート2：Diviでレスポンシブデザイン要素としてテキストマーキーを作成する

Diviで簡単なテキストマーキーを作成する方法を理解したので、同じ概念を使用してレスポンシブテキストマーキーデザイン要素を作成できます。 これは、ヘッダーまたはセクション見出しの独自のアニメーションデザインを作成するのに適しています。

これを行うには、DiviのJobRecruiterホームページの既成のレイアウトを使用します。

既成のレイアウトを追加する

ページにレイアウトを追加するには、Divi Builderの下部にある設定メニューを開き、プラス記号をクリックします。 ライブラリからの読み込みポップアップから、求人情報レイアウトパックを選択します。 次に、クリックしてホームページのレイアウトを使用します。

レイアウトで余分なコンテンツを削除する

レイアウトがページに読み込まれたら、ワイヤーフレームビューモードを展開し、全幅ヘッダーとその直下のセクションを除くレイアウトのすべてのコンテンツを削除します。

テキストマーキーアニメーションの作成

ご覧のとおり、「hired」という単語は、2番目のセクションのテキストモジュールで大きなテキストデザイン要素としてすでに使用されています。 そのテキストモジュールをレスポンシブテキストマーキーデザイン要素に変えます。 テキストマーキーを応答可能にするための鍵は、行とテキストモジュールがブラウザウィンドウの全幅に及ぶことを確認することです。 100％の幅を使用してこれを行うことができます。 次に、テキストサイズにvw長さの単位を使用できます。 これにより、ブラウザの幅に合わせてテキストが適切に拡大縮小されます。 その後、前に簡単なテキストマーキーの例を作成するために使用したのと同じ原則を適用します。

これがその方法です。

行設定を更新します

前述のように、このレスポンシブテキストマーキーデザインが機能するには、行が100％である必要があります。 これにより、テキストモジュールはブラウザの幅に相対的なvwの長さの単位を使用できます。 事前に作成されたレイアウトにはすでに100％の幅の行があるため、何もする必要はありません。

ただし、残りの設定は次のように調整する必要があります。

• マージン：-24vwボトム
• 変換変換Y軸：-24vw
• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

負の下部マージンは、transformtranslateを使用して行を上に移動するたびに残っている負のスペースを取り除くことです。 また、テキストマーキー効果を得るには、行のオーバーフローを非表示にする必要があります。

テキストモジュールのテキストデザインを更新する

これで、テキストモジュールを更新して、大きなテキストマーキーデザイン要素に変換するだけで済みます。

テキストモジュールを開き、以下を更新します。

• テキストテキストの色：rgba（255,255,255,0.16）
• テキストテキストサイズ：36vw
• マージン：左-100％、右100％

テキストサイズはvwの長さの単位を使用しているため、テキストはブラウザの幅に合わせて適切に拡大縮小されます。

テキストモジュールにアニメーションを追加する

• アニメーションスタイル：スライド
• アニメーションの方向：左
• アニメーション時間：10000ms
• アニメーション強度：100％
• アニメーション速度曲線：線形
• アニメーションの繰り返し：ループ

最終設計

次に、最終的なデザインを確認します。

最終的な考え

テキストマーキーは、Webデザインで使用するのに便利なツールです。 ニュースティッカーとして厳密に機能するだけではありません。 彼らはまたあなたのウェブデザインに素晴らしいアニメーション要素を追加することができます。 そして最良の部分は、Diviがあらゆる種類の美しい方法でそれらを簡単に作成および設計できることです。 このチュートリアルが、必要なときにいつでも簡単なテキストマーキーを作成するのに役立つことを願っています。

コメントでお返事をお待ちしております。

乾杯！