見出し画像

スターウォーズのやつ

Yuki Tatemukai 
<!DOCTYPE html class="my-2 rounded-full h-10 w-[16rem] px-4">
<html lang="jp">
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
   <link
     rel="stylesheet"
     type="text/css"
     href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css"
   />

   <title>Star wars CSS Animation</title>
 </head>

 <style>
   /* Animation properties */

   .star {
     animation: star 10s ease-out infinite;
   }

   .wars {
     animation: wars 10s ease-out infinite;
   }

   .byline span {
     animation: spin-letters 10s linear infinite;
   }

   .byline {
     animation: move-byline 10s linear infinite;
   }
   /* Keyframes */

   @keyframes star {
     0% {
       opacity: 0;
       transform: scale(1.5) translateY(-0.75em);
     }
     20% {
       opacity: 1;
     }
     89% {
       opacity: 1;
       transform: scale(1);
     }
     100% {
       opacity: 0;
       transform: translateZ(-1000em);
     }
   }

   @keyframes wars {
     0% {
       opacity: 0;
       transform: scale(1.5) translateY(0.5em);
     }
     20% {
       opacity: 1;
     }
     90% {
       opacity: 1;
       transform: scale(1);
     }
     100% {
       opacity: 0;
       transform: translateZ(-1000em);
     }
   }

   @keyframes spin-letters {
     0%,
     10% {
       opacity: 0;
       transform: rotateY(90deg);
     }
     30% {
       opacity: 1;
     }
     70%,
     86% {
       transform: rotateY(0);
       opacity: 1;
     }
     95%,
     100% {
       opacity: 0;
     }
   }

   @keyframes move-byline {
     0% {
       transform: translateZ(5em);
     }
     100% {
       transform: translateZ(0);
     }
   }
   /* Make the 3D work on the container */

   .starwars-demo {
     perspective: 800px;
     transform-style: preserve3d;
   }
   /* General styles and layout */

   body {
     background: #000  url(../スターウォーズ/images/bg.jpeg);
   }

   .starwars-demo {
     height: 17em;
     left: 50%;
     position: absolute;
     top: 53%;
     transform: translate(-50%, -50%);
     width: 34em;
   }

   .byline span {
     display: inline-block;
   }

   img {
     width: 100%;
   }

   .star,
   .wars,
   .byline {
     position: absolute;
   }

   .star {
     top: -0.75em;
   }

   .wars {
     bottom: -0.5em;
   }

   .byline {
     color: #fff ;
     font-family: "ITC Serif Gothic", Lato;
     font-size: 2.25em;
     left: -2em;
     letter-spacing: 0.4em;
     right: -2em;
     text-align: center;
     text-transform: uppercase;
     top: 29%;
   }
   /*** Media queries for adjusting to different screen sizes ***/

   @media only screen and (max-width: 600px) {
     .starwars-demo {
       font-size: 10px;
     }
   }

   @media only screen and (max-width: 480px) {
     .starwars-demo {
       font-size: 7px;
     }
   }
 </style>

 <body>
   <div class="starwars-demo">
     <img src="./images/star.svg" alt="Star" class="star" />
     <img src="./images/wars.svg" alt="Wars" class="wars" />
     <h2 class="byline" id="byline">The Force Awakens</h2>
   </div>

   <script>
     var byline = document.getElementById("byline"); // Find the H2
     bylineText = byline.innerHTML; // Get the content of the H2
     bylineArr = bylineText.split(""); // Split content into array
     byline.innerHTML = ""; // Empty current content

     var span; // Create variables to create elements
     var letter;

     for (i = 0; i < bylineArr.length; i++) {
       // Loop for every letter
       span = document.createElement("span"); // Create a <span> element
       letter = document.createTextNode(bylineArr[i]); // Create the letter
       if (bylineArr[i] == " ") {
         // If the letter is a space...
         byline.appendChild(letter); // ...Add the space without a span
       } else {
         span.appendChild(letter); // Add the letter to the span
         byline.appendChild(span); // Add the span to the h2
       }
     }
   </script>
 </body>
</html>

この記事が気に入ったらサポートをしてみませんか？