Q&A
現時点のコードでどこまで実現出来ているか、どう問題に感じているかも追記願います。
現在、ページの背景A・B・C・Dの4枚の画像をcssのanimationプロパティで入れ替えています。
また、その上に、a・b・c・dの異なるアニメーションをそれぞれのタイミング（Aの時にaが再生）でのせています（この部分も、もし自動的に連動させる方法があれば教えていただきたいです）。
アニメーションはループします。
具体的にしたいこと
・「Hello」という文字をクリックすると、ページ背景はAになり、かつ、aのアニメーションが再生される
・再生後は、b、c、d・・・とアニメーションが続く。
・「World」という文字をクリックすると、ページ背景はBになり、かつ、bのアニメーションが再生される
・再生後は、c、d、a・・・とアニメーションが続く。
・CとDも同じく、特定の文字をクリックすると、C背景＆cのアニメーション・D背景＆dのアニメーションが再生されればと思います。
現在のコード
html
1 <body> 2 <div class="page page002"> 3 <div class="bg"> 4 <ul><span>image01</span><div class="a"/></ul> 5 <ul><span>image02</span><div class="b"/></ul> 6 <ul><span>image03</span><div class="c"/></ul> 7 <ul><span>image04</span><div class="d"/></ul> 8</div> 9 <p> 10 <span id="word1">Hello</span><span id="word2">World</span> 11 </p> 12 </div> 13 </body>
css
1.bg ul span { 2 color: transparent; 3 width: 1024px; 4 height: 768px; 5 position: absolute; 6 top: 0px; 7 left: 0px; 8 background-size: cover; 9 background-repeat: none; 10 opacity: 0; 11 z-index: auto; 12 animation: imageAnimation 11000ms linear infinite 0ms; 13} 14 15.bg ul:nth-child(1) span { 16 background-image: url(../images/page/imageA.jpg) 17} 18.bg ul:nth-child(2) span { 19 background-image: url(../images/page/imageB.jpg); 20 animation-delay: 880ms; 21} 22.bg ul:nth-child(3) span { 23 background-image: url(../images/page/imageC.jpg); 24 animation-delay: 3500ms; 25} 26.bg ul:nth-child(4) span { 27 background-image: url(../images/page/imageD.jpg); 28 animation-delay: 6000ms; 29} 30.bg ul:nth-child(5) span { 31 background-image: url(../images/page/imageA.jpg); 32 animation-delay: 7800ms; 33}//4枚だとスタートに戻る時に表示がおかしくなってしまったため、5枚にしています 34 35@-webkit-keyframes imageAnimation { 36 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 37 8%{opacity: 1; -webkit-animation-timing-function: ease-out; } 38 25% {opacity: 1} 39 35% {opacity: 0} 40 100% {opacity: 0} 41} 42.no-cssanimations .bg ul span{ 43 opacity: 1; 44} 45.a{ 46 position: absolute; 47 width: 1024px; 48 height: 768px; 49 top: 0; 50 left: 0; 51 z-index: 3; 52 overflow: hidden; 53 background-image: url('../images/page/imagea.png'); 54 animation: a_anim 11000ms linear infinite; 55} 56 57@-webkit-keyframes a_anim { 58 0% {background-position: 0px 0px;opacity: 1} 59 0.001% { background-position:0px 0px;opacity: 1} 60 9.5%{background-position: 0px 1024px;opacity: 1} 61 10% {background-position: 0px 1024px;opacity: 0} 62 63 10% {;opacity:0} 64 100% { -webkit-transform: translate(0px, 0px);opacity: 0 } 65}//こんな感じのアニメーションがb・c・dとあります。bは全体の10〜40％で再生、cが40〜70％、dが残りです。
補足情報
コードの動作確認はsafariとchromeでおこなっています。
最終的にはepubファイルになる予定です。
jQueryライブラリは現在使っていませんが、必要であれば使用いたします。
ああ、js自体未着手なんですね。なるほど。了解です。
はい、jsは何もしてないです。クリックイベントを使うのかなと思っていました。実現できている点として、背景は切り替わり、a、bなどのアニメも動いています。
回答1件
0
ベストアンサー
epubに詳しくないので、epubでlabelやinputが扱えるかはわかりませんが、Webブラウザの環境であれば、labelからinputのチェックを操作できるようにすると、アニメーションを切り替えられます。
こちらに例を用意しました。
https://codepen.io/anon/pen/EQVBxR
html
1<div class="bg"> 2 <input type="radio" name="bg" id="toggle_A" checked> 3 <div id="bg_A"></div> 4 <input type="radio" name="bg" id="toggle_B"> 5 <div id="bg_B"></div> 6 <input type="radio" name="bg" id="toggle_C"> 7 <div id="bg_C"></div> 8 <input type="radio" name="bg" id="toggle_D"> 9 <div id="bg_D"></div> 10</div> 11<div> 12 <label for="toggle_A">A</label> 13 <label for="toggle_B">B</label> 14 <label for="toggle_C">C</label> 15 <label for="toggle_D">D</label> 16</div>
css
1/* .bgの中のinputの次にあるdiv */ 2.bg>input+div { 3 display: none; 4} 5 6/* .bgの中のチェックされたinputの次にあるdiv */ 7.bg>input:checked+div { 8 display: block; 9}
投稿2018/02/02 04:52
編集2018/02/02 04:56
退会済みユーザー
総合スコア0
hooさん、ご回答ありがとうございます。
例まで作っていただいて助かります。
実際に試させてもらいました。文字をクリックすると変わるようになりました。
追加で恐縮ですが、
いただいた例について、A→B→C→Dの順に自動的に切り替わるようにする方法も教えていただけないでしょうか。
クリックした時に変わるけど何もしなくても画面は順次変わっていく、ということをしたいです。
また、ページに移った後のアニメーションですが、画像を動かしています。
記載の仕方は下記のようにしてみたのですが、上手くうごきません。
@keyframes A {{background-image: url('../images/page/imageA.png')}
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
私の記載方法がおかしいのでしょうか。
いただいた例だと、背景画像自体にopacityなどのアニメーションが適用されるのですが、本来背景は切り替わるだけで、imageAという画像にopacityなどのアニメーションをつけさせたいです。
なお、画像はA、B、C、Dの全てのアニメーションで違う画像です。
時間経過の切り替えとユーザー操作の切り替えをしようとすると JavaScript を使う方が簡単ですね。
https://codepen.io/anon/pen/zRvgoO
こんな感じでしょうか。
JavaScript で attribute の値を変えつつ、CSS で div[data-XXX=YYY] のセレクタを使ってスタイルを書けば、大体のことはできるのではないかと思います。
ありがとうございます。
まさに、いただいた例のようなものを作りたいと思っています。
こちらの環境で、いただいたリンクと同じものを再現しようとしました。
背景の切り替えや幽霊さんの動きは再現できたのですが、数字は押しても何も起こりません（いただいたリンク先のサイトでは数字を押すとちゃんと切り替わります…）。ChromeとSafariで同じ現象でした。
コードをコピペしているのですが、やり方に問題があるのでしょうか⁇
エラーコード？として下記のようなものがでます。
uncaught reference error toggle is not difined at HTMLSpanElement.onclick
土日で作業ストップしますが、来週からも検証は続けたいと思います。
もし原因など既知でしたら教えていただけると助かります。
スクリプトの入れ方がまずかったのかもしれませんね。
とりあえず、onclick をやめて、全部 HTML の中に入れてみました。
https://codepen.io/anon/pen/rJxWzj
返信が大変遅くなり、すみません！
今、スクリプト変更していただいた例の通りにすると動きました！
感動です、ありがとうございます。
またまた追加で恐縮なのですが、
背景がパッパッと切り替わるのではなく、フェードで切り替わるようにすることは可能でしょうか？
background-imageを切り替えるとどうしてもパッパッとした切り替わりになってしまうので、フェードインさせたい場合は背景ごとに要素を用意してつけたり消したりして紙芝居のようにするといいと思います。
例えば↓
https://codepen.io/hoo-chan/pen/VQpxoq
背景にもアニメーションをつけられますね↓
https://codepen.io/hoo-chan/pen/GQWdwL
たびたび、本当にありがとうございます。
実装させていただいたところ、フェードがつくようになりました！
1点、切り替え後のアニメーションについて、
2のボタンを押すと、切り替わり、次に4の背景が出てきます。
同じく、3を押すと次に2の背景が出てきます（1と4のボタンに関しては、まさしく理想的な動きをしています、ありがとうございます）。
2のボタンのあとは3の背景、3のボタンのあとは4の背景…という風にしたいのですが、この挙動については、どうしようもない箇所なのでしょうか。
どうしようもないのであれば、フェードは諦めようかなと思っています。
こちらが最後の質問になると思います。
よろしくお願いします。
parseIntを忘れていたため、文字列の足し算になっていました。
"0" → 右に1を足して "01" → 4で割った余りは 1 → 1（２番目）が表示される
"1" → 右に1を足して "11" → 4で割った余りは 3 → 3（４番目）が表示される
"2" → 右に1を足して "21" → 4で割った余りは 1 → 1（２番目）が表示される
"3" → 右に1を足して "31" → 4で割った余りは 3 → 3（４番目）が表示される
修正したので、いまは期待する動きになっているはずです。
https://codepen.io/hoo-chan/pen/VQpxoq
https://codepen.io/hoo-chan/pen/GQWdwL
それぞれ、function setup()の中のtoggleElement.addEventListenerの中が変わっています。
hooさん、ご回答ありがとうございました！
最後にいただいた例にて、思い描いていたことが全て実現いたしました！
全体を通し、大変勉強になりました。
途中で時間が空いたにも関わらず
ここまでお付き合いいただき（色々と例を作っていただき）まして、ありがとうございました。
あなたの回答
tips
プレビュー
