動く背景

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

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


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

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

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

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

また、背景画像のサイズ指定についての説明のあるサイトもあります。全画面指定などが簡単にできます。

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

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

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

まずは、さりげなくページを開くたびに背景が変化しているとか、一定の時間経過とともに背景が変化するとか、基本的な背景のJavaScriptです。背景色や背景画像の変更もあります。
bodyとbox(divで囲んだもの。テーブルの場合も同じ指定)の、全面や左端のCSS(スタイルシート)の位置指定方法は同じなので、好みで設定を変更して下さい。

◆背景移動・メニュー◆

とらねこ庵サイトの『動く背景』は、とても短い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修正開始




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

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

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

■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とJavaScriptを使用して作る、背景です。
 全件グローバル変数を削除済み:2016/04/07 


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

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

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

 全件グローバル変数を削除済み:2017/07/23 


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


TOP

END
Google ネット検索 サイト内検索