Div apparante à partir de 3 secondes (?)
Résolu
Eritou
Messages postés
120
Statut
Membre
-
Eritou -
Eritou -
Bonsoir à tous,
J'ai en page lead-première <div> de mon site internet, une video fullscreen. J'y ai rajouté un logo.svg. Malheureusement, vu la rapidité à laquelle se met le SVG à s'afficher/se raffraichir, la video apparait qq secondes après le logo. La seule solution que je vois, est de retarder l'apparition de la div logo.
Quelqu'un aurait-il une idée de comment donner un délai d'affichage à une div dans ce cas ? De simples CSS supplémentaires ? Le logo doit apparaître seulement après la diffusion de la vidéo (petit rappel ;).
Merci pour votre aide,
Eritou
J'ai en page lead-première <div> de mon site internet, une video fullscreen. J'y ai rajouté un logo.svg. Malheureusement, vu la rapidité à laquelle se met le SVG à s'afficher/se raffraichir, la video apparait qq secondes après le logo. La seule solution que je vois, est de retarder l'apparition de la div logo.
Quelqu'un aurait-il une idée de comment donner un délai d'affichage à une div dans ce cas ? De simples CSS supplémentaires ? Le logo doit apparaître seulement après la diffusion de la vidéo (petit rappel ;).
Merci pour votre aide,
Eritou
4 réponses
Avec une animation css par exemple ça devrais fonctionner, enfin si le temps est toujours le même, car si tu attend à un moment de ta video, là c'est du js
Salut
ex de code css
Evidemment tu peux rajouter les préfix vendeurs
pour du crossbrowser (ie 9 / 8 etc) utilise du js ou jquery
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
ex de code css
@keyframe logoAp {
0% {opacity:0;}
99% {opacity:0;}
100% {opacity:1;}
}
#divlogo {
animation: logoAp 3s 1;
}
Evidemment tu peux rajouter les préfix vendeurs
pour du crossbrowser (ie 9 / 8 etc) utilise du js ou jquery
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Bonsoir ZeNairolf et animostab,
Malheureusement le code CSS (et ses préfix vendeurs) ne fonctionnent pas dans mon cas. Un extrait de mon code vous aiderait peut-être à comprendre mon soucis ?
HTML
CSS
Merci pour vos réponses et votre aide,
Bon week-end,
E.
Malheureusement le code CSS (et ses préfix vendeurs) ne fonctionnent pas dans mon cas. Un extrait de mon code vous aiderait peut-être à comprendre mon soucis ?
HTML
<div id="header">
<div class="logo"><a href="#section-un"><img src="img/logo.svg" alt="" width="50px" class="logo animClass"/></a>
</div>
<div id="video"></div>
CSS
.logo {
width: 200px;
padding: 0;
position: relative;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
height: auto;
top: 0px;
right: 0px;
bottom: auto;
left: auto;
margin-bottom: auto;
margin-left: auto;
}
.logo:hover{
width: 200px;
filter: alpha(opacity=50);
opacity: 0.15;
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
transform: scale(2.5);
top: 0px;
right: 0px;
position: relative;
}
.animClass {
backface-visibility: hidden;
margin-right: 0px;
right: 0px;
position: relative;
top: 0px;
left: auto;
bottom: auto;
float: right;
margin-top: 0px;
}
Merci pour vos réponses et votre aide,
Bon week-end,
E.
Bonjour Zenairorolf,
Si, j'ai bien mis le keyframe ainsi que la ligne animation (et ses préfix vendeurs). Plusieurs tentatives dans des classes ainsi que (pour voir) sur #header. J'ai même mis 20s à animation: logoAp mais le logo s'affiche toujours dès l'ouverture du site. Le code envoyé hier est celui d'origine.
Merci pour votre aide et bon week-end.
E.
Si, j'ai bien mis le keyframe ainsi que la ligne animation (et ses préfix vendeurs). Plusieurs tentatives dans des classes ainsi que (pour voir) sur #header. J'ai même mis 20s à animation: logoAp mais le logo s'affiche toujours dès l'ouverture du site. Le code envoyé hier est celui d'origine.
Merci pour votre aide et bon week-end.
E.
Salut
fais cela (marche uniquement pour les nav acceptant css animation)
https://caniuse.com/css-animation
je n'ai pas mis les prefix vendeurs a toi de rajouter pour @keyframe et animation
fais cela (marche uniquement pour les nav acceptant css animation)
https://caniuse.com/css-animation
@keyframe logoAp {
0% {opacity:0;}
99% {opacity:0;}
100% {opacity:1;}
}
.logo {
width: 200px;
padding: 0;
position: relative;
height: auto;
margin: auto;
animation: logoAp 3s 1;
}
je n'ai pas mis les prefix vendeurs a toi de rajouter pour @keyframe et animation
Bonjour animostab et encore merci,
Dans mon cas l'animation ne fonctionne pas, même en respectant scrupuleusement ton code (copié>collé de la classe logo). Le keyframe se met bien juste avant ?
J'ai par la suite tenté d'adapter ton code à ma classe logo, cela donne ceci :
Je ne comprends pas :(
Merci pour ton aide et bon week-end,
E.
Dans mon cas l'animation ne fonctionne pas, même en respectant scrupuleusement ton code (copié>collé de la classe logo). Le keyframe se met bien juste avant ?
J'ai par la suite tenté d'adapter ton code à ma classe logo, cela donne ceci :
@keyframe logoAp {
0% {opacity:0;}
99% {opacity:0;}
100% {opacity:1;}
}
.logo {
width: 200px;
padding: 0;
position: relative;
-webkit-animation: logoAp 3s 1;
-moz-animation: logoAp 3s 1;
-ms-animation: logoAp 3s 1;
-o-animation: logoAp 3s 1;
animation: logoAp 3s 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
height: auto;
top: 0px;
right: 0px;
bottom: auto;
left: auto;
margin-bottom: auto;
margin-left: auto;
display: block;
}
Je ne comprends pas :(
Merci pour ton aide et bon week-end,
E.