5568 sujets

Sémantique web et HTML

Fade Transitions sur Prealoader

Décrivez ici votre problème ou ce que vous cherchez à faire.
Bonjour à tous, je suis actuellement en train de construire mon site et j'aimerais qu'un preloader apparaisse comme sur ce site www.octagon.com . J'ai réussi partiellement et avec beaucoup d'erreurs je le crains... Je cherche à mettre en place des transitions entre l'apparition de mon logo, la phrase suivante puis enfin l'apparition de mon site. J'ai essayé d'intégré des transitions dans le css mais rien n'y fait. J'ai essayé dans le javascript mais je maîtrise très mal cette partie, je ne réussi à rien faire. De plus j'aimerais centré mon logo mais je ne comprends pas pourquoi, cela refuse de se faire... Je suis bien désespérée, aurez-vous des astuces pour moi ? Merci à vous ! 

<html>
  <head>
    <style>
      /* Preloader styles */
      #preloader {
          height: 100vh;
          width: 100vw;
          display: table-cell;
          vertical-align: middle;
          padding: 15vw;
          z-index: 9999;
          background-color: #000000;

      }

      /* logo styles */
      #logo {
        /*width: 50px;
        height: 50px;
        position: absolute;
        left: 50%;
        top: 50%;
        background-image: url(http://starterz.org/wp-content/uploads/2022/12/cropped-LOGO-ICONE-COULEUR.png);
        background-repeat: no-repeat;
        background-position: center;*/
      }

      /* sentence styles */
      #sentence {
          color: #fff;
          font-family:'Barlow';
          text-transform:uppercase;
          font-size: 2em;
          text-align: center;

      }

    </style>
  </head>
  <body>
    <div id="preloader">
      <div id="logo"><img src="http://starterz.org/wp-content/uploads/2022/12/cropped-LOGO-ICONE-COULEUR.png"></div>
      <div id="sentence"></div>
    </div>

    <script>
      // Show logo for 2 seconds
      setTimeout(function() {
        document.getElementById("logo").style.display = "none";
        document.getElementById("sentence").innerHTML = "La Communication au service de la Performance";

      }, 2000);

      // Show site content after 4 seconds
      setTimeout(function() {
        document.getElementById("preloader").style.display = "none";
      }, 4000);
});

    </script>
  </body>
</html>
Pour le centrage voir une des méthodes ici :
https://www.alsacreations.com/article/lire/539-Centrer
Je commencerais par un margin: auto

Pour les transitions renseigne toi sur @keyframes (avec opacity) et animation.
Je ne pense pas que tu ais besoin de JS.
Si tu utilises opacity sans enlever complètement l'élément à la fin tu auras besoin de le rendre transparent au clic avec pointer-events: none
Prévenir un modérateur
Répondre au sujet
Aller à