Html - Problem with spin in synchronization not appearing with loading background image

muratta231
March 15, 2024
156 views
0 votes
2 Answers

function hideLoadingAnimation() {
  console.log("Yükleme animasyonu gizleniyor, ana içerik gösteriliyor");
  var loadingAnimation = document.getElementById("loading-animation");
  var mainContent = document.getElementById("main-content");
  loadingAnimation.style.display = "none";
  mainContent.style.display = "block";
}
window.onload = function() {
  console.log("Sayfa tamamen yüklendi");
  hideLoadingAnimation();
};

#main-content {
  display: none;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
  background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%);
  animation: shine 4s linear infinite;
  color: white;
  font-family: "Lato";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 15px;
  text-align: center;
  overflow-x: hidden;
}

.card {
  float: left;
  position: relative;
  width: calc(33.33% - 30px + 9.999px);
  height: 340px;
  margin: 0 30px 30px 0;
  perspective: 1000;
}

.card:first-child .card__front {
  background: #5271C2;
}

.card__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card:first-child .card__num {
  text-shadow: 1px 1px rgba(52, 78, 147, 0.8)
}

.card:nth-child(2) .card__front {
  background: #35a541;
}

.card:nth-child(2) .card__num {
  text-shadow: 1px 1px rgba(34, 107, 42, 0.8);
}

.card:nth-child(3) {
  margin-right: 0;
}

.card:nth-child(3) .card__front {
  background: #bdb235;
}

.card:nth-child(3) .card__num {
  text-shadow: 1px 1px rgba(129, 122, 36, 0.8);
}

.card:nth-child(4) .card__front {
  background: #db6623;
}

.card:nth-child(4) .card__num {
  text-shadow: 1px 1px rgba(153, 71, 24, 0.8);
}

.card:nth-child(5) .card__front {
  background: #3e5eb3;
}

.card:nth-child(5) .card__num {
  text-shadow: 1px 1px rgba(42, 64, 122, 0.8);
}

.card:nth-child(6) .card__front {
  background: #aa9e5c;
}

.card:nth-child(6) .card__num {
  text-shadow: 1px 1px rgba(122, 113, 64, 0.8);
}

.card:last-child {
  margin-right: 0;
}

.card__flipper {
  cursor: pointer;
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  border: 3.5px solid rgba(255, 215, 0, 0.6);
  /* Altın sarısı rengi ve parıltılı efekt */
  background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5));
  /* Arkaplan gradienti */
}

.card__front,
.card__back {
  position: absolute;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 340px;
}

.card__front {
  transform: rotateY(0);
  z-index: 2;
  overflow: hidden;
}

.card__back {
  transform: rotateY(180deg) scale(1.1);
  background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934);
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.card__back span {
  font-weight: bold;
  /* Metni kalın yap */
  color: white;
  /* Beyaz renk */
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card__name {
  font-size: 32px;
  line-height: 0.9;
  font-weight: 700;
}

.card__name span {
  font-size: 14px;
}

.card__num {
  font-size: 100px;
  margin: 0 8px 0 0;
  font-weight: 700;
}

@media (max-width: 700px) {
  .card__num {
    font-size: 70px;
  }
}

@media (max-width: 700px) {
  .card {
    width: 100%;
    height: 290px;
    margin-right: 0;
    float: none;
  }
  .card .card__front,
  .card .card__back {
    height: 290px;
    overflow: hidden;
  }
}


/* Demo */

main {
  text-align: center;
}

main h1,
main p {
  margin: 0 0 12px 0;
}

main h1 {
  margin-top: 12px;
  font-weight: 300;
}

.fa-github {
  color: white;
  font-size: 50px;
  margin-top: 8px;
  /* Yukarıdaki boşluğu ayarlayın */
}

.tm-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Eğer dikey merkezleme de istiyorsanız */
  /* Diğer gerekli stil tanımlamaları */
}

.tm-letter {
  display: inline-block;
  font-size: 30px;
  margin: 0 5px;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(0);
  animation: letter-animation 6s ease-in-out infinite;
}

@keyframes letter-animation {
  0%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
  10%,
  40%,
  60%,
  90% {
    opacity: 1;
    transform: translateY(-10px);
  }
  20%,
  80% {
    opacity: 1;
    transform: translateY(0);
  }
}

#m-letter {
  animation-delay: 1.5s;
}

a {
  position: relative;
  display: inline-block;
  padding: 0px;
}

a::before {
  content: '';
  position: absolute;
  top: 50%;
  /* Orta konumu */
  left: 50%;
  /* Orta konumu */
  transform: translate(-50%, -50%);
  /* Merkezden düzgün bir şekilde ayarlamak için */
  width: 50px;
  height: 45px;
  border-radius: 50%;
  /* Eğer bir daire şeklinde efekt isteniyorsa */
  box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8);
  /* Buradaki piksel değerlerini gölgenin yayılımını kontrol etmek için ayarlayabilirsiniz */
  filter: blur(4px) brightness(1.5);
  /* Parlaklık filtresi eklendi */
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: -1;
}

a:hover::before {
  opacity: 1;
}

body.hoverEffect {
  background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a);
}

#gameCard {
  width: 300px;
  height: 450px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 0 50px 10px #FFD700, /* Altın sarısı glow */
  0 0 100px 20px #0000FF, /* Mavi glow */
  0 0 150px 30px #000033;
  /* Koyu mavi shadow */
  background: rgba(0, 0, 0, 0.7);
  /* Slightly transparent black to make the ambilight effect visible behind the card */
  color: #FFD700;
  /* Altın sarısı text */
  text-align: center;
  border: 3px solid #FFD700;
  /* Altın sarısı border */
}

#gameCardLink span {
  font-size: 18px;
  margin-right: 5px;
  /* Harf aralarına 10 piksel boşluk ekler */
  font-weight: bold;
  /* Metni kalın yapar */
}

#gameCardLink span:last-child {
  font-size: 0.79em;
  /* ® simgesini küçült */
  vertical-align: super;
  /* ® simgesini yukarı taşı */
  opacity: 0.9;
  font-weight: bold;
  /* Metni kalın yapar */
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  /* Siyah gölge ekler */
}

#loading-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://www.hdwallpapers.in/download/black_hole-1920x1080.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loader {
  border-top: 9px solid #00a2ed;
  border-radius: 80%;
  width: 18vw;
  /* Genişliği viewport'un %25'i yapar */
  height: 18vw;
  /* Yüksekliği de viewport'un %25'i yapar */
  animation: spin 2s linear infinite;
  /* Burada spin animasyonunu kullanıyoruz */
  position: absolute;
  /* Pozisyonu mutlaka absolute olarak ayarlamalısınız. */
  left: 41%;
  /* X ekseninde ortalamak için sayfanın yarısı kadar sola kaydırın. */
  top: 38%;
  /* Y ekseninde ortalamak için sayfanın yarısı kadar yukarı kaydırın. */
  transform: translate(-50%, -50%) rotate(0deg);
  /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <title>Game Cards App</title>
    <link rel="icon" type="image/png" href="https://cdn1.iconfinder.com/data/icons/entertainment-events-hobbies/24/card-game-cards-hold-512.png">
  </head>

  <body>

    <div id="loading-animation">
      <div class="loader"></div>
    </div>

    <div id="main-content">

      <div class="tm-container">
        <div class="tm-letter" id="t-letter">T</div>
        <div class="tm-letter" id="m-letter">M</div>
      </div>


      <audio id="flipSound" preload="auto">
  <source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav">
</audio>



      <main>
        <div id="gameCardLink">
          <span>G</span>
          <span>a</span>
          <span>m</span>
          <span>e</span>
          <span> </span>
          <!-- Boşluk eklemek için span ekledik -->
          <span> </span>
          <span>C</span>
          <span> </span>
          <span>a</span>
          <span> </span>
          <span>r</span>
          <span> </span>
          <span>d</span>
          <span> </span>
          <span>s</span>
          <span>®</span>
          <!-- Registered trademark simgesi için span -->
        </div>
        <p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p>
      </main>


      <ul>
        <li class="card">
          <div class="card__flipper">
            <div class="card__front">
              <img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman">
              <p class="card__name"><span>Marvel</span><br>Spiderman</p>
              <p class="card__num">1</p>
            </div>


            <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen></iframe>


            <div class="card__back">
              <svg height="180" width="180">
        <circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35"  />
        <!-- Dış dairenin kenarı (yeşil) -->
         <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
              <span>1.89 Bil. $</span>
            </div>
          </div>
        </li>


        <li class="card">
          <div class="card__flipper">
            <div class="card__front">
              <img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman">
              <p class="card__name"><span>DC</span><br>Batman</p>
              <p class="card__num">2</p>
            </div>

            <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen></iframe>


            <div class="card__back">
              <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/>
 <!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
              <span>771 Mil. $</span>
            </div>
          </div>
        </li>

        <li class="card">
          <div class="card__flipper">
            <div class="card__front">
              <img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3">
              <p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p>
              <p class="card__num">3</p>
            </div>
            <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen></iframe>


            <div class="card__back">
              <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
              <span>845.4 Mil. $</span>
            </div>
          </div>
        </li>


        <li class="card">
          <div class="card__flipper">
            <div class="card__front">
              <img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam">
              <p class="card__name"><span>DC</span><br>Shazam2</p>
              <p class="card__num">4</p>
            </div>
            <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen></iframe>



            <div class="card__back">
              <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
              <span>462.5 Mil. $</span>
            </div>
          </div>
        </li>

        <li class="card">
          <div class="card__flipper">
            <div class="card__front">
              <img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash">
              <p class="card__name"><span>DC</span><br>Flash</p>
              <p class="card__num">5</p>
            </div>
            <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen></iframe>



            <div class="card__back">
              <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/>
 <!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
              <span>560.2 Mil. $</span>
            </div>
          </div>
        </li>

        <li class="card">
          <div class="card__flipper">
            <div class="card__front">
              <img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2">
              <p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p>
              <p class="card__num">6</p>
            </div>
            <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen></iframe>


            <div class="card__back">
              <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/>
 <!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
              <span>955.8 Mil. $</span>
            </div>
          </div>
        </li>
      </ul>

    </div>

  </body>

  </html>

The link icluding full code: https://drive.google.com/file/d/1wOhvYSmlcsi5r8m4vosOMFw8Ik2ZoWsW/view?usp=sharing

Hello friends, while the page is loading, I normally expect the spin and background space-themed image to appear on the screen at the same time, but first the green background of the page that will be seen when it loads, then the spin and then the loading screen wallpaper. Is it because I downloaded the wallpaper with background-image in the loading-animation section of the style section, so I can’t make them appear at the same time? But how will I ensure it?

The second thing I don’t understand is I block the main-content in the style at startup, how does the background green theme color appear at startup? My expectation is that only the loading screen, wallpaper and spin will appear.

Answers

- adampweb
- March 15, 2024 at 4:04 pm
- 0 votes
0
One potential solution to your problem is to convert the background image to Base64 code and insert it into your CSS code.

You can use a lot of tools for conversion, in the most cases I used this online tool.

Usage:
1. Download the image file.
2. Upload it on this site
3. In the Encoding section you can see the results. Click on copy css button.
4. Insert this in your CSS file in the following format: background-image: <copied-code>. The result looks like this background-image: url('data:image/png;base64,<a-very-long-hexadecimal-string>')
Login or Signup to reply.

- Salketer
- March 15, 2024 at 4:06 pm
- 0 votes
0
The reason you see the loading image taking time to appear is simply because it needs to load.

The image is not that big, roughly 200Ko but the service providing the image is slow. On my office fiber, it takes one second to load. I suggest you try to compress it a bit more using webp, this could save you some. I’d also serve it from the same domain as your website, instead of a different one. Reason is that currently a connection needs to be open just for this asset, while it could use an already open connection that is used for other assets.

Also, it seems that the other images in the body are loading before your loader image. This again slows down when the loader starts downloading. I suggest you leverage the lazy loading mechanics as much as possible: https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

Also, if you wanted to make sure the image is loaded ultra fast, you can incorporate its data directly in the html. You can get a Data URL that would be put in the src attribute, that URL contains all the image’s details directly so it won’t need to download. Actually, it WILL have to download but it will be in the HTML so the HTML size will be way bigger, longer to download but the image will be ready to display. See this image to get the data URL of the image in your developer drawer:

IMO, you are attacking it by the wrong angle. You are trying it add a loading animation to make the user wait while the website loads, but the website loads so fast that the loading animation is the one slowing it down. I’d really suggest removing it and optimizing the first draw instead.

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Problem with spin in synchronization not appearing with loading background image

Answers