テキストの大文字を使用すると、スクロールするテキスト ボックスが表示されます。 サイトのWeb からの有益な抜粋で読者を惹きつける コンテンツ。 これらはティッカー (またはニュース ティッカー) とも呼ばれ、ページの上部または下部にニュース更新の安定したストリームを表示するためによく使用されます。 。 通常、スクロールアニメーションは XNUMX 行で実行されます。 コンテンツ ループ内で情報が繰り返し表示されます。 残念ながら、 <marquee>htmlタグは廃止されたため、最近ではCSSとJavaScriptを使用してマーキーを作成しています。 ただし、Diviを使用すると、カスタムコードを気にすることなく、単純な選択長方形を作成できます。

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

のは、始めましょう。

概要

始めるために必要なもの

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

1. Le Diviテーマ インストール済みでアクティブ
2. フロントエンドで最初から構築するために作成された新しいページ（ビジュアルコンストラクター）

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

構想の始まり

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

それを行う方法は次のとおりです。

列の行を持つ通常のセクションを作成することから始めます。

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

• 最大幅：200px
• 室内装飾品：上部に10px、下部に10px
• 角丸：10px
• ボックスシャドウ：スクリーンショットを参照
• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

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

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

次に、更新します コンテンツ 本文を XNUMX 行のテキストで囲みます。 ここでは、テキスト行が別の行に分割されていないことを確認してください。

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

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

テキストモジュールの設計パラメーターを次のように更新します。

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

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

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

結果

結果を見てみましょう。

長いテキスト行を作成する

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

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

これはリンクのあるフェーズです

テキストの最長行に合わせて幅とマージンを追加します

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

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

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

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

結果

これが最終結果です。

ホバー時に選択テキストアニメーションを一時停止します

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

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

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

アニメーション再生状態：一時停止。

最終結果

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

このチュートリアルは以上です。Diviにスクロールテキストを追加する方法を説明したことを願っています。