背景画像を時間で切り替える方法を教えてください。

前提

　プログラミング歴：１週間
使用ツール：サクラエディタ
heroku上に表示する

実現したいこと

　背景に設置している4枚の画像を時間で切り替えたい。
→背景画像はfixedを使いスクロールしても途切れない状態
→背景画像のサイズはpc画面ちょうど。

完成イメージとしては、下記の画像で表示している青空の背景画像を（現在は.bg_img で背景を表示）
10秒程度で、他の画像（.bg_img .src1内にあるURLのやつ）に変更可能にしたいです。
html,cssの構造？は背景画像の切り替えができれば変更しても構いません。
→cssのsample以下は透かしの背景色を調整しているので、そのまま機能を残したいです。

・背景画像の表示は
→透かしの下に置く
→1枚の画像で画面サイズにcoverする様に表示（norepeat）
→下にスクロールしても、背景が画像がちゃんと付いてくる（fixed）。

今の問題

追加
・背景画像が灰色になった
・コンテンツ（紫の透かし）が左寄りになり、サイトの1番下まで行かず途切れている。
　　　

・回答のコードを試しましたが、下記の様な状態になっています。
→切り替えの画像がテキストの上に来てしまう。
→背景画像の切り替えは紫の透かしの下で行いたい
→赤信号の様にrepeatせず、後ろの空の画像の様に1枚で画面をcoverできるようにしたい。

html
1</head>
2<body>
3 <div class="bg_img">
4 <div class="sample">
5
6   <div class="hat src1"></div>
7   <div class="hat src2"></div>
8   <div class="hat src3"></div>
9   <div class="hat src4"></div>
10
11  -テキスト・画像
12
13 </div>
14 </div>
15</body>
16

css
1* {
2  padding: 0;
3  margin: 0;
4}
5
6html,
7body {
8  width: 100%;
9  height:300%;
10}
11
12.bg_img {
13  background-image : url("doraemon_background_1.png");
14  background-size: cover;
15  min-height: 100vh;
16  background-attachment: fixed;
17  overflow  : hidden;
18}
19.bg_img .hat{
20  position : absolute;
21  top        : 0;
22  left       : 0;
23  bottom     : 0;
24  right      : 0;
25  opacity    : 0;
26  animation  : bgAnime 40s infinite;
27}
28
29.bg_img  .src1 {
30  background-image : url("doraemon_background_1.png");   /* 背景の画像を指定 */
31}
32.bg_img  .src2 {
33  background-image : url("doraemon_kabegami1.png");   /* 背景の画像を指定 */
34  animation-delay  : 10s;
35}
36.bg_img  .src3 {
37  background-image : url("doraemon_background2.png");   /* 背景の画像を指定 */
38  animation-delay  : 20s;
39}
40.bg_img  .src4 {
41  background-image : url("doraemon_kabegami1.png");   /* 背景の画像を指定 */
42  animation-delay  : 30s;
43}
44@keyframes bgAnime {
45   0% { opacity: 0; }
46   10% { opacity: 1; }
47  25% { opacity: 1; }
48  35% { opacity: 0; }
49 100% { opacity: 0; }
50}
51
52.sample {
53  background-color: rgba(255, 255, 255, 0.5);
54  height: 100%;
55  width: 50%; /* 透かしにする背景色の横の長さはここで調整 */
56  margin: 0 auto;
57  animation: change-bgcolor 60s cubic-bezier(0, 1, 0, 1) infinite;
58}
59
60@keyframes change-bgcolor {
61  25% {
62    background-color: rgba(255, 255, 255, 0.5);
63  }
64  50% {
65    background-color: rgba(255, 0, 0, 0.5);
66  }
67  75% {
68    background-color: rgba(0, 255, 0, 0.5);
69  }
70  100% {
71    background-color: rgba(0, 0, 255, 0.5);
72  }

html
1</head> 以下の全文を念の為に記載します。
2<body>
3
4
5    <script>
6    MQTTconnect();
7    </script>
8    <div class="bg_img">
9    <div class="sample">
10
11　　<div class="hat src1"></div>
12 　 <div class="hat src2"></div>
13  　<div class="hat src3"></div>
14  　<div class="hat src4"></div>
15<h2> タイトル</h2>
16
17    <p>
18    現在の時刻： {{now}}
19    </p> 
20    CloudMQTT 接続 Status： <div id="status">Connection Status: Not Connected</div>
21    <br>
22
23
24    <h2 id="example2">　　</h2>
25    <figure>
26    <p><img id="a_signal" src="写真" WIDTH = "700px" HEIGHTl = "500px"></p>    
27    </figure>
28    <br>
29    <h2 id="example2">　　</h2>
30    <font size = "7" color="#F00">文字</font>
31    <br>
32
33    <p><a href="#example"><font size = "6">↓↓↓文字↓↓↓</font></a></p>
34
35    <p>
36      <div style="margin-bottom:1000px"></div><font size = "6" color="#000"></font>
37    </p>
38
39
40
41
42    <h2 id="example">　　</h2>
43    文字：<p id="messages"></p>
44    <figure>
45    <img id="trafic_signal" src="写真" WIDTH = "700px" HEIGHTl = "500px">
46    </figure>
47    <br>
48
49    <p>
50    <input type="button" value="文字" onclick="clickBtn(&quot;BLUE&quot;)" style="font-size:28px; color:#ffffff;background-color:#4EE27F;WIDTH:350px; HEIGHT:80px;"/>
51    <input type="button" value="文字" onclick="clickBtn(&quot;RED&quot;)" style="font-size:28px; color:#000000;background-color:#FF0000;WIDTH:350px; HEIGHT:80px;"/><br>
52    <input type="button" value="文字" onclick="clickBtn(&quot;YELLOW&quot;)" style="font-size:28px; color:#000000;background-color:#FFFF00;WIDTH:700px; HEIGHT:80px;"/>
53        <p><font size = "6">文字</font></p>
54    <input type="button" value="文字" onclick="clickBtn3(&quot;A&quot;)" style="font-size:24px; color:#ffffff;background-color:#000000;WIDTH:96px; HEIGHT:72px;"/>
55    <input type="button" value="文字" onclick="clickBtn3(&quot;B&quot;)" style="font-size:24px; color:#000000;background-color:#ffffff;WIDTH:96px; HEIGHT:72px;"/>
56    <input type="button" value="文字" onclick="clickBtn3(&quot;C&quot;)" style="font-size:24px; color:#ffffff;background-color:#000000;WIDTH:96px; HEIGHT:72px;"/>
57    <input type="button" value="文字" onclick="clickBtn3(&quot;D&quot;)" style="font-size:24px; color:#000000;background-color:#ffffff;WIDTH:96px; HEIGHT:72px;"/>
58    <input type="button" value="文字" onclick="clickBtn3(&quot;E&quot;)" style="font-size:24px; color:#ffffff;background-color:#000000;WIDTH:96px; HEIGHT:72px;"/>
59    <input type="button" value="文字" onclick="clickBtn3(&quot;F&quot;)" style="font-size:24px; color:#000000;background-color:#ffffff;WIDTH:96px; HEIGHT:72px;"/>
60    </p>
61
62
63    <p>
64      <div style="margin-bottom:2000px"></div>
65    </p>
66
67
68
69
70
71    <figure>
72    <legend> 文字 </legend>
73    <img id="c_signal" src="写真" WIDTH = "700px" HEIGHTl = "500px">
74    </figure>
75    <br>
76    <input type="button" value="文字" onclick="clickBtn(&quot;RED&quot;)" style="font-size:28px; color:#000000;background-color:#FFFF00;WIDTH:700px; HEIGHT:80px;"/>
77
78    <p><a href="#example2"><font size = "6">↑↑↑一番上に戻る↑↑↑</font></a></p>
79    </div>
80    </div>
81

m.ts10806

2019/07/09 02:29 編集

「時間」とはどこでどのように判断される予定ですか？（現在のコードではどの部分で判定しているかというところもお聞きしています）

neison

2019/07/09 02:34

時間はcss上で、秒数で切り替わるようにしたいです。 .be_img .hat{ animation : bgAnime 40s infinite;} .be_img .src1 { animation-delay : 数字s;}

m.ts10806

2019/07/09 02:36

herokuで、とか「{{now}}」という記述があったのでてっきりサーバー側の言語でアクセス時に切り替えるのかと思ってました。朝はこの画像、昼はこの画像、みたいな。 JavaScript使ったほうが良さそうに思います。

m.ts10806

2019/07/09 02:37

その「時間で背景画像を切り替えようとすると上手くいきません。」というのがどういう現象が今のコードで起きているのかにもよるので、質問本文に具体的に記載していただけますか？

neison

2019/07/09 02:52

アドバイスありがとうございます。これはherokuとデバイスを繋いで遊ぶだけなので、短時間で背景画像が変化する方が良いです。

Lhankor_Mhy

2019/07/09 04:27

転記。 > 記載して頂いたコードを試したのですが、上手く表示されません。　　・画像の切り替えが背景ではなく、コンテンツ（文字・文章とその下の背景色）の上に来てしまう。　・背景画像が固定されず、スクロールすると見切れてします。　　　→スクロールすると.bg_img {}内の「background-image : url("doraemon_background_1.png"」が表示されてます。　　　→この固定している背景画像が切り替わる様にしたいです。　・画像の表示が画面一杯ではんく、何度もrepeatされている状態　　→これを1枚の画像を拡大して、画面をcoverする様にしたい。補足願います。・『コンテンツ』とは具体的にはどれですか？ .bg_img .hat や「-テキスト・画像」のことだと考えてよろしいですか？・上記のとおりだとすると、上に来ているのは、.bg_img の背景ではなく、.bg_img .hat のことだと思います。つまり、背景が上に来ているわけではなく、コンテンツの上にコンテンツがかぶっている状態です。・『背景画像が固定されず、スクロールすると見切れてします』『画像の表示が画面一杯ではんく、何度もrepeatされている状態』とのことですが、これも上記と同様、背景画像ではなくコンテンツがスクロールしている、繰り返されているだけだと思います。今一度、完成形についてご検討の上、ご希望の状態をご提示ください。

Lhankor_Mhy

2019/07/09 04:39

質問編集拝読。つまり、.bg_img .hat を「-テキスト・画像」の後ろに置きたい、ということでよろしいでしょうか？

Lhankor_Mhy

2019/07/09 04:45

これはHTML構造を変えてもよろしいですか？そのままだと難しそうな気がしています。

neison

2019/07/09 04:46

現状では「今の問題」で添付した画像の様になっています。コンテンツとは　→紫の背景色より上に表示している、html上に記載している文章や画像のことです。＞・上記のとおりだとすると、上に来ているのは、.bg_img の背景ではなく、.bg_img .hat のことだと　→上に来ているのはbg_imgではなく、.bg_img .src1 の画像ですね。＞今一度、完成形についてご検討の上、ご希望の状態をご提示ください。　→秒数で切り替えたい部分は、.bg_img ｛｝で表示している画像（一番後ろにある青空）で、　　この部分が10秒程度で切り替えたいです。　→今はコンテンツ（紫の透かし）の上に赤信号が乗っている状態なので、　　その下に切り替え画像を表示し、スクロールしても背景がfixedされる状態かつ、　　画面上に赤信号がpc画面のサイズでcoverされるサイズにしたいです。分かりにくくてすいません。

Lhankor_Mhy

2019/07/09 04:52

> 秒数で切り替えたい部分は、.bg_img ｛｝で表示している画像（一番後ろにある青空）で、この部分が10秒程度で切り替えたいです。ということは、.bg_img .hat はアニメーションしなくていい、ということですか？いずれにせよ、HTML構造を変えないと難しそうな気がします。

neison

2019/07/09 04:52

html構造を変えるとはどういう意味でしょうか？　→経験が不足しているので、構造を変更する是非は分かりませんが、　webページが機能すれば問題ないかと思います。

m.ts10806

2019/07/09 04:58

やっつけコードで回答している間に要件が随分と追加に・・・。整理して質問に追記いただけますか？

Lhankor_Mhy

2019/07/09 05:06

> .bg_img ｛｝で表示している画像（一番後ろにある青空）で、この部分が10秒程度で切り替えたいです。切替の画像は、doraemon_kabegami1.png とかですか？もしかして、.bg_img .hat はなくてもいいものですか？

neison

2019/07/09 05:16

青の画像はdoraemon_background_1.png"です。それを.hatにあるurl[doraemon_background2.png doraemon_kabegami1.png]に変更できれば、cssのタグ？（.hat等）は何でも良いです。

行動規範の内容に同意します

回答2件

ベストアンサー

typoです。

css
1.be_img .hat
2  position : absolute;
3  top        : 0;
4  left       : 0;
5  bottom     : 0;
6  right      : 0;
7  opacity    : 0;
8  animation  : bgAnime 40s infinite;
9}
10
11.be_img  .src1 {
12  background-image : url("doraemon_background_1.png");   /* 背景の画像を指定 */
13}
14.be_img  .src2 {
15  background-image : url("doraemon_kabegami1.png");   /* 背景の画像を指定 */
16  animation-delay  : 10s;
17}
18.be_img  .src3 {
19  background-image : url("doraemon_background2.png");   /* 背景の画像を指定 */
20  animation-delay  : 20s;
21}
22.be_img  .src4 {
23  background-image : url("doraemon_kabegami1.png");   /* 背景の画像を指定 */
24  animation-delay  : 30s;
25}

↓

css
1.bg_img .hat{
2  position : absolute;
3  top        : 0;
4  left       : 0;
5  bottom     : 0;
6  right      : 0;
7  opacity    : 0;
8  animation  : bgAnime 40s infinite;
9}
10
11.bg_img  .src1 {
12  background-image : url("doraemon_background_1.png");   /* 背景の画像を指定 */
13}
14.bg_img  .src2 {
15  background-image : url("doraemon_kabegami1.png");   /* 背景の画像を指定 */
16  animation-delay  : 10s;
17}
18.bg_img  .src3 {
19  background-image : url("doraemon_background2.png");   /* 背景の画像を指定 */
20  animation-delay  : 20s;
21}
22.bg_img  .src4 {
23  background-image : url("doraemon_kabegami1.png");   /* 背景の画像を指定 */
24  animation-delay  : 30s;
25}

質問編集にあわせて追記

html
1 <div class="bg_img">
2 <div class="sample">
3
4
5  -テキスト・画像
6
7 </div>
8 </div>

css
1* {
2  padding: 0;
3  margin: 0;
4}
5
6html,
7body {
8  width: 100%;
9  height:300%;
10}
11
12.bg_img {
13  background-image : url("http://placehold.jp/150x150.png?text=doraemon_background_1.png");
14  background-size: cover;
15  min-height: 300%;
16  background-attachment: fixed;
17  overflow  : hidden;
18  animation  : bgAnime 40s infinite;
19}
20
21@keyframes bgAnime {
22   0% { background-image : url("doraemon_background_1.png"); }
23  25% { background-image : url("doraemon_kabegami1.png"); }
24  50% { background-image : url("doraemon_background_2.png"); }
25  75% { background-image : url("doraemon_kabegami1.png"); }
26}
27
28.sample {
29  background-color: rgba(255, 255, 255, 0.5);
30  height: 100%;
31  width: 50%; /* 透かしにする背景色の横の長さはここで調整 */
32  margin: 0 auto;
33  animation: change-bgcolor 60s cubic-bezier(0, 1, 0, 1) infinite;
34}
35
36@keyframes change-bgcolor {
37  25% {
38    background-color: rgba(255, 255, 255, 0.5);
39  }
40  50% {
41    background-color: rgba(255, 0, 0, 0.5);
42  }
43  75% {
44    background-color: rgba(0, 255, 0, 0.5);
45  }
46  100% {
47    background-color: rgba(0, 0, 255, 0.5);
48  }

もしかして、こういうことでしょうか？ .bg_img .hatはいらない……？

投稿2019/07/09 03:02

編集2019/07/09 05:49

Lhankor_Mhy

総合スコア36074

m.ts10806

2019/07/09 03:09

コードハイライトがおかしいなと思ってたらそこでしたか。気づかなかった・・

Lhankor_Mhy

2019/07/09 03:21

そっちより、.be_img → .bg_img の方がなかなか気づけなかったです。でも、これで解決しているのかどうかがよくわからない……????

m.ts10806

2019/07/09 03:22

私も試してないので難ですが・・ JavaScriptでやったほうが柔軟に対応できそうとは思います。

neison

2019/07/09 04:17

ご回答ありがとうございます。記載して頂いたコードを試したのですが、上手く表示されません。　　・画像の切り替えが背景ではなく、コンテンツ（文字・文章とその下の背景色）の上に来てしまう。　・背景画像が固定されず、スクロールすると見切れてします。　　　→スクロールすると.bg_img {}内の「background-image : url("doraemon_background_1.png"」が表示されてます。　　　→この固定している背景画像が切り替わる様にしたいです。　・画像の表示が画面一杯ではんく、何度もrepeatされている状態　　→これを1枚の画像を拡大して、画面をcoverする様にしたい。

Lhankor_Mhy

2019/07/09 05:18

追記しました。

neison

2019/07/09 05:35

頂いたcssをコピペして試しましたが、下記の問題が発生してしまいました。・背景が灰色のまま・中央寄せだった文章や背景色が左寄りに変更された。 htmlの <div class="hat src1"></div> <div class="hat src2"></div>は有無を試しましたが結果は変わらず。

Lhankor_Mhy

2019/07/09 05:37

ああ、画像がプレースホルダのままですね。修正します。

Lhankor_Mhy

2019/07/09 05:50

テストでつけたままの position : absolute; をつけたままでした。これも修正しました。

neison

2019/07/09 06:41

問題なく切り替えできました、ありがとうございます。 2点確認です、・このcssの注意点はありますか？　あと実装する機能として、　　htmlで簡単な動画や音声を導入　　透かし上にテキストを中央揃えにする（恐らくcss使用）・切り替え時に画像がプルプル震えるのは仕様でしょうか？

Lhankor_Mhy

2019/07/09 06:57

> このcssの注意点はありますか？この使い方なら、body の背景にした方がいいかも、などとは思いました。 > 切り替え時に画像がプルプル震えるのは仕様でしょうか？こちらでは確認できませんでしたので、おそらく画像読み込みのラグではないかと思います。プリロードすると解決するかもしれません。 https://teratail.com/questions/185212#reply-275426

neison

2019/07/09 08:15

沢山のアドバイスありがとうございました。震えるのは解決しませんでしたが、そこまで気にする点ではないので仕様と思うことにします。それより目立つ、画像切り替えでファイル名が表示されるバグは background-image : url("http://placehold.jp/150x150.png?text=doraemon_background_1.png"); http~textの部分を消したら解決しました。

行動規範の内容に同意します

やはり、JavaScriptのほうがいいと思います。

適当にサイズと画像入れてやっつけで作ってます。

css
1    .bg_img .sample .hat {
2        display:none;
3        width:500px;
4        height:500px;
5    }

html
1<div class="bg_img">
2    <div class="sample">
3        <div class="hat src1"></div>
4        <div class="hat src2"></div>
5        <div class="hat src3"></div>
6        <div class="hat src4"></div>
7    </div>
8</div>

js
1let src = 0;
2let number = 1;
3$(function() {
4    src = $('.bg_img .sample .hat').length;
5    imageChange();
6    setInterval('imageChange()', 10000 );
7});
8let imageChange = function(){
9    $('.hat').hide();
10    $('.bg_img .sample .hat.src'+number).css('background-image','url("./images/src'+number+'.jpg")');
11    $('.bg_img .sample .hat.src'+number).fadeIn();
12    number++;
13    if(src < number){
14        number = 1;
15    }
16};