HTMLとCSSを使ってテキストエフェクトを作ってみた

こんにちは朱夏です。

今回は、いままで学習してきた知識を使って、動きのある視覚効果をいくつか作ってみたいと思います。

朱夏

今までやってきたことでどんなものが作れるかな？

今回は3つほど作っていきたいと思います。
実際に使えるかどうかは解りませんが、今に自分に出来ることで面白そうなものを作ってみました。

それではやっていきましょう。

[もくじ]
その１　浮かび上がる文字
その２　ウェーブする文字
その３　煙の様に消える文字
あとがき

その１　浮かび上がる文字

テキストが背景からふわっと浮かび上がっているような視覚効果を作ってみます。
今回は先に実行結果から表示していきます。

TITLE

こんな感じになります。
マウスカーソルを合わせると文字が消える様なギミックを付けました。

コードはこちらです。

HTML

      <div class="textshadow2">
         <p class="text-center">
            <span class="fonteffect2">T</span><span class="fonteffect2">I</span><span class="fonteffect2">T</span><span class="fonteffect2">L</span><span class="fonteffect2">E</span>
         </p>
      </div>

CSS

.textshadow2 {
    background-color: #afd0ef;
    height: 200px;
}

.text-center {
    text-align: center;
}

.fonteffect2 {
    color: #afd0ef;
    font-family: 'Sigmar One', cursive;
    font-size: 100px;
    text-shadow: 0 0 40px rgba(77, 96, 204, 0.507);
    transition: 0.3s;
}

.fonteffect2:hover {
    text-shadow: 0 0 0 rgba(212, 212, 212, 0);
}

これは比較的簡単に作る事が出来ました。

その２　ウェーブする文字

テキストが自動的に1文字ずつ上下に揺れるエフェクトです。
おまけでテキストが消えたり現れたりする様にしました。

TITLE

コードはこちらになります。

HTML

<div class="textwave">
   <span class="">T</span>
   <span class="">I</span>
   <span class="">T</span>
   <span class="">L</span>
   <span class="">E</span>
</div>

CSS

.textwave {
    height: 200px;
    background-color: #dd9b9d;
    padding: 50px;
    margin-top: 0.8pm;
    text-align: center;
    font-size: 50px;
}

.textwave span {
    display: inline-block;
    animation: wave-text 1s ease-in-out infinite;
}

.textwave span:nth-of-type(1) {
    animation-delay: 0.0s;
}

.textwave span:nth-of-type(2) {
    animation-delay: 0.1s;
}

.textwave span:nth-of-type(3) {
    animation-delay: 0.2s;
}

.textwave span:nth-of-type(4) {
    animation-delay: 0.3s;
}

.textwave span:nth-of-type(5) {
    animation-delay: 0.4s;
}

@keyframes wave-text {
    0% {
        transform: translateY(0em);
        opacity: 1;
    }
    60% {
        transform: translateY(-0.8em);
        opacity: 0;
    }
    100% {
        transform: translateY(0em);
        opacity: 1;
    }
}

今回はちょっとだけ新しい要素を使っているので紹介しておきます。

nth-of-type()

こちらは、指定した要素が何番目かを指定する事が出来ます。
例として以下の情報を解読します。

.textwave span:nth-of-type(1)

訳：textwaveクラスを親に持つspanタグの1番目を指定しています。

これを文字ごとに分けて、スタイルで動作の開始タイミングをずらしています。
仕組みが解ればそこまで難しくはないですね。

その３　煙の様に消える文字

3つ目はテキストが煙の様に消えたり出てきたりするエフェクトを作ってみました。

TITLE

コードはこちらになります。

HTML

<div class="textsmoke">
   <span class="">T</span>
   <span class="">I</span>
   <span class="">T</span>
   <span class="">L</span>
   <span class="">E</span>
</div>

CSS

.textsmoke {
    color: #ffffff00;
    font-family: 'Nothing You Could Do', cursive;
    height: 200px;
    padding: 75px;
    background-color: black;
    text-align: center;
    font-size: 50px;
    text-shadow: 0 0 150px rgba(255, 255, 255, 0);
}

.textsmoke span {
    display: inline-block;
    animation: smoke-text 2s ease-in-out infinite alternate;
    animation-delay: 2s;
}

.textsmoke span:nth-of-type(1) {
    animation-delay: 0.0s;
}

.textsmoke span:nth-of-type(2) {
    animation-delay: 0.1s;
}

.textsmoke span:nth-of-type(3) {
    animation-delay: 0.2s;
}

.textsmoke span:nth-of-type(4) {
    animation-delay: 0.3s;
}

.textsmoke span:nth-of-type(5) {
    animation-delay: 0.4s;
}

@keyframes smoke-text {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 0 rgb(255, 255, 255);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 0 rgb(255, 255, 255);
    }
}

視覚効果自体は変化していますが、その２とその３の仕組みはほぼ同じです。
スタイルの変化を付けるだけで見え方はかなり変わってきます。