繰り返し背景を全面表示してアニメーションする

公開日: : CSS, JQuery

繰り返し背景を全面表示してアニメーションする

前回の「背景を SVG で全面表示し、パターン化をアニメーションさせる」がSVGの要素を全て対応しているというブラウザが少ない為、あまり実践的ではありませんでした。

今回はついでにjQueryと画像(png)を使った例もやっておこうと思います。

1.背景を全面表示して、グラデーションにする

CSS で背景を全面表示する

背景を全面表示するには、
CSS で min-width:100% min-height:100% を指定します。

body { margin: 0;padding: 0; }
#wrap{
position:fixed; top:0;left:0;
min-width:100%; min-height:100%;
}

CSS で背景にグラデーションをかける

CSS で背景にグラデーションをかけるには以下のようにします。

#wrap{
background: -moz-linear-gradient(top, red, white);
background: -webkit-linear-gradient(top, red, white);
background: linear-gradient( red, white);
}

DEMO を見る

2.背景にパターン画像を設定して、アニメーションさせる

CSS 背景にパターン画像を設定

泡の背景画像を3つ用意して、CSSで背景に繰り返し設置します。

.skinBody1{
background: url(./images/awa1.png) repeat 0 0;
}
.skinBody2{
background: url(./images/awa2.png) repeat 0 0;
}
.skinBody3{
background: url(./images/awa3.png) repeat 0 0;
}

jQuery で背景のパターン画像をアニメーションさせる

jQueryのsetInterval関数を使って、
CSSのbackground-positionのX座標を動かします。

$(function() {
    var   bgscx1 = 0;var   bgscy1 = 0;
    var   bgscx2 = 0;var   bgscy2 = 0;
    var   bgscx3 = 0;var   bgscy3 = 0;
setInterval(function(){
    bgscx1 += 0.15;bgscy1 += 0;
    bgscx2 += 0.25;bgscy2 += 0;
    bgscx3 += 0.75;bgscy3 += 0;
	$(".skinBody1").css("background-position", bgscx1 + "px " + bgscy1 + "px");
    $(".skinBody2").css("background-position", bgscx2 + "px " + bgscy2 + "px");
	$(".skinBody3").css("background-position", bgscx3 + "px " + bgscy3 + "px");
   
});
});

DEMO を見る

参考サイト

以下を参考にさせていただきました。

webOpixelさんの記事
jQueryで背景画像をアニメーションで無限ループさせる

Detaramehpさんの記事
JQueryで背景画像を動かすアニメーション効果

関連記事

CSS セレクタ

【CSS セレクタ】その2:擬似クラスセレクタやラジオボタンチェックでフォームの有効無効や枠の色変えたいとか

<今回のピックアップ項目> :link :visited :hover :active :t

記事を読む

Web フォント とは?

WEBフォントとは? 意図するフォントを表示する技術 Webブラウザは端末にインストールされ

記事を読む

CSS三角を利用したメニューを作る(レスポンシブ)

CSS 三角 を利用したメニューを作る(レスポンシブ)

前回の吹き出しを利用して、段階を見せるような三角メニューを作っておきます。 なるべくレスポンシブ対

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ(add_filter版)

前回、「WordPress の PHP をちょっと見てみよう Ⅲ」でフックをやったので、カレンダーで

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ

WordPressでカレンダーの表示部分をいじってみようかと思います。 どうやら、カレンダー関

記事を読む

CSS 吹き出し

CSS 三角で吹き出しを作る

吹き出しとか三角とかよく使うのに、いちいち調べてどれ使おうかといつもやっていたので、まとめて作ってお

記事を読む

CSS セレクタ

【CSS セレクタ】その1:アスタリスクや属性セレクタとか

CSS3も浸透してきて、細かい所が危うくなってきたので、セレクタを中心に少しおさらいしようかと思いま

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

ビューポートの単位 vw, vh, vmin, vmax CSS で大きさを指定する時、px や

記事を読む

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

Google Earth が出来た時も、Google ストリートビューが出来た時も、 Google

記事を読む

CSS JQuery

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

wordpress カスタム投稿を一覧(ループ)で表示する
wordpress カスタム投稿を一覧(ループ)で表示する

カスタム投稿を一覧で表示する方法がいろいろあります。 query_p

wordpress カスタム投稿で 2ページ目以降が404
wordpress カスタム投稿で 2ページ目以降が404になってしまう

wordpress のカスタム投稿で、ニュースのページを作っていました

ロリポップでWordPressのPHPバージョンを5から7にする
ロリポップでWordPressのPHPバージョン7.1に変更後「サイトに技術的な問題が発生しています。」

WordPress.org の推奨環境 PHP7以上 MyS

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)
WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具

canvas タグでお絵描き(レスポンシブ)
canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas

→もっと見る

    • 201909
      Mon Tue Wed Thu Fri Sat Sun
      1
      2345678
      9101112131415
      16171819202122
      23242526272829
      30
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑