サークルテキストパスSVGアニメーションをDiviデザインに追加する方法
公開: 2021-07-07Webデザインスペースのトレンドに遅れずについていくことは、Webデザイナーとして最新の状態を保つための最良の方法の1つです。 それはあなたがあなたのクライアントを感動させそしてあなたのスキルセットを次のレベルに持って来るのを助けるであろう現代のウェブサイトを作成することを可能にします。 今日のチュートリアルでは、高度なWebサイトで最近よく見られるトレンドに慣れる方法を紹介します。 サークルテキストSVGアニメーション。 これらをDiviページデザイン内に追加する方法、さらにはボタンとしても使用する方法を紹介します。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
レイアウトを無料でダウンロード
無料のレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
ヒーローデザインを作成する
新しいセクションを追加
背景色
ヒーローデザインを作成することから始めましょう。 Diviで新規または既存のページを開き、それに新しい通常のセクションを追加します。 セクション設定を開き、選択した背景色を適用します。
- 背景色：＃f3eee8
間隔
次に間隔設定に移動し、上部と下部のパディング値を変更します。
- トップパディング：30px
- ボトムパディング：30px
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、[デザイン]タブに移動し、サイズ設定を開いて、次の調整を行います。
- 幅：95％
- 最大幅：2580px
列1の設定
一般的な行の設定が完了したら、最初の列の設定を開くことができます。
背景画像
背景設定内で、選択した背景画像をアップロードします。 この画像は、チュートリアルのさらに下の円テキストSVGアニメーションの下に表示されます。
- 背景画像サイズ：カバー
- 背景画像の位置：中央
- 背景画像の繰り返し：繰り返しなし
テキストモジュール＃1を列2に追加します
H1コンテンツを追加する
2列目の最初のテキストモジュールから始めて、モジュールを追加します。このセクションをヒーローとして使用している場合は、選択したH1コンテンツを追加し、ページの他の場所で使用している場合は、H2コンテンツを追加します。
H1テキスト設定
次に、このモジュールの見出しテキスト設定のスタイルを設定します。
- 見出しフォント：プレイフェアディスプレイ
- 見出しのテキストの色：＃212121
- 見出しのテキストサイズ：
- デスクトップ：100px
- タブレット：60px
- 電話番号：45px
サイジング
次に、サイズ設定に移動し、最大幅を適用します。
- 最大幅：600px
テキストモジュール＃2を列2に追加します
コンテンツを追加する
最初のテキストモジュールの下に、別のテキストモジュールを追加します。 今回は、いくつかの説明内容を含めます。
テキスト設定
[デザイン]タブに移動し、次のようにテキストのスタイルを設定します。
- テキストフォント：Montserrat
- テキストサイズ：15px
- テキスト行の高さ：2em
サイジング
サイズ設定でも最大幅を使用します。
- 最大幅：520px
間隔
次に、間隔設定に移動し、いくつかのレスポンシブ値を使用します。
- トップマージン：
- デスクトップ：20vh
- タブレットと電話：50px
- 左パディング：5％
国境
境界線の設定にも左の境界線が含まれています。
- 左ボーダー幅：2px
- 左ボーダーの色：＃000000
サークルテキストSVGアニメーションを追加
列1にコードモジュールを追加する
セクションデザインの基礎を作成したので、サークルテキストSVGアニメーションの作成に集中できます。 サークルテキストのSVGアニメーションを追加するには、列1のコードモジュールを使用します。先に進んで1つ追加します。
リンクを追加
このサークルテキストのSVGアニメーションをクリック可能にする場合は、モジュールのリンク設定で任意のURLを追加できます。
サイジング
サイズ設定でもモジュールの幅が「100％」に設定されていることを確認してください。
- 幅：100％
サークルとテキストのSVGをコードボックスに追加する
コンテンツタブのコードボックスに戻ります。 ここでは、最初に次のHTMLコードを使用して円のSVGとテキストパスを追加します。
<svg viewBox="0 0 500 500"> <defs> <path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="circle"> </path> </defs> <text dy="70"> <textPath xlink:href="#circle">View Portfolio • New Homes •</textPath> </text> </svg>
CSSを使用したSVGのスタイル
もちろん、SVGテキストパスをデザインに一致するようにスタイル設定する必要があります。 SVGも「100％」に設定されていることを確認しています。 コードボックス内のスタイルタグの間に、CSSコードの次の行を貼り付けます。
<style>
svg {
width: 100%;
}
svg textPath {
font-size: 39px;
font-family: "Montserrat";
text-transform: uppercase;
letter-spacing: 20px;
fill: #fff;
}
</style>
AnimateTransformHTMLタグを追加します
次に、テキストの無限回転を作成するために、外部JavaScriptコードを必要とせずにアニメーションを作成できるanimate変換要素を使用します。 SVGに割り当てる属性は次のとおりです。
<animateTransform
attributeName="transform"
begin="0s"
dur="15s"
type="rotate"
from="0 250 250"
to="360 250 250"
repeatCount="indefinite"
/>これらの属性を必要に応じて変更して、選択したアニメーションを作成できます。 最後の属性repeatCountが「不定」に設定されていることに注目してください。 これにより、SVGの無限の回転ループを作成できます。
自分で使用するためにテキストパスを変更する
もちろん、自分のWebサイトに一致するようにテキストを変更する必要があります。これは、テキストパスタグ間で簡単に行うことができます。 ただし、コピーの長さを変更したら、完全な円を作成するために設定を変更する必要があります。 y軸に沿ったシフトを示す「dy」値を試して、目的の結果が得られるまでテキストパスのフォントサイズと文字間隔を変更できます。 それでおしまい！
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、デザインのトレンドに合わせてWebサイトを最新の状態に保つ方法を紹介しました。 具体的には、サークルテキストSVGアニメーションを作成し、Diviデザインでエレガントに使用する方法を示しました。 アプローチができたら、この要素を使用して必要なテキストを表示し、独自のデザインに微調整することができます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。