質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.61%

cssアニメーションをjsで切り替える方法

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,057

kittycut

score 9

現在、ページの背景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のアニメーションが再生されればと思います。

 現在のコード

  <body>
    <div class="page page002">
 <div class="bg">
  <ul><span>image01</span><div class="a"/></ul>
  <ul><span>image02</span><div class="b"/></ul>
  <ul><span>image03</span><div class="c"/></ul>
  <ul><span>image04</span><div class="d"/></ul>
</div>
      <p>
        <span id="word1">Hello</span><span id="word2">World</span>
      </p>
    </div>    
  </body>
.bg ul span {
    color: transparent;
    width: 1024px;
    height: 768px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: cover;
    background-repeat: none;
    opacity: 0;
    z-index: auto;
    animation: imageAnimation 11000ms linear infinite 0ms;
}

.bg ul:nth-child(1) span {
    background-image: url(../images/page/imageA.jpg)
}
.bg ul:nth-child(2) span {
    background-image: url(../images/page/imageB.jpg);
    animation-delay: 880ms;
}
.bg ul:nth-child(3) span {
    background-image: url(../images/page/imageC.jpg);
    animation-delay: 3500ms;
}
.bg ul:nth-child(4) span {
    background-image: url(../images/page/imageD.jpg);
    animation-delay: 6000ms;
}
.bg ul:nth-child(5) span {
    background-image: url(../images/page/imageA.jpg);
    animation-delay: 7800ms;
}//4枚だとスタートに戻る時に表示がおかしくなってしまったため、5枚にしています

@-webkit-keyframes imageAnimation {
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; }
    8%{opacity: 1; -webkit-animation-timing-function: ease-out; }
    25% {opacity: 1}
    35% {opacity: 0}
    100% {opacity: 0}
}
.no-cssanimations .bg ul span{
    opacity: 1;
}
.a{
  position: absolute; 
  width: 1024px;
  height: 768px;
  top: 0;
  left: 0; 
  z-index: 3;
  overflow: hidden;
  background-image: url('../images/page/imagea.png');
  animation: a_anim 11000ms linear infinite; 
}

@-webkit-keyframes a_anim {
    0% {background-position: 0px 0px;opacity: 1}
    0.001% { background-position:0px 0px;opacity: 1}
    9.5%{background-position: 0px 1024px;opacity: 1}
    10% {background-position: 0px 1024px;opacity: 0}

    10% {;opacity:0}
    100% { -webkit-transform: translate(0px, 0px);opacity: 0 }
}//こんな感じのアニメーションがb・c・dとあります。bは全体の1040%で再生、cが4070%、dが残りです。

 補足情報

コードの動作確認はsafariとchromeでおこなっています。
最終的にはepubファイルになる予定です。
jQueryライブラリは現在使っていませんが、必要であれば使用いたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/02/02 13:16

    現時点のコードでどこまで実現出来ているか、どう問題に感じているかも追記願います。

    キャンセル

  • m.ts10806

    2018/02/02 13:17

    ああ、js自体未着手なんですね。なるほど。了解です。

    キャンセル

  • kittycut

    2018/02/02 13:25

    はい、jsは何もしてないです。クリックイベントを使うのかなと思っていました。実現できている点として、背景は切り替わり、a、bなどのアニメも動いています。

    キャンセル

回答 1

checkベストアンサー

+1

epubに詳しくないので、epubでlabelやinputが扱えるかはわかりませんが、Webブラウザの環境であれば、labelからinputのチェックを操作できるようにすると、アニメーションを切り替えられます。

こちらに例を用意しました。
https://codepen.io/anon/pen/EQVBxR

<div class="bg">
  <input type="radio" name="bg" id="toggle_A" checked>
  <div id="bg_A"></div>
  <input type="radio" name="bg" id="toggle_B">
  <div id="bg_B"></div>
  <input type="radio" name="bg" id="toggle_C">
  <div id="bg_C"></div>
  <input type="radio" name="bg" id="toggle_D">
  <div id="bg_D"></div>
</div>
<div>
  <label for="toggle_A">A</label>
  <label for="toggle_B">B</label>
  <label for="toggle_C">C</label>
  <label for="toggle_D">D</label>
</div>
/* .bgの中のinputの次にあるdiv */
.bg>input+div {
  display: none;
}

/* .bgの中のチェックされたinputの次にあるdiv */
.bg>input:checked+div {
  display: block;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/13 10:59

    たびたび、本当にありがとうございます。
    実装させていただいたところ、フェードがつくようになりました!

    1点、切り替え後のアニメーションについて、
    2のボタンを押すと、切り替わり、次に4の背景が出てきます。
    同じく、3を押すと次に2の背景が出てきます(1と4のボタンに関しては、まさしく理想的な動きをしています、ありがとうございます)。
    2のボタンのあとは3の背景、3のボタンのあとは4の背景…という風にしたいのですが、この挙動については、どうしようもない箇所なのでしょうか。
    どうしようもないのであれば、フェードは諦めようかなと思っています。

    こちらが最後の質問になると思います。
    よろしくお願いします。

    キャンセル

  • 2018/02/13 12:00

    parseIntを忘れていたため、文字列の足し算になっていました。
    "0" → 右に1を足して "01" → 4で割った余りは 1 → 1(2番目)が表示される
    "1" → 右に1を足して "11" → 4で割った余りは 3 → 3(4番目)が表示される
    "2" → 右に1を足して "21" → 4で割った余りは 1 → 1(2番目)が表示される
    "3" → 右に1を足して "31" → 4で割った余りは 3 → 3(4番目)が表示される
    修正したので、いまは期待する動きになっているはずです。
    https://codepen.io/hoo-chan/pen/VQpxoq
    https://codepen.io/hoo-chan/pen/GQWdwL
    それぞれ、function setup()の中のtoggleElement.addEventListenerの中が変わっています。

    キャンセル

  • 2018/02/13 15:49

    hooさん、ご回答ありがとうございました!
    最後にいただいた例にて、思い描いていたことが全て実現いたしました!
    全体を通し、大変勉強になりました。

    途中で時間が空いたにも関わらず
    ここまでお付き合いいただき(色々と例を作っていただき)まして、ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る