テキストにノイズがかかったようなアニメーションをCSSだけで実現したくて、とりあえずテキストの一部分だけを切り取って横へずらすことはできないかなと模索していまして、何かそれっぽい感じのことができたのでブログに残しておきます。

最終的にはアニメーションさせたいんですが、どのようにアニメーションさせるかで少し大変そうだったので、途中経過的な覚書です。

デモ

テキストの一部分をただ横へずらしているだけです。

NOISE

これをうまくアニメーションさせればかっこいい感じになると思うんですよね。問題は、どのようにアニメーションさせればいい感じになるのかで、それが難しそうなんですけど。センスが必要。

実装方法

これのやり方ですが、タイトルにもあるように、CSSのclipプロパティを使って表現しています。以下にHTMLとCSSを。

HTML

<p class="clip-text" data-text="NOISE">NOISE</p>

HTMLには、データ属性を設定して、そこに表示するテキストと同じテキストを入力しておきます。

CSS

.clip-text {
    position: relative;
    width: 400px;
    margin: 0 auto;
    text-align: center;
    font-size: 100px;
    font-family: Arial, sans-serif;
}
.clip-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: -4px;
    width: 400px;
    color: #000;
    overflow: hidden;
    background: #fff;
    clip: rect(75px, 400px, 105px, 0);
}

before疑似要素のcontentプロパティに、HTMLで設定したデータ属性の値をattr()で取得します。こうすることで、全く同じテキストが2つできることになり、また、相対配置しているため、2つが全く同じ位置に重なった状態となります。これをclipプロパティで切り抜いて、leftプロパティで少しだけずらすことで、上記のデモのような状態となるわけですね。

上の要素(before疑似要素)にbackgroundを指定しているので、少しだけ位置を変えると、下の要素が隠れ、テキストの一部がずれたように見える仕組みです。

NOISE

切り抜いた上の要素が下の要素を隠しているのが分かると思います。

after疑似要素も追加

after疑似要素も追加すれば、2箇所でずらすことができるので、よりいい感じにできます。以下、リンク先参照。

after疑似要素を追加したデモ

まとめ

clipプロパティは画像を切り抜く時に使うというイメージが強かったんですけど、普通にテキストも切り抜くことができるというのは、ちょっとした発見でした。ただ、特殊なことをしない限りは、あまり使うことはないかなという印象です。

最終的にはアニメーションさせたいので、clip:rect();の値を比較的早いスピードで変化させれば、それっぽくはなるのかなと思っています。Sassでランダムさせるというのが現実的なんでしょうかね。