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

レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」前のページ

Webデザイナーのための101のフリーフォント集がとてもよさげ次のページ

関連記事

  1. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

  2. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  3. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  4. CSSで可変式ドロップダウンメニュー

    CSS

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみた

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみました。…

  5. Animated Transition Effects
  6. CSS

    よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる

    blockquoteのデザインって色んなパターンがあって面白いですよね…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP