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

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

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

  3. CSS

    CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

    何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。C…

  4. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  5. Three Dots

    CSS

    シンプルで可愛いCSSローディングアニメーション「Three Dots」

    Three Dotsはアニメーション付きのシンプルで可愛いCSSローデ…

  6. Light Modal

    CSS

    パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

    Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSS…

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP