18041 sujets

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

Bannières animées en HTML/CSS

Pages :
Bonjour à tous,

Je viens tout juste de m'inscrire et j'espère que vous pourrez m'éclairer Smiley smile

J'ai déjà de bonnes bases en intégration HTML/CSS. Mais aujourd'hui, je souhaite me mettre à l'animation de bannières en HTML/CSS. J'ai cherché quelques heures sur Internet, et malheureusement je ne trouve aucune source d'informations pour apprendre cela. Ni tuto, ni livre, rien du tout...

Alors j'ai pu voir qu'il existait des logiciels. Certains utilisent Google Web Designer, d'autre Edge...mais j'aimerais pour ma part pouvoir réaliser les animations manuellement de A à Z.

J'ai aussi lu qu'on pouvait à priori réaliser des bannières animées en se passant de javascript. Si c'est bien vrai, ça me semble mieux pour le poids des bannières.

Bref, voilà j'aimerai bien me lancer dans l'animation de bannières mais je ne trouve rien pour bien démarrer.

Alors si vous avez des liens, tutos, bouquins à me conseiller je suis preneur Smiley smile

Merci d'avance !

Seb
Bonjour à toi,

PilouPilou a écrit :

Je viens tout juste de m'inscrire et j'espère que vous pourrez m'éclairer Smiley smile
Je relève le défi Smiley lol

PilouPilou a écrit :
J'ai déjà de bonnes bases en intégration HTML/CSS. Mais aujourd'hui, je souhaite me mettre à l'animation de bannières en HTML/CSS. J'ai cherché quelques heures sur Internet, et malheureusement je ne trouve aucune source d'informations pour apprendre cela. Ni tuto, ni livre, rien du tout...
Quand on est perdu: une seule adresse :-P

PilouPilou a écrit :
Alors j'ai pu voir qu'il existait des logiciels. Certains utilisent Google Web Designer
Un Wysiwyg ???
PilouPilou a écrit :
d'autre Edge
Un navigateur internet ???
Smiley sweatdrop

PilouPilou a écrit :
mais j'aimerais pour ma part pouvoir réaliser les animations manuellement de A à Z.
C'est ce point qu'il faudrait développer. En effet que souhaites-tu réellement animer car les solutions qui permettent de donner vie à des éléments statiques peuvent-être multiple.


Nageant dans le flou, voici quelques pistes :

* de l'utilisation du format GIF qui permettra l'animation d'images statiques pour un poids ridiculement faible. En ce cas se tourner vers les Gif makers

* de l'utilisation d'un format vidéo qui augmentera considérablement le poids mais qui seront bien plus qualitatifs. Auquel cas se tourner vers un logiciel d'édition vidéo.

* animer des éléments Html est tout à fait possible en, je te cite, se passant de JavaScript. Pour cela il existe les propriétés Animation en Css. Animations + transitions + contenu généré = méga-power !

D'où ma question, que cherches-tu à aminer l'ani ? Smiley langue
Merci pour ta réponse ! Qui d'autre que "Greg_lumiere" pour "m'éclairer" Smiley smile

Je cherche à animation des choses simples, des mouvements de texte, d'images, de boutons, des animations de transition...et tout ça optimisé pour des bannières. Je me demandais justement s'il existait des animations optimisées pour les bannières ou si une animation CSS ça reste une animation CSS, que ce soit pour un site ou pour une bannière, c'est la même chose.

Je m'oriente plus vers de l'animation CSS plutôt que du gif ou de la vidéo.
PilouPilou a écrit :
Merci pour ta réponse ! Qui d'autre que "Greg_lumiere" pour "m'éclairer" Smiley smile
Jack Lantern Smiley lol

PilouPilou a écrit :
Je cherche à animation des choses simples, des mouvements de texte, d'images, de boutons, des animations de transition...et tout ça optimisé pour des bannières.
Alors dans ce cas, oui, je prescris une bose dose d'animation en pure Css (JS pourra être intégré a posteriori pour sublimer le projet).

PilouPilou a écrit :
Je me demandais justement s'il existait des animations optimisées pour les bannières ou si une animation CSS ça reste une animation CSS
Ce passage m'est fort obscur ou mon cerveau n'est pas adapté à la compréhension de ton dialecte

PilouPilou a écrit :
que ce soit pour un site ou pour une bannière, c'est la même chose.
Parfaitement d'accord avec ceci.


Succinctement, voici mon tuto en 4 étapes :
Primo, se plonger dans la doc et tenter d'animer des choses simples.
Secundo, appliquer ce qui a été vu précédemment à ton code et partager avec nous ton expérience (des outils comme Codepen.io sont tout indiqués).
Tercio, l'étape précédente accompagnée d'une demande claire et détaillée va aboutir à une participation active sur ton sujet amenant réponses, éléments de réflexion et pistes subsidiaires.
Quaterno... voyons déjà ce que donnent les étapes précédentes pour voir si quaterno il y aura Smiley lol
Modifié par Greg_Lumiere (21 Nov 2016 - 14:30)
Merci Greg pour toutes ses infos ! Je vais donc me plonger dans la doc "animation CSS".
Au-delà des sites, sais-tu s'il existe de bons bouquins ? J'aime bien le papier Smiley biggrin
Navré, personnellement je n'affectionne pas les livres car payants.

Comme on dit chez moi [i]Gratuit c'est dans mes prix ![/b] Smiley langue

PS: on y dit aussi plein d'autres conneries dont je te fais grâce Smiley lol
Modifié par Greg_Lumiere (21 Nov 2016 - 14:46)
Du coup je m'amuse un peu avec animate.css
Savez-vous comment enchainer 2 animations sur un même objet sans JS ?
Temps 1 : une animation
Stop X secondes
Temps 2 : une autre animation
Je crois savoir aussi... mais d'autres seraient peut-être intéressés.
Doivent-ils vous prier (au sens laïque) ?
Smiley smile 

.monobjet {
-webkit-animation: Animation1 1s, Animation2 1s;  //Xs = vitesse d'apparition
-webkit-animation-delay: 0s, 5s; //Xs = délai d'apparition	
}


Smiley langue
Par contre là je suis bloqué.
Avec le code de mon message précédent j'arrive bien à faire apparaitre mon objet avec une animation, le faire rester X secondes et le faire disparaitre avec une autre animation.
Mais je voudrais que cet objet apparaisse sur ma page seulement au bout de X secondes. Et je n'y arrive pas.
Une personne peut-elle m'aider ?

Merci ! Smiley smile
Tu dois ajouter une animation (Animation0) qui te permettra de masquer par défaut ton objet. L'animation affiche l'objet puis tu figes l'animation à son état final (visible).

Après si tu regarde bien ton code tu t'apercevras que tu pourras concaténer tes 3 animations en une seule.

Enfin tout ça ne sont que des hypothèses car au vu du code que tu partages difficile de pouvoir être précis.
Merci Greg pour ta réactivité.
Voici mon code avec ce que j'ai compris de ton dernier message.


@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes app {
   from  {opacity:0;}
   to {opacity:1;}
}

@keyframes app {
   from  {opacity:0;}
   to {opacity:1;}
}

.banner {
width:300px;
height:250px;
border:1px solid black;
text-align:center;
}

.animation {
-webkit-animation: app 1s, zoomIn 1s, zoomOut 1s forwards;
-webkit-animation-delay: 5s, 5s, 10s;
animation: app 1s, zoomIn 1s, zoomOut 1s forwards;
animation-delay: 5s, 5s, 10s;	
}




<body>
<div class="banner">
<h1 class="animation">Exemple</h1>
</div>
</body>
</html>


Mais ça ne fonctionne pas Smiley sweatdrop Ma balise H1 apparait dès le début.
Merci pour ton aide.
Ton animation doit-elle ressembler à quelque-chose comme ça ?

Je n'ai pas préfixé étant sur un navigateur qui supporte les commandes non préfixées.

Je te laisse décortiquer tout ça. Smiley smile
Merci ! Ton code est très clair et c'est exactement ce que je souhaitais Smiley smile
Le "forwards" permet de figer l'objet sur ma scène, mais avec ton code comment je peux faire pour que celui-ci disparaisse au bout de X secondes avec également un effet de fondu ? J'ai tenté de modifier ton code mais ça ne fonctionne pas. Merci Smiley lol
Tu "allonge" l'animation et rajoute en état final opacity: 0.

Voir l'exemple que j'ai modifié en conséquence. Je pars sur une base de 18s mais bon après c'est une question d'appréciation.

Toujours est-il que le raisonnement est le suivant :
Durée totale de l'animation = somme des durées de chaque étape (ici 18sec)
1sec = 100 / 18 = 5.55%
Définition des étapes ; par exemple pour un effet sur 4sec faire 4*5.55=22.2% donc à 22.2% de plus de la précédente.
Sachant qu'à zéro (from) on définit un état initial et à 100% (to) un état final.

Comprendes ?
Modifié par Greg_Lumiere (22 Nov 2016 - 14:31)
Exactement ça ! Smiley smile
Merci à toi, ton code est très clair et ton explication aussi. C'est quand même pas évident tout de suite d'animer en CSS Smiley smile

J'ai une petite question tout de même, si comme dans mon code initiale j'ai 2 animations distinctes que j'ai pioché dans animate.css. Pour appliquer les 2 animations à mon objet avec la même configuration que ton code, c'est à dire un délai d'apparition et l'objet qui disparait à la fin. Je suis obligé de rassembler les 2 animations en une ? Je ne sais pas si je suis très clair...
Modifié par PilouPilou (22 Nov 2016 - 19:25)
Tu n'es pas obligé de les fusionner mais c'est plus optimum et ça évite de devoir gérer le délai d'attente entre chaque animation.
Ca facilite la lecture et la maintenance et ça évite à terme de se retrouver avec des animations qui ne sont pas utilisée (quand on atteint le millier de ligne ça joue Smiley cligne )
Du coup en cas de bug tu t'y retrouve plus vite.

D'autant que si tu préfixes toi-même tu verras que vas te retrouver avec un beau chapelet de code (version webkit, moz, o et sans prefixe).

PilouPilou a écrit :
C'est quand même pas évident tout de suite d'animer en CSS
C'est surtout du calcul et de la logique Smiley smile rien de bien sorcier en fait mais tellement efficace !
Pages :
Sujet clos
Aller à