การบ้าน Position ตี้ (Copy 12597) (Copy 12709)

✨ VORAWEE WIRAWAN

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Kwan 13</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="icon" href="https://preview.redd.it/7robxvzmbqj51.png?width=512&format=png&auto=webp&s=72a52a9bf203213780be697c1ca733a04f7a404f" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai+Looped:wght@500&display=swap" rel="stylesheet">
  </head>
  <style>
    .content{
      display: block;
      max-width: 2000px;
      width: 100%;
    }
    body {
      overflow: hidden;
      margin: 0;
      max-width: 2000px;
      width: 100%;
      display: inline-block;
      position: relative;
    }
    ::selection{
      color: pink;
    }
    #main{
      transition:background 0.2s;
      height: 970px;
      width: 1920px;
      background-size: cover;
    }
    #main[data-test="1"]{
      background-image: url("https://cdn.discordapp.com/attachments/932854377918631987/941671489739046983/1.png");
      background-position: center;
      background-repeat: no-repeat;
      animation: faded 2s;
    }
    #main[data-test="-1"] {
      background-image: url("https://media.discordapp.net/attachments/932854377918631987/941671490347225158/2.png?width=1340&height=670");
      background-position: center;
      background-repeat : no-repeat;
      animation: faded 2s;
    }
    #main[data-test="1"] #alien{
      opacity: 0;
    }
    #main[data-test="-1"] #alien{
      opacity: 0;
      animation: faded 2s linear;
      animation-delay: calc(var(--i)*1s);
      animation-fill-mode: forwards;
    }
    .pkwan img {
      width:30%;
      height: 40%;
      position: absolute;
      top: 54%;
      right: 36%;
      z-index: 1000;
      animation: kwan 0.5s linear;
    }
    @keyframes kwan{
      from{
        top: -20%;
      }
      to{
        top: 54%;
      }
    }
    .four-arm{
      --i: 5;
    }
    .four-arm img {
      width: 20%;
      height: 30%;
      position: absolute;
      top: 45%;
      right: 52%;
      max-width: 450px;
      max-height: 450px;
      animation: fourarmmove 3s linear infinite alternate;
      filter: drop-shadow(10px 10px 16px rgb(231, 13, 24));
    }
    @keyframes fourarmmove{
      0% { transform: translate(1px, 1px) rotate(0deg) scale(1); }
      10% { transform: translate(-1px, -2px) rotate(-1deg)  ;}
      20% { transform: translate(-3px, 0px) rotate(1deg) scale(1.05); }
      30% { transform: translate(3px, 2px) rotate(0deg) ; }
      40% { transform: translate(1px, -1px) rotate(1deg) scale(1.1); }
      50% { transform: translate(-1px, 2px) rotate(-1deg) ; }
      60% { transform: translate(-3px, 1px) rotate(0deg) scale(1.15); }
      70% { transform: translate(3px, 1px) rotate(-1deg) ; }
      80% { transform: translate(-1px, -1px) rotate(1deg) scale(1.2); }
      90% { transform: translate(1px, 2px) rotate(0deg) ; }
      100% { transform: translate(1px, -2px) rotate(-1deg) scale(1.25); }
      }
    .diamondH{
      --i: 5.5;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 50%;
      right: 45%;
    }
    .diamondH img {
      max-width: 300px;
      max-height: 300px;
      animation: diamondHmove 5s ease-in-out infinite alternate;
      filter:drop-shadow(10px 10px 16px rgb(43, 231, 137));
      perspective: 100px;
    }
    @keyframes diamondHmove{
      0%{transform:skewY(0deg) rotate(0)}
      20%{transform:skewY(5deg) rotate(10deg)}
      40%{transform:skewY(0deg) rotate(0deg)}
      60%{transform:skewY(5deg) rotate(-20deg)}
      80%{transform:skewY(0deg) rotate(0deg)}
      100%{transform:skewY(10deg) rotate(10deg)}
    }
    .heatblast{
      --i: 6;
      width: 2%;
      height: 2%;
      position: absolute;
      top: 55%;
      left: 17%;
    }
    .heatblast img {
      max-width: 350px;
      max-height: 350px;
      animation: heatblasttt 1.5s linear infinite alternate;
      transform-style: preserve-3d;
    }
    @keyframes heatblasttt{
      0% {filter: drop-shadow(0 0 0rem gold); transform: translate(0px, 0px) rotatey(0deg) rotatez(0deg);}
      20% {transform: translate(2px, 2px) rotatey(20deg) rotatez(10deg);}
      50% {transform: translate(3px, 4px) rotatey(25deg) rotatez(10deg);}
      60% {transform: translate(2px, 2px) rotatey(10deg) rotatez(20deg);}
      100% {filter: drop-shadow(0 0 2rem gold); transform: translate(0px, 0px) rotatey(0deg) rotatez(0deg);}
    }
    .humang{
      --i: 1.5;
    }
    .humang img{
      position: absolute;
      top: 61%;
      right: 80%;
      max-width: 300px;
      max-height: 300px;
      animation: humang .5s infinite linear alternate;
    }
    @keyframes humang{
      0%{
        transform: translate(5px, 3px);
      }
      20%{
        transform: translate(0px, -6px);
      }
      40%{
        transform: translate(-7px, -2px);
      }
      60%{
        transform: translate(-3px, 5px);
      }
      80%{
        transform: translate(2px, -3px);
      }
      100%{
        transform: translate(5px, 2px);
      }
    }
    .XLR8{
      --i: 2.5;
      position: absolute;
      top: 20%;
      right: 30%;
    } 
    .XLR8 img {
      max-width: 250px;
      max-height: 250px;
      animation: XLR9 1s infinite;/**/
    }
    @keyframes XLR9{
      0% {
        transform: translate(0px, 0px); 
        filter: drop-shadow(0 0 0rem hsl(215, 100%, 60%));}
      17% {
        transform: translate(150px, 0px); 
        filter: drop-shadow(0 0 5rem hsl(215, 100%, 60%));}
      34% {
        transform: translate(0px, 0px); 
        filter: drop-shadow(0 0 0rem hsl(215, 100%, 60%));}
      50% {
        transform: translate(0px, -150px); 
        filter: drop-shadow(0 0 5rem hsl(215, 100%, 60%));}
      67% {
        transform: translate(0px, 0px); 
        filter: drop-shadow(0 0 0rem hsl(215, 100%, 60%));}
      84% {
        transform: translate(-150px, 0px); 
        filter: drop-shadow(0 0 5rem hsl(215, 100%, 60%));}
      100% {
        transform: translate(0px, 0px); 
        filter: drop-shadow(0 0 0rem hsl(215, 100%, 60%));}
    }
    .upgrade{
      --i: 2;
      width: auto;
      height: 120px;
      position: absolute;
      top: 19%;
      right: 52%;
    }
    .upgrade img {
      max-width: 320px;
      max-height: 320px;
      animation: upgrade 5s infinite linear alternate;
    }
    @keyframes upgrade{
      0%{
        transform: scale(1.0, 1.0) translate(0px, 0px);
      }
      100%{
        transform: scale(1.41, 1.41) translate(0px, -80px);
      }
    }
    .void{
      --i: 3.5;
      top: 23%;
      right: 68%;
      position: absolute;
    }
    .void img {
      max-width: 350px;
      max-height: 350px;
      animation: void 12s linear infinite;
    }
    @keyframes void {
      0%{
        transform: translate(-50vw)
      }
      20% {
        transform: translatex(0vw) rotate(0deg);
      }
      40%{
        transform: translatex(0vw);
      }
      60%{
        transform: translatex(0vw) rotate(360deg);
      }
      100%{
        transform: translatex(80vw);
      }
    }
    .cheesefly{
      --i: 3;
      position: absolute;
      top: 19%;
      right: 73%;
    }
    .cheesefly img {
      max-width: 300px;
      max-height: 300px;
      animation: cheesefly 1s 3s linear infinite alternate;
    }
    @keyframes cheesefly{
      from{transform: scale(1.0, 1.0) skew(0deg,0deg) rotate(0deg);}
      to{transform: scale(1.1, 1.2) skew(5deg,5deg) rotate(10deg);}
    }
    .conductoid{
      --i: 1;
      width: 20%;
      height: 40%;
      position: absolute;
      top: 15%;
      right: 39%;
    }
    .conductoid img {
      max-width: 500px;
      max-height: 500px;
      animation: conductoid 5s linear infinite, conductoid2 1.25s linear infinite alternate;
    }
    @keyframes conductoid{
      0%{
        transform: rotate(0deg) scale(0.8, 0.8);
      }
      25%{
        transform: rotate(25deg) scale(1.0, 1.0);
      }
      50%{
        transform: rotate(0deg) scale(0.8, 0.8);
      }
      75%{
        transform: rotate(-25deg) scale(1.0, 1.0);
      }
      100%{
        transform: rotate(0deg) scale(0.8, 0.8);
      }
    }
    @keyframes conductoid2{
      from{
        filter: drop-shadow(0 0 0rem crimson);
      }
      to{
        filter: drop-shadow(0 0 2rem crimson);
      }
    }
    .echo{
      --i: 4.5;
      width: 20%;
      height: 30%;
      position: absolute;
      top: 35%;
      right: 15%;
    }
    .echo img {
      max-width: 230px;
      max-height: 230px;
      animation: echoM 1s 5s linear infinite alternate;
    }
    @keyframes echoM{
      from{transform: scale(1.0, 1.0) rotate(0deg);}
      to{transform: scale(.9, .9) rotate(15deg);}
    }
    .greymatter{
      --i: 4;
      position: absolute;
      top: 30%;
      right: 63%;
    }
    .greymatter img {
      max-width: 150px;
      max-height: 150px;
      animation: greymatter 8s infinite linear alternate;
    }
    @keyframes greymatter{
      from{
        transform: scale(1.0, 1.0);
      }
      to{
        transform: scale(0.4, 0.4);
      }
    }
    .warpnest{
      --i: 6.5;
      position: absolute;
      top: 10%;
      right: 60%;
    }
    .warpnest img {
      max-width: 200px;
      max-height: 200px;
      animation: warpnest 9s infinite linear alternate, warpnest2 3.7s infinite linear;
    }
    @keyframes warpnest{
      0% {transform: translate(0px, 0px);}
      25% {transform: translate(100px, -100px);}
      50% {transform: translate(-100px, -100px);}
      75% {transform: translate(-300px, -50px);}
      100% {transform: translate(0px, 0px);}
    }
    @keyframes warpnest2{
      0%{opacity: 1;}
      50%{opacity: 0.123456789}
      100%{opacity: 1;}
    }
    .waybig{
      --i: 0.5;
      top: 10%;
      right: 5%;
      position: absolute;
    }
    .waybig img {
      max-width: 700px;
      max-height: 700px;
      animation: waybig 5s infinite alternate linear;
    }
    @keyframes waybig{
      0% {
        transform: scale(1.0, 1.0);
      }
      100%{
        transform: scale(2.0, 2.0);
      }
    }
    @keyframes faded {
      from{opacity: 0;}
      to{opacity: 1;}
    }
    #omnitrix-green{
      left: 0;
      top: 0;
      position: absolute;
      cursor: pointer;
      width: 18em;
      height: 18em;
      display: inline-block;
      transition: transform 0.1s, filter 0.1s;
      background-image: url("https://cdn.discordapp.com/attachments/932854377918631987/941717802769850418/omnitrix-png-8-Transparent-Images-removebg-preview.png");
      background-size: 100% 100%;
      z-index: 4;
    }
    #omnitrix-green:hover{ /* เปลี่ยนเป็น gif เมื่อเอาเม้าส์ชี้ */
      left: 2px;
      top: -7px;
      width: 18.45em;
      height: 18.45em;
      display: inline-block;
      background-image: url("https://cdn.discordapp.com/attachments/522865682015191050/941953253032226856/da1hl4k-a8f1dfa4-930a-415c-bbc-unscreen.gif");
      transform: scale(1.2, 1.2);
      filter: drop-shadow(0 0 1rem lightgreen);
    }
    #omnitrix-green:active{
      transform: scale(1.0, 1.0); /* เวลาคลิกจะย่อลงตอนแรกเอาเม้าส์ชี้แล้วมันขยายเป็น (1.2, 1.2) */
    }
    #txt-toggle{
      left: 0px;
      bottom: -260px;
      position: relative;
      display: inline-block;
      text-align: center;
      font-family: 'IBM Plex Sans Thai Looped', sans-serif;
      font-size: 35px;
      width: 300px;
      height: 100px;
      text-shadow: 1px 1px black;
    }
    #omnitrix-red{
      cursor: pointer;
      left: 0px;
      top: 0px;
      position: absolute;
      transition: transform 0.1s, filter 0.1s;
      width: 18em;
      height: 18em;
      z-index: -5;
    }
    #omnitrix-red:hover{
      left: 0px;
      top: 0px;
      width: 18em;
      height: 18em;
      display: inline-block;
      transform: scale(1.2, 1.2);
      filter: drop-shadow(0 0 2rem crimson);
    }
    #omnitrix-red:active{ 
      transform: scale(1.0, 1.0); /* เวลาคลิกจะย่อลงตอนแรกเอาเม้าส์ชี้แล้วมันขยายเป็น (1.2, 1.2) */
    }
    #txt-click{
      font-family: 'IBM Plex Sans Thai Looped', sans-serif;
      top: 100px;
      text-shadow: 1px 1px black;
      font-size: 50px;
      position: absolute;
      width: 555px;
      text-align: right;
      animation:text 1s infinite linear alternate;
    }
    @keyframes text{ /* กดซะสิขยับ */
      from{
        transform: translate(10px, 10px);
      }
      to{
        transform: translate(30px, 10px);
      }
    }
  </style>
  <body>
    <div class="content">
      <div id="main" data-test="1">
        <div class="pkwan">
          <img class="pkwan" src="https://cdn.discordapp.com/attachments/941664147341459496/941678515022098502/10_.png" alt="">
        </div>
        <div id="alien" class="four-arm">
          <img src="https://cdn.discordapp.com/attachments/932854377918631987/941696413056778310/10_.png" alt="">
        </div>
        <div id="alien" class="diamondH">
          <img src="https://cdn.discordapp.com/attachments/932854377918631987/941696412641546271/10_.png" alt="">
        </div>
        <div id="alien" class="heatblast">
          <img src="https://cdn.discordapp.com/attachments/932854377918631987/941696412855443496/10_.png" alt="">
        </div>
        <div id="alien" class="humang">
          <img src="https://cdn.discordapp.com/attachments/932854377918631987/941714852467056680/10_.png" alt="">
        </div>
        <div id="alien" class="XLR8">
          <img src="https://cdn.discordapp.com/attachments/932854377918631987/941696411844640808/10_.png" alt="">
        </div>
        <div id="alien" class="upgrade">
          <img src="https://cdn.discordapp.com/attachments/932854377918631987/941696519738896434/1212.png" alt="">
        </div>
        <div id="alien" class="void">
          <img src="https://cdn.discordapp.com/attachments/932854377918631987/941696411488120842/10_.png" alt="">
        </div>
        <div id="alien" class="cheesefly">
          <img src="https://media.discordapp.net/attachments/941674905672507452/941674935380762664/75810b8388d3e35f.png" alt="">
        </div>
        <div id="alien" class="conductoid">
          <img src="https://cdn.discordapp.com/attachments/932854377918631987/941716165191946280/10_.png" alt="">
        </div>
        <div id="alien" class="echo">
          <img src="https://cdn.discordapp.com/attachments/932854377918631987/941716164835434516/10_.png" alt="">
        </div> 
        <div id="alien" class="greymatter">
          <img src="https://cdn.discordapp.com/attachments/932854377918631987/941716164533424188/10_.png" alt="">
        </div> 
        <div id="alien" class="warpnest">
          <img src="https://cdn.discordapp.com/attachments/932854377918631987/941718082177630228/10_.png" alt="">
        </div> 
        <div id="alien" class="waybig">
          <img src="https://media.discordapp.net/attachments/915716400788676668/941822334006874142/31D077E4-B5A4-44F6-8C37-D6FB0342533D.png?width=326&height=670" alt="">
        </div>
        <div id="button" onclick="main.dataset.test *= -1; omnitrix()"> 
          <div id="omnitrix-green"></div> 
          <img id="omnitrix-red"src="https://cdn.discordapp.com/attachments/932854377918631987/942039429697122314/omnitrix-red.png">
        </div>
        <div id="txt-toggle" style="color: hsl(120, 50%, 50%);">ได้เวลาฮีโร่</div>
        <div id="txt-click" style="color: hsl(120, 50%, 50%);">&#x2190 กดซะสิ</div>
      </div>
    </div>
  <audio autoplay="autoplay" loop id="soundtrack"> 
    <source src="https://cdn.discordapp.com/attachments/386705410335309826/941676078416691200/Let_the_Living_Beware.mp3">
  </audio>
  <script>
    var audio = document.getElementById("soundtrack"); //ตัวแปร audio ซึ่งเรียกใช้การเข้าถึง id soundtrack ที่เป็น id ของเพลงพื้นหลัง
    audio.volume = 0.58756749; //ปรับระดับเสียงๆ
    // อันข้างล่างคือเปลี่ยนเมื่อกด
    var a = 0; //ตัวแปร
    function omnitrix(){
      var audio = document.getElementById("soundtrack"); //ตัวแปรของ เปลี่ยนเพลง
      var color = document.getElementById("txt-toggle"); //ตัวแปรของ เปลี่ยนสีข้อความข้างล่างomnitrix
      var txt = document.getElementById("txt-toggle"); //ตัวแปลของ ข้อความเปลี่ยนจาก "ได้เวลาฮีโร่" เปลี่ยนเป็น "เวลาหมดซะแล้ว"
      var omnired = document.getElementById("omnitrix-red"); //ตัวแปร omnitrixสีแดง
      var omnigreen = document.getElementById("omnitrix-green"); //ตัวแปร omnitrix สีเขียว
      var txt2 = document.getElementById("txt-click"); //ตัวแปรของข้อความ "กดซะสิ"
      if (a==1){
        audio.src = "https://cdn.discordapp.com/attachments/386705410335309826/941676078416691200/Let_the_Living_Beware.mp3"; //เพลงเริ่มต้น
        color.style = "color: hsl(120, 50%, 50%)"; //สีข้อความข้างล่างสีเขียว
        txt.innerHTML = "ได้เวลาฮีโร่"; //ข้อความข้างล่างปุ่ม
        omnired.style.zIndex = "-1"; //ซ่อนปุ่ม omnitrix แดงไว้ข้างหลังก่อน
        omnigreen.style.zIndex = "4"; //ให้ปุ่ม omnitrix เขียวอยู่หน้าสุด
        txt2.style.visibility = "visible"; //เพื่อให้ข้อความ "กดซะสิ" แสดง
        a = 2; //เปลี่ยนค่าตัวแปรเป็น2จะได้เข้าเงื่อนไข else เวลากดปุ่ม
      }
      else{
        audio.src = "https://cdn.discordapp.com/attachments/932854377918631987/941716708656283678/benten_intro.mp3"; //เปลี่ยนเป็นเพลงเบนเทน
        color.style = "color: hsl(0, 50%, 50%)"; //เปลี่ยนสีข้อความข้างล่างเป็นสีแดง
        txt.innerHTML = "อ๋าเวลาหมดซะแล้ว"; //เปลี่ยนข้อความข้างล่าง
        omnired.style.zIndex = "5"; //เอา omnitrix แดงมาไว้ข้างหน้า
        omnigreen.style.zIndex = "-1"; //เอา omnitrix เขียวไปซ่อนไว้ข้างหลัง
        txt2.style.visibility = "hidden"; //ซ่อนข้อความ "กดซะสิ"
        a = 1; //เปลี่ยนค่าตัวแปรเป็น1จะได้เข้าเงื่อนไข if เวลากดปุ่ม
      }
    }
  </script>
  </body>
</html>