【CSSだけ】テキストで背景を切り抜き背景をアニメーションさせる

  • LINEで送る

テキストの背景をアニメーションする方法をご紹介します。ローディングやテキストのアクセントに使えるデザインだと思うので、コピペして使ってみてください。

【CSSだけ】テキストで背景を切り抜き背景をアニメーションさせる

DEMOページ

最初に全てのコードをお見せして、後から細かく説明しますので、コードだけ知りたい方はコピーしてすぐに使ってみてください!

HTML↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【CSSだけ】テキストで背景を切り抜き背景をアニメーションさせる</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="text-container">
        <h1>HELLO</h1>
    </div>
</body>
</html>

CSS↓

body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: arial;
    height: 100vh;
    background: #000000;
}
.text-container{
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.text-container h1{
    width: 100%;
    background: url(color.jpg);
    background-size: cover;
    font-size: 150px;
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
    animation: animate 5s linear infinite;
}
@keyframes animate{
    0%{
        background-position: left 0px top 0px;
    }
    100%{
        background-position: left 1000px top 0px;
    }
}

@media screen and (max-width:600px){
    .text-container{
        max-width: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
    }
    .text-container h1{
        font-size: 90px;
    }
}

 

CSSの解説

その1 背景画像をテキストで切り抜く

.text-container h1{
    width: 100%;
    background: url(color.jpg);
    background-size: cover;
    font-size: 150px;
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
    animation: animate 5s linear infinite;
}

過去にも紹介したことがある背景画像をテキストに切り抜く技術を説明します。使うCSSは3つ。

background: url(color.jpg);
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;

です。この3つは切り抜きたいテキストの要素に書きます(DEMOの場合は<h1>タグ)。-webkit-background-clip: text;で背景画像をテキストで切り抜きます。次に-webkit-text-fill-color:transparent;でテキストの元々の色を透明にして背景を可視化させます。

 

過去の参考記事

【webデザイン】HTMLとCSSで作る404エラーページデザイン

 

その2 background-repeatさせる

背景を動かすためにはbackground-repeat:をあえて設定しないことです。細かくいうと、repeat-xは良いですが、no-repeatに設定しないことです。そうすることでanimationで動かしても背景が消えることなく表示続けます。

 

その3 animationで背景の位置を調節する

@keyframes animate{
    0%{
        background-position: left 0px top 0px;
    }
    100%{
        background-position: left 1000px top 0px;
    }
}

今回の1番のポイントはanimationで背景画像のleftの位置を変える設定をすることです。@keyframesにアニメーションを設定しますが、background-position:を0%と100%つまり最初と最後の位置を指定しています。今回は最初の位置を一番左に、最後の位置を左から右に1000pxのところまで動かす、という設定にしています。これをanimation: animate 5s linear infinite;で5秒間一定の速さでループするようにしています。

 

まとめ

今回はテキストの背景をアニメーションさせる例をご紹介しました。フォントを変えてみたり背景の選び方次第で雰囲気も変わってくるので、お洒落なテキストデザインを作りたいときにオススメです。自分なりのテキストアニメーションを作ってみてください!

 

 

 

  • LINEで送る

SNSでもご購読できます。

コメントを残す

*