Sujet Précédent Sujet Suivant

Div apparante à partir de 3 secondes (?)

Résolu/Fermé
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 11 juin 2015 à 22:37
 Eritou - 14 juin 2015 à 00:23
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

4 réponses

Réponse 1 / 4
Utilisateur anonyme
12 juin 2015 à 00:23
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
0
Réponse 2 / 4
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 12/06/2015 à 16:42
Salut
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.
0
Réponse 3 / 4
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
12 juin 2015 à 19:18
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 
<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.
0
Utilisateur anonyme
13 juin 2015 à 11:02
Aussi tu n'as pas mis le keyframe et la ligne animation comme le conseille animostab et comme je l'ai suggéré. Du coup tu n'as aucune animation au bout de 3s.
0
Eritou
13 juin 2015 à 13:50
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.
0
Réponse 4 / 4
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
13 juin 2015 à 15:07
Salut
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
0
Eritou
13 juin 2015 à 16:33
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 : 
@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.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
13 juin 2015 à 21:41
mince petite erreur !
c'est @keyframes et pas @keyframe (oublie du s)
escuse
0
Eritou
14 juin 2015 à 00:23
GE-NIAL !!! Merci animostab !!! Cette question résolue va me permettre de lancer une seconde question, un second "problème" avec ce même logo, et sur un code (parfait) qui, de mémoire, vient de... animostab (mais je n'en suis pas certain) :)
Bonne soirée !!!
E.
0

Discussions similaires

Annuaire portable gratuit à partir d'un nom
dani26 -
Authority -

9 réponses
Comment trouver un numéro à partir du nom et prénom
papillon -
guyguy -

10 réponses
Trouver un numero de portable a partir d'un nom svp
Hafhoufti -
Babe -

2 réponses
Que signifie cet emoji :3
Moi -
AssassinTourist -

2 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses