ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CSSを使った背景アニメーションのやり方です。テキストに自分の好きな背景画像を用意して、テキストの位置はそのままで背景だけをアニメーションさせるやり方です。
[ads_center]
CSSの設定
背景画像を設定したら、それをテキストの形にクロップしてアニメーションを設定していきます。これだけでは動かないので@keyframesを使ってアニメーションの流れを指定することで、背景画像を動かすことが可能になります。
CSSだけで作ることができるので便利ですね。
HTML
<p>SAMPLE TEXT</p>
CSS
p {
background: url("image.jpg");
-webkit-background-clip: text;
-webkit-background-size: cover;
-webkit-text-fill-color: transparent;
-webkit-animation: 10s infinite linear animate;
font-size: 150px;
font-weight: bold;
text-align: center;
}
@-webkit-keyframes animate{
0% {background-position: 0;}
100% {background-position: -1000px 0;}
}
backgroudには各自お好きな画像を設定して下さい。
やり方自体はとても簡単に設定できるので、アニメーションを利用してちょっとユーザーの目を魅きたい時なんかに活用できそうですね。手軽にできる点が個人的にいいなぁと思ったポイントです。
参考サイト
Creating Simple Text Effects With CSS | Pencil Scoop | Web Design & Development
