CSSで背景画像をアニメーションさせる

CSS

CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

ちょっと個人的にいいなって思った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

関連記事

  1. CSS Only Fab Icon Menu

    CSS

    CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

    CSS Only Fab Icon MenuはCSSによるコンパクトで…

  2. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

  3. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

  4. Media Queriesの@media
  5. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  6. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

最近の記事

  1. 広尾のスタバ
  2. マーガレットハウエルとミズノのコラボシューズ
  3. フレンチトーストや自家製ソーセージ
  4. ハレイワ スムージー
  5. クローバーで淹れたコーヒー

アーカイブ

PAGE TOP