ページ切り替え時のアニメーション

備忘録
2023.05.17

前のTopEdenのホームページにて採用していたアニメーション。

元ネタはMOTHER3の戦闘突入。

youtubeより拝借。0:53から0:56までの切り替えアニメーション。

アニメーションを作るとしたら、Javascriptのcanvasか？と思い、試すも動きが悪い。

あれこれ試すと以下の結果がベターかなという結論。

ソースコード↓。

 <!-- loading -->

  <table id="top_loading">
    <tr>
        <td id="box5" class="box"></td>
        <td id="box5" class="box"></td>
        <td id="box5" class="box"></td>
        <td id="box5" class="box"></td>
        <td id="box5" class="box"></td>
        <td id="box5" class="box"></td>
        <td id="box5" class="box"></td>
        <td id="box5" class="box"></td>
        <td id="box5" class="box"></td>
        <td id="box5" class="box"></td>
    </tr>
    <tr>
      <td id="box5" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box5" class="box"></td>
    </tr>
    <tr>
      <td id="box5" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box5" class="box"></td>
    </tr>
    <tr>
      <td id="box5" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box2" class="box"></td>
      <td id="box2" class="box"></td>
      <td id="box2" class="box"></td>
      <td id="box2" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box5" class="box"></td>
    </tr>
    <tr>
      <td id="box5" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box2" class="box"></td>
      <td id="box1" class="box"></td>
      <td id="box1" class="box"></td>
      <td id="box2" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box5" class="box"></td>
    </tr>
    <tr>
      <td id="box5" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box2" class="box"></td>
      <td id="box1" class="box"></td>
      <td id="box1" class="box"></td>
      <td id="box2" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box5" class="box"></td>
    </tr>
    <tr>
      <td id="box5" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box2" class="box"></td>
      <td id="box2" class="box"></td>
      <td id="box2" class="box"></td>
      <td id="box2" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box5" class="box"></td>
    </tr>
    <tr>
      <td id="box5" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box3" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box5" class="box"></td>
    </tr>
    <tr>
      <td id="box5" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box4" class="box"></td>
      <td id="box5" class="box"></td>
    </tr>
    <tr>
      <td id="box5" class="box"></td>
      <td id="box5" class="box"></td>
      <td id="box5" class="box"></td>
      <td id="box5" class="box"></td>
      <td id="box5" class="box"></td>
      <td id="box5" class="box"></td>
      <td id="box5" class="box"></td>
      <td id="box5" class="box"></td>
      <td id="box5" class="box"></td>
      <td id="box5" class="box"></td>
    </tr>
  </table>

  <!-- content -->

  <div id="home_wrapper">

  </div>
@charset "utf-8";

/* loading */

table {
    width: 100%;
    height: 100%;
    min-height: 100vh;
}

.box {
    width: 10%;
    height: 10%;    
    background: #87cefa;
}

#box1 {
    animation:0.5s linear rotation3;
}

#box2 {
    animation:0.7s linear rotation3;
}

#box3 {
    animation:0.9s linear rotation3;
}

#box4 {
    animation:1.1s linear rotation3;
}

#box5 {
    animation:1.3s linear rotation3;
}

@keyframes rotation3 {
    0%{ transform:rotateY(0); }
    100%{ transform:rotateY(180deg); }
}


//読み込んだ時の処理

window.addEventListener('load', function(){
    const value = true;
    
    document.getElementById("home_wrapper").style.display = "none";

    function slideshow_timer(){
        //ローディングを消す
        document.getElementById("top_loading").style.display = "none";
        //topを再表示
        document.getElementById("home_wrapper").style.display = "block";
    }
    
    setInterval(slideshow_timer, 1500);
});

HTMLのテーブルを利用して、放射線状にテーブルデータをCSSで動かす。

Javascriptで切り替え。

これが一番楽かな。

あとはテーブルデータを動かすタイミングを調整してやれば、それっぽいのが出来ると思う。

コンテンツを裏読みさせるなら話はまた別だけど。