Web活のロゴ

Web制作Output&初心者のための徹底ガイド

お問い合わせ

注目のタグ

#VsCode#Scss#Gsap#Pug#Swiper#ChatGTP
    TOP>CSS>【コピペで実装】回転するテキスト

【コピペで実装】回転するテキスト

2024.03.05
はじめに
概要

回転するテキストを実装する際には、JavascriptやScssのfor文を使用して簡単にアニメーション効果を追加できます。テキストの回転はウェブサイトやアプリケーションで目を引く効果を生み出し、ユーザーにより魅力的な体験を提供します。以下はサンプルコードですので、実際のプロジェクトに活用してみてください。このコードを使用することで、テキストが滑らかに回転する効果を実装できます。また、回転速度や方向を調整することで、さまざまなデザインの演出を実現できます。テキストの回転はクリエイティブなデザイン要素として活用されることが多く、Webサイトやアプリケーションの魅力を高める一環として取り入れられることがあります。ご参考にしてください。

スポンサーリンク
目的
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

コード

以下のコードの概要として、テキストおよびスペースをJavaScriptを使ってspanタグで包んでいます。その後、CSSを利用してテキストを円形に配置し、アニメーションプロパティとキーフレームを用いて回転させる処理を行っています。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
  <link rel="stylesheet" href="dist/css/style.min.css">
</head>

<body>
  <div class="circle relative">

    <a class="circle__cont absolute" href="">

      <div class="circle__txt textWrap">SCROLL DOWN SCROLL DOWN SCROLL DOWN</div>

    </a>

  </div><!-- /.circle -->
  <script src="/js/libs/textWrap.js"></script>
  <script src="/js/design.js"></script>
</body>

</html>

CSS(SCSS)

※このコードではSCSSを使用しており、コンパイル後にはdist/css/style.min.cssに変換することを想定しています。

.circle {
  height: 200px;

  &__cont {
    top: 0;
    left: 100px;

    &::before {
      position: absolute;
      content: "";
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      content: "";
      background-image: url(../../images/icon/arrow-down3.png);
      @extend .background-set;
      background-size: contain;
      width: 20px;
      height: 30px;
    }
  }

  &__txt {
    position: relative;
    width: fit-content;
    height: 200px;
    font-size: 16px;
    text-align: center;
    margin: 0;

    span {
      color: #707070;
      position: absolute;
      top: 0;
      left: calc(50% - 15px);
      display: inline-block;
      width: 30px;
      height: 100px;
      transform-origin: center bottom;
      animation: slideText 36s linear infinite;
    }
  }
}

@keyframes slideText {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@for $i from 1 through 36 {
  .circle__txt span:nth-child(#{$i}) {
    transform: rotate(10deg * ($i - 1));
    animation-delay: -1s * ($i - 1);
  }
}

解説

このコードはSCSS（CSSのプリプロセッサ）を使用しています。SCSSは、変数、ネストルール、ミックスイン、インポートなどを提供するCSSの拡張機能です。上記のコードは、ある特定のデザインパターンを実現するためのスタイルを定義しています。以下に、コードの主要部分について簡単に説明します。

.circle__contネストルール

  • このルールは.circleの子要素である.circle__contに適用されます。
  • top: 0;とleft: 100px;で、要素の位置を設定します。
  • &::before擬似要素を使用して、要素の前にコンテンツを追加します。この擬似要素は、絶対位置を指定し、背景画像（background-image）として指定されたURLの画像を使用します。background-size: contain;により、背景画像がコンテンツ領域に収まるようにサイズが調整されます。画像の幅と高さはそれぞれ20px、30pxに設定されています。

.circle__txtネストルール

  • このルールは.circleの子要素である.circle__txtに適用されます。
  • position: relative;で、子要素（span要素）の絶対位置指定の基準点をこの要素にします。
  • width: fit-content;で、コンテンツの幅に合わせて要素の幅が自動調整されます。
  • height: 200px;で、要素の高さを200ピクセルに設定します。
  • font-size: 16px;とtext-align: center;で、テキストのスタイルを指定します。
  • spanネストルールでは、span要素の色、位置、サイズ、およびアニメーションが定義されています。animation: slideText 36s linear infinite;は、定義された@keyframes slideTextに従ってテキストを回転させるアニメーションを設定します。

@keyframes slideText

  • このアニメーションは0%（開始時）から100%（終了時）まで、要素を0度から360度に回転させます。

@forループ

  • @for $i from 1 through 36は、Sassのループ構文を使用しています。これは1から36までの各span要素に異なるtransform（回転）とanimation-delay（アニメーション遅延）の値を設定するために使用されます。
  • このループにより、各span要素が異なるタイミングでアニメーションを開始し、円形のパターンを形成するように回転します。

このコード全体を通して、CSSの高度な機能とSCSSの構文を利用して、複雑なデザインとアニメーションを実現しています。

Javascript

js/libs/txtWrap.js

class TextWrapper {
  // コンストラクタでは特に何もしないが、将来的に拡張することを想定している
  constructor() {}

  // 文字を<span>タグで囲むメソッド
  wrapCharacterWithSpan(char) {
    return `<span>${char}</span>`;
  }

  // 指定された要素内のテキストを1文字ずつ<span>タグで囲むメソッド
  wrapAllTextWithSpans(selector) {
    const element = document.querySelector(selector); // 指定された要素を取得
    if (element) {
      const texts = element.textContent // 要素内のテキストを取得
        .split("") // 1文字ずつ分割
        .map((char) => this.wrapCharacterWithSpan(char)) // 各文字を<span>タグで囲む
        .join(""); // 文字列に戻す

      element.innerHTML = texts; // 要素内に<span>タグで囲まれたテキストを表示
    }
  }
}

解説

このコードはJavaScriptで書かれたTextWrapperクラスを定義しています。このクラスは、HTML文書内のテキストを操作するためのメソッドを提供します。以下に、コードの主要部分の解説をします。

constructor() {}

  • constructorメソッドは、TextWrapperクラスのインスタンスが生成されたときに自動的に呼び出されます。このコンストラクタは現時点では何も行わない空のメソッドですが、将来的な拡張のために用意されています。

wrapCharacterWithSpan(char)

  • wrapCharacterWithSpanメソッドは、引数として受け取った単一の文字（char）を<span>タグで囲む役割を持ちます。このメソッドは、文字を<span>タグで囲んだ文字列を返します。例えば、"a"を引数に渡すと、<span>a</span>を返します。

wrapAllTextWithSpans(selector)

  • wrapAllTextWithSpansメソッドは、引数として受け取ったセレクタ（selector）に一致するHTML要素内の全テキストを、1文字ずつ<span>タグで囲むために使用されます。
  • まず、document.querySelector(selector)を用いて、指定されたセレクタに一致する最初の要素を取得します。
  • 要素が存在する場合、textContentプロパティでその要素のテキスト内容を取得し、split("")メソッドで1文字ずつに分割します。
  • 分割された各文字に対してwrapCharacterWithSpanメソッドを適用し、mapメソッドで新しい配列を作成します。この配列の各要素は<span>タグで囲まれた文字です。
  • 最後に、join("")メソッドを使用して、これらの文字列を連結し、元の要素のinnerHTMLプロパティを通じてこの新しい文字列を要素に設定します。これにより、元のテキストが1文字ずつ<span>タグで囲まれた形に置き換わります。

このクラスは、ウェブページにおけるテキストの視覚的な装飾やアニメーションの適用など、テキスト操作に関連する様々な機能を実装する基盤として役立ちます。

js/design.js

// Designクラスの定義
class Design {
  // コンストラクタ
  constructor() {
    this._init();
  }

  // 初期化メソッド
  _init() {
    // TextWrapperのインスタンスを生成
    const textWrapper = new TextWrapper();
    // .textWrapクラスを持つ要素内のテキストを<span>で囲む
    textWrapper.wrapAllTextWithSpans(".textWrap");
  }
}

// Designクラスのインスタンスを生成して初期化
new Design();

解説

このコードは、Designという新しいクラスを定義し、その中でTextWrapperクラス（先ほど説明したクラス）のインスタンスを生成して利用しています。主な要点は以下の通りです。

constructor()

  • Designクラスのコンストラクタは、クラスのインスタンスが生成されたときに自動的に呼び出されます。このコンストラクタ内でthis._init();を呼び出して、初期化メソッドを実行します。

_init()

  • _initメソッドは、Designクラスの初期化を担当します。具体的には、TextWrapperのインスタンスを生成し、そのwrapAllTextWithSpansメソッドを使用して.textWrapクラスを持つ要素内の全テキストを1文字ずつ<span>タグで囲みます。
  • このメソッドにより、ページ上の特定の要素（.textWrapクラスを持つ要素）内のテキストが装飾やアニメーションの対象となるように準備されます。

new Design();

  • 最後に、Designクラスの新しいインスタンスが生成されます。これにより、Designクラスのコンストラクタが呼び出され、_initメソッドによる初期化処理が行われます。これにより、ページのロード時に自動的に特定のテキストが装飾されるようになります。

このコードは、ウェブページのデザインや装飾に関連する初期化処理を自動的に行うための仕組みを設定する簡単な例です。TextWrapperクラスを使って、ページの特定部分に対して視覚的な変更を加えることができます。

まとめ
  • テキスト及びスペースも含めspanタグで囲む必要がある
  • spanタグの実装はJavascriptが便利
  • スペースも確保する必要がある
  • アニメーションはCSSで実装
  • アニメーションプロパティとキーフレームを活用
  • コピペで実装可能

Copyright
© 2023 Souichi_Kimura All Rights Reserved.