背景スライド11■フェード背景スライド文字入り    UP日時 : 2016/06/12

動くJavaScript

−welcome−
コピーだけで動作するJavaScriptのサンプルを紹介するサイト

●2016/06/12:即時関数で囲んで、グローバル変数を消しました。

■背景画像の順番表示で全面のJavaScriptはこちら→ 背景スライド9■フェード背景スライド全面

上記のスライドショーを「文字入り」に改造しました。
背景画像がフェードイン、フェードアウトで、スライドショーをします。
CSSの指定を変更すれば、背景画像を全面1枚から敷詰め表示に変えることもできます。

改造元のように、フェードのスライド領域が縦横100%や、上端ピッタリや左端ピッタリの領域の時の「文字入り」は簡単です。
普通に文字を記述するか、文字に「position:absolute」指定をすれば、文字の位置指定に苦労することはありません。
しかし「スライドショーをしている枠(範囲指定)」の中に文字入れをするのは、少し面倒です。
それが簡単にできるJavaScriptです。

文字部分は、<div id="waku">〜〜〜</div>の中で、「position:absolute;」指定で記述します。
「id="waku"」が基準位置になるので、「position:absolute; top:0; left:0;」は「id="waku"」の左上位置になります。
領域の中の文字の位置指定の方法の参考はAllAboutから。
この領域の中の文字指定で「margin-top」は使用しないこと。
子要素に「margin-top」を使用すると、親要素(id="waku")の「margin-top」等がおかしくなることがあります。
「position:absolute;」で指定して下さい。

■背景画像のランダム表示で敷詰の文字入りJavaScriptはこちら→ 背景スライド12■フェード背景ランダムスライド文字入り

●角丸指定(border-radius)を付けると、ブラウザによって動作が違います。
ブラウザIEとFirefoxでは問題ないですが、クロムとオペラでは「overflow:hidden;」の指定を入れているのに、角丸部分が一時的に表示されます。
その防止のため、角丸指定(border-radius)だけは、「#waku」だけでなく「#Fb1,#Fb2」にも同じ記述を入れて下さい。