動く背景

説明 ◆動く背景◆　ページ内メニュー　

◇背景画像の設定方法＆便利ソフト　　◆基本の背景・メニュー　　◆背景移動・メニュー　　◆背景スライド・メニュー　　◆背景作成・メニュー　　◆合体背景・メニュー


このページの空の背景が、横に移動しています。これはとらねこ庵サイトの『動く背景』というJavaScriptです。
あるいは、背景が上や下へ移動していく。
または、背景がページを開くたびに違う背景になっていたり、見ている間に違う背景に変わっていったり。
背景を動かしたり変化させたり、全画面スライドショーをするJavaScriptの紹介です。

やりすぎるとウザいといわれますが、動く背景って、とっても楽しいじゃないですか！
◆◇◆ このページに使っているのは、「背景移動・メニュー」の「背景移動３空の全面背景移動」です ◆◇◆
なお、ドキュメント宣言が<!DOCTYPE html>では動かないモノにはHTML5が付いてます。

◇背景画像の設定方法＆便利ソフト

背景画像はcssで、さまざまな位置設定が可能です。
小さなシームレスの画像をタイル状に一面に並べたり、上だけ、下だけ、、左端だけ、右端だけ、位置を指定して一か所だけとか。
指定方法をサンプル付きで詳しく説明したCSS Lectureがあるので、見て下さいね。

また、背景画像のサイズ指定についての説明したHTMLクイックリファレンスもあります。全画面指定などが簡単にできます。

それから、便利ソフトの紹介。
フリーの素材屋さんへ行けば、背景用の素材がありますが、なかなか見つからないのが、このページで使用している『空』のような、大きめのサイズの写真の、縦横がつながったシームレス素材です。

これはSeamew（シーミュー）という無料のフリーソフトで、写真を加工して作っています。 少し古いソフトのせいか、加工後はJPGとPNGの画像で保存できますが、保存後のJPGはやたらと重く、他のソフトで減量しようとしても、うまく読み込めません。PNGで保存して、重いようなら他のソフトでJPGに変換して下さい。
シームレス画像が簡単に作れる、とても便利なソフトです。

◆基本の背景・メニュー◆

まずは、さりげなくページを開くたびに背景が変化しているとか、一定の時間経過とともに背景が変化するとか、基本的な背景のJavaScriptです。背景色や背景画像の変更もあります。
bodyとbox(divで囲んだもの。テーブルの場合も同じ指定)の、全面や左端のCSS(スタイルシート)の位置指定方法は同じなので、好みで設定を変更して下さい。
ランダム背景body・左端 CSS(スタイルシート)で左端設定した背景画像が、ページを開くたびにランダムに変化します。CSS指定で、表示位置は変更できます。
ランダム背景box・全面 box(divで囲んだ空間)やtable(テーブル)の中の背景画像が、ページを開くたびにランダムに変化します。CSS指定で全面表示にしてますが、表示位置は変更できます。
フェード表示の背景画像 ページを開くと、フェードインで徐々に背景画像が表示されるJavaScriptです。
背景の中からフェード背景画像 ページを開くと敷詰の背景画像が表示されている画面から、だんだんフェードインで大きな背景画像が表示されます。
bodyのフェード指定 ページを開くとbody指定の背景画像だけが表示。それからだんだんフェードインで文章やimg画像が表示されます。
フェード変化の背景色 上端に指定した背景色が、フェードイン・フェードアウトで別の背景色に次々に変化していくJavaScriptです。2016/06/09：修正
背景色、背景画像変更 マウスクリックで、背景色や背景画像が変更できるJavaScriptです。素材サイトさん仕様。2015/03/01：敷詰指定だけでなく、１列指定、固定指定にも対応。
背景画像変化とカウントダウン 背景画像とクリスマス用カウントダウンメッセージが、指定日によって変化します。

◆背景移動・メニュー◆

とらねこ庵サイトの『動く背景』は、とても短いJavaScriptです。
原本はtableの背景画像を動かすものですが、このページのようにbodyも動かせます。
同じページに、違う背景、違う方向、違う速度で、複数のtable設定も可能です。いろいろ応用してみました。
bodyを動かす場合は『全体』、tableやboxなどの場合は『部分』と表示しています。
■■『とらねこ庵』と『オリジナルJavaScript』を合わせて、さらに大幅にリニューアル予定。■■
『とらねこ庵』；http://homepage2.nifty.com/toraneko/haikei/ugoku-haikei.html（2016年11月10日付けでサイト消滅）
『オリジナルJavaScript』：http://ijichi.easter.ne.jp/java9/haikei3.htm（2016/05/05現在リンク先が変更。旧リンク先「http://jun88.6.ql.bz/」は消滅）
■■ソースをコピペされる方は最終修正日をチェックして下さい。■■　2015/06/16修正開始

box背景移動 ■部分■　divで作成したbox空間やtableの領域内で、背景画像が動きます。背景画像は移動領域よりより、小さくても大きくても可。
CSS box背景移動 ■部分■　CSSだけを使用した、box背景移動。divで作成したbox空間やtableの領域内で、背景画像が動きます。
table背景移動・複数設定 ■部分■　上記の指定を複数設定で８個。とりあえず、上→下、下→上、左→右、右→左と、斜め方向が４種類。
空の全面背景移動 ■全体■　このページでも使用している空の移動。背景を透過した小さな画像を載せると、画像が動いて見えます。
CSS 空の全面背景移動 ■全体■　CSSだけを使用した、空の全面背景移動です。
全背景と部分の複数移動 ■全体■　星空の全面背景移動と、闇と雲の部分背景移動の複数設定です。部分背景は個数を増やすことも可能
空と雲の３Ｄ移動 ■全体■　bodyと横幅100%のdivの合計３個で動かします。指定を変えることで、空と雲が立体的に見えます。
左端移動　上へ ■全体■　背景画像の左端指定の、下から上への縦移動です。「全面背景移動」とはCSSの記述が違うだけです。
CSS 左端移動　上へ ■全体■　CSSだけを使用した、背景画像の左端指定の、下から上への縦移動です。「全面背景移動」とはCSSの記述が違うだけです。
上端移動　右へ ■全体■　背景画像の上端指定の、左から右への横移動です。「全面背景移動」とはCSSの記述が違うだけです。
CSS 上端移動　右へ ■全体■　CSSだけを使用した、背景画像の上端指定の、左から右への横移動です。「全面背景移動」とはCSSの記述が違うだけです。
泡の３Ｄ移動 ■部分■　divで作成した複数の領域に、同じ位置指定をします。上の方の領域に透過指定を入れ、移動速度を変えることで、立体的な背景を作成。
桜の３Ｄ移動 ■部分■　divで作成した複数の領域に同一背景画像を移動させます。上の画像に透過指定を付け、画像が重ならないよう、10pxだけ位置指定をズラします。
水の３Ｄ移動-固定位置 ■部分■　divで作成した複数の領域に、背景透過無しの画像を重ねて移動させます。画像にはCSSで透過指定。スクロールしても同じ位置に表示される固定位置指定です。
本体クリック背景移動 ■部分■　背景画像サイズ指定を利用した背景移動が、クリックで移動したり停止したりします。
ボタンクリック移動上下 ■部分■　背景画像サイズ指定で、横幅100%のテーブル(table)を表示。今回は上へのボタン、停止のボタン、下へのボタンを画像上に設置。
ランダム移動左右ボタン ■全体■　背景画像サイズ指定のbodyに、左右と停止のボタンを設置。更新するたびに、bodyの背景画像と小さな画像が同時にランダム変化。
八方向背景移動拡大ボタン ■部分■　画像の端にマウスオンで、マウスの位置の方向へ背景画像が移動。上下左右に斜めを入れて、八方向に移動。また画像拡大ボタンで、画像が拡大。
背景画像の左右往復移動 ■全体■　背景画像が左右にゆらゆらと往復移動をします。原本の上下移動を左右移動に変更。ブラウザのFirefox対応とHTML5対応へも変更。
背景画像の上下往復移動 ■全体■　背景画像が上下にゆらゆらと往復移動をします。背景画像は左端一列指定。ブラウザのFirefox対応とHTML5対応へ変更。
全面背景画像の回転移動 ■全体■　背景画像がゆらゆらと回転移動をします。背景画像は全面指定。ブラウザのFirefox対応とHTML5対応へ変更。
部分の背景画像の回転移動 ■部分■　上記の背景画像の回転移動が、bodyではなく、tableやdivで作成した空間で、動作します。繋ぎ目の無いシームレスの画像でなくても、大丈夫です。
部分の背景画像の上下往復移動 ■部分■　背景画像の上下移動が、divで作成した空間で動作。繋ぎ目の無いシームレスの画像でなくても可能。
部分の背景画像の左右往復移動 ■部分■　背景画像の左右移動が、divで作成した空間で動作。繋ぎ目の無いシームレスの画像でなくても可能。
マウスで動く背景画像 ■部分■　マウスの動きに追従して、背景画像が動きます。こちらは部分指定です。ブラウザのFirefox対応とHTML5対応へ変更。
マウスで動く背景画像 body ■全体■　マウスの動きに追従して、背景画像が動きます。こちらは全体指定。ブラウザのFirefox対応とHTML5対応へ変更。

◇背景画像の設定方法＆便利ソフト　　◆基本の背景・メニュー　　◆背景移動・メニュー　　◆背景スライド・メニュー　　◆背景作成・メニュー　　◆合体背景・メニュー

◆背景スライド・メニュー◆

１枚絵の背景画像がフルスクリーンでスライドするという、はたして使用する人がいるんだろうか？、というJavaScriptがあります。
でも、このスケールのデカさが嬉しいじゃないですか。
もちろん、１枚絵じゃない背景画像のスライドもあります！

■2016/04/03より、bodyの背景画像を、bodyにみせかけたdiv領域の背景画像に修正の理由■
背景スライドの中には、bodyの背景画像をスライドさせているJavaScriptがあります。
しかしJavaScriptで「bodyの背景画像のスライドショー」をすると、スライド切替時にチラつきます。
防止のために画像先読みや、スライド開始時を何秒か遅らせる方法も試しましたが、やはり一部のブラウザでチラつきます。

なので、bodyではなくdivで領域を作って、その背景画像をスライドさせる方法に修正中です。
そのdiv作成の領域には「z-index:-1;」を指定して、bodyの背景画像のように、背景上に文章や画像を表示できます。
bodyの背景画像で使用したい時は、JavaScriptのソースの中の
bgD.style.backgroundImage="url("+myurl+ga[i%len]+")"; を
document.body.style.backgroundImage="url("+myurl+ga[i%len]+")"; に変更して下さい。
その時は、CSSでbodyの上端や左端や敷詰の位置指定をします。
そしてCSSとHTMLの中の、#bgDに関する指定と記述を削除して下さい。　　

　全件グローバル変数を削除済み：2017/07/25　
全面スライドショー 簡単スライドショーで紹介したスライドをフルスクリーンで表示。CSSで背景画像風に設定。
フェードで全面スライド 全面スライドで、ふわっとフェードで切り替わるもの。CSSで背景画像風に設定。
フェード全面スライドループ無 上記を改造。スライドショーがループせず最後の画像で停止。
背景サイズ指定スライド 背景画像も大きく表示したり小さく表示したり、CSSでサイズ指定ができるようになりました。これは横幅100%表示のスライドショー。
bodyもどき・全面敷詰 全面敷詰指定の背景画像のスライドショーです。
bodyもどき・上端敷詰 今回は上端指定。そして背景画像がスライドショーをします。色違いの画像を使うとGIFアニメのように見えます。
box・右端敷詰 divやtableの中の背景画像を、右端指定。そしてスライドショーをします。角丸指定、影指定付き。
下端固定ランダム敷詰 bodyもどきの、ランダムでスライドする背景画像の下端指定。位置固定にしています。
大小二つのスライド 全面フェードのスライドと、同じ小さな画像のスライド。これはこれで面白いかも。
フェード背景スライド全面 画面全面表示の１枚の背景画像がフェードイン、フェードアウトでスライドショー。bodyの背景画像ではなく、縦横100%指定したdivの背景画像で、CSSの指定を変更するだけで敷詰めにもなります。
F背景ランダムスライド敷詰 タイル状の敷詰め背景画像がフェードで、さらにランダムでスライドショー。bodyではなく、縦横100%指定したdivの背景画像。CSSの指定を変更するだけで全面にもなります。
フェード背景スライド文字入り 枠の中の背景画像のフェードのスライドショーの上に、文字が載せられます。
F背景ランダムスライド文字入 上記を改造。文字入りのスライドショーがランダム切替です。

◇背景画像の設定方法＆便利ソフト　　◆基本の背景・メニュー　　◆背景移動・メニュー　　◆背景スライド・メニュー　　◆背景作成・メニュー　　◆合体背景・メニュー

◆背景作成・メニュー◆

CSSの進化で、画像を使用しているような背景が簡単に作成できるようになりました。
CSSとJavaScriptを使用して作る、背景です。
　全件グローバル変数を削除済み：2016/04/07　
ランダム配置の模様文字 ページを開くたびに、背景の模様の配置が変わります。模様は文字フォントで作成しています。
ランダム配置のタイトル文字 ページを開くたびに、背景の複数のタイトル文字の配置が変わります。タイトルとありますが、背景の文章は複数指定可能。
ランダム配置の回転文字 ページを開くたびに、背景の複数のハートや星の配置が変わります。ハートや星は文字使用で、回転指定を付けることで画像のように見せています。
グラデ背景の泡文字 ページを開くたびに、ランダム配置で位置が変わる透明な泡です。背景にCSSでグラデーションを使用しています。
グラデ背景の回転星文字 ページを開くたびに、ランダム配置で位置が変わる星です。背景にCSSでグラデーションを使用し、星に回転指定を付けています。
グラデ背景の回転画像 ページを開くたびに、ランダム配置で位置が変わる画像です。背景にCSSでグラデーションを使用し、３種類（増減可能）の画像に回転指定を不可。
グラデ背景回転画像サイズ変化 上記の画像に、さらにランダムの画像サイズ変化を付けました。
ブロック並べの背景Ａ格子 とてもシンプルな格子模様の背景。格子の色や線の色、格子の大きさや線の太さを自由に変更可能。
ブロック並べの背景Ｂドット とてもシンプルなドット模様の背景。ドットの色や背景の色、ドットの大きさやドットの間隔を自由に変更可能。
ブロック並べの背景Ｃ色四角 色とりどりの小さな四角を並べた背景。小さな四角の色や背景色、小さな四角の大きさや四角同士の間隔を、自由に変更可能。
ブロック並背景Ｄボーダー３変化 「色の並べ方」指定を変更するだけで、横ボーダー、縦ボーダー、幾何学模様ができる、一番簡単なボーダー背景作成です。
ブロック並背景Ｅ装飾ボーダー クリスマスのイルミネーションのようなドットが並ぶボーダーです。JavaScript のソースの中で装飾します。
ブロック背景Ｆグラデのボーダー 縦のボーダーが画面の下へ行くにつれ、徐々に消えていくように見えます。body の背景のグラデーションを利用して作成。
ブロック並べの背景Ｇ透過ドット body に指定した背景画像の上に、透明なドットが並ぶお洒落な背景。
ブロック並背景Ｈ枠線のタイル body に指定した背景画像の上に、border で作成した枠線を付けて薄く彩色し、タイルやステンドグラスっぽくしました。
ブロック並べの背景Ｉ枠線の窓 窓枠のみの背景です。窓の中の色の指定は「透明色」のみなので、body に指定した背景画像がそのまま見えます。
ブロック並べの背景Ｊ回転文字 タイトル文字が、画面いっぱいに敷詰表示される背景です。文字と回転指定を利用しました。
ブロック並背景Ｋ装飾回転文字 文字と回転指定を利用して、可愛い背景を作成しました。
ブロック並べの背景Ｌ色格子 白い枠線に囲まれた色とりどりの格子の背景で、色や幅を自由に変更できます。
ブロック並べの背景Ｍ変形水玉 背景にカラフルな変形水玉が並びます。
ブロック並べ背景Ｎ大小単色水玉 １色のみの大きな水玉と小さな水玉がランダムに並び、水玉の周囲に枠線も使用できないシンプルな背景。
ブロック並べの背景Ｏ重なる円 カラフルな円形模様が重なって、レースのように並ぶ背景です。

◇背景画像の設定方法＆便利ソフト　　◆基本の背景・メニュー　　◆背景移動・メニュー　　◆背景スライド・メニュー　　◆背景作成・メニュー　　◆合体背景・メニュー

説明 ◆合体背景・メニュー◆

背景画像に関するJavaScriptで、複数のJavaScriptを合体させたものです。
大メニューの「合体」と違う点は、複数の合体元のJavaScriptが、全部背景に関するジャンルからだという点です。

　全件グローバル変数を削除済み：2017/07/23　
背景画像スライドの横移動 ■部分■　上一列表示指定の背景画像が、スライドしながら左から右に移動するという、合体技。
背景画像スライドの縦移動 ■部分■　同じく合体技ですが、左一列表示指定。画像によって指定の方法を変えてみて下さい。

◇背景画像の設定方法＆便利ソフト　　◆基本の背景・メニュー　　◆背景移動・メニュー　　◆背景スライド・メニュー　　◆背景作成・メニュー　　◆合体背景・メニュー

▲
TOP
▼
END
Google ネット検索 サイト内検索