18041 sujets

Questions générales et questions de débutants

Page d'accueil -

Bonjour,

Je préviens je suis novice! (je voudrais éviter Javascript mais bon si il faut )

Alors:

Il y a un son (6s) quand on arrive sur le site. Je voudrais que lors de la lecture unique l'écran soit blanc. Puis que, sans fondu ou autre, la page d'accueil s'affiche.

J'ai essayé:

.element {
width: 100%;
height: 100%;
animation: pulse 6s;
}

@keyframes pulse {

0% {
background-color:rgb(0, 0, 255);
}
50%{
background-color:rgb(0, 0, 255) ;

100% {
background-color: rgb(0, 0, 255);
}
}

Ce serait ça mais au premier plan.
z-index ça aurait trop simple...
et puis c un background...
Bref j'arrive pas à choper la logique ou ... je sais pas...

Merci pour votre aide !
Sans javascript avec une animation sur z-index : pour que cela fonctionne il faut que à l'état initial le container "element" soit en arrière plan car quand l'animation est terminée "element" reprend sa valeur de z-index initiale...


<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #element {
                width: 100%;
                height: 100%;
                position: fixed;
                background-color: white;
                z-index: -1;
                animation: pulse 6s;
            }           

            @keyframes pulse {

                0% {
                    z-index:99; 
                }
                100% {
                    z-index:99;
                }
            }
            
            html {
                height: 100%;
            }

            body {
                margin: 0;
                width: 100%;
                height: 100%;
            }

        </style>
    </head>
    <body>
        <div id='element'></div>
        TEST ANIMATION SUR Z-INDEX

    </body>
</html>


Bonne soirée
Bonjour,

Plutôt que de jouer sur z-index, je serais plus favorable à jouer sur l'opacité.

@keyframes show {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
html { /* html ou body en sélecteur, peu importe */
  opacity: 0;
  animation: show .1s linear 6s forwards;
}


Toutefois une chose me gêne. En effet, faire reposer l'affichage de la page sur une animation oblige à considérer que si l'animation n'est pas supportée par le navigateur, la page reste invisible aux yeux de l'internaute.

Je pense qu'il serait judicieux de prévoir un fallback avec un brin de JS qui teste si la propriété animation est bien prise en charge par le navigateur. Si tel n'est pas le cas, on repasse l'opacité à 1.

Là où ça se complique, c'est si l'utilisateur a une ancienne version de son navigateur et qu'il a désactivé JS. Je dois avouer qu'à l'instant rien ne me vient à l'esprit.
Greg_Lumiere a écrit :

Là où ça se complique, c'est si l'utilisateur a une ancienne version de son navigateur et qu'il a désactivé JS. Je dois avouer qu'à l'instant rien ne me vient à l'esprit.


Pour pallier à ce cas de figure, ceci reste possible si le contenu est inséré dans un conteneur. Sur le coup j'avais pensé à la balise <main> mais celle-ci est inconnue des anciens navigateurs.

Finalement, j'ai l'impression que cette solution prenne en compte une très large rétro-compatibilité.

Par défaut le contenu est masqué par une opacité à zéro. L'animation est retardée de 6 secondes et bascule l'opacité de zéro à un rendant le contenu visible en 0.1s. Pour un effet de fondu, il suffit de rallonger cette durée.

Si la propriété animation n'est pas reconnue, JS appose une classe supplémentaire qui ne contient que opacity: 1;

Si JS est désactivé, c'est la balise <noscript> qui s'occupe d'afficher un message à l'utilisateur l'invitant à l'activer. Edit: En css il ne faut pas oublier d'ajouter noscript {opacity: 1;}.

Néanmoins, il reste un défaut à cette méthode. Il s'agit du cas où l'utilisateur utilise un navigateur qui supporte la propriété animation mais qui a désactivé le JS. Celui-ci se retrouve avec l'affichage disgracieux du contenu de la balise <noscript>.


Ce qui me gêne dans tout ça est que le contenu principal est masqué par défaut ce qui ne me semble pas être une pratique recommandable. On pourrait bien sûr prendre le problème à l'envers en utilisant JS pour apposer une classe qui lancerait l'animation. Mais nous risquerions de constater un clipping dans l'affichage du contenu. Celui-ci risquerait de s'afficher, de disparaître pour réapparaître six secondes plus tard.
On pourrait penser que placer le JS dans l'en-tête endiguerait le phénomène mais personnellement je préfère largement reléguer le chargement du JS en bas de page plutôt que dans l'en-tête sauf cas d'extrême nécessité. A se demander si cet effet en fait partie. A vous de voir.
Modifié par Greg_Lumiere (02 Jun 2017 - 10:56)
Sujet clos
Aller à