Bonjour,
je cherche a relier une animation faite en CSS à un bouton HTML et j'ai trouvé des solutions sauf que celles si impliquent toutes du javascript !
J'ai pas encore commencé à travailler le javascript et je préfèrerai pas avoir a m'éparpiller sur d'autre langage avant d'avoir des base solide dans ces deux là.
Donc si vous avez une solution a mon problème ou des suggestions je suis preneur !
Merci d'avance et bonne journée.
Je pense que tu es obligé de passer par du Javascript sauf si css 3 permet de faire ce genre de chose (car je connais pas css 3).
En cherchant rapidement je suis tombé sur ca :
https://openclassrooms.com/forum/suj...ire-annimation
Si ça peut aider.
Bonsoir,
Sans avoir le bout de code (HTML et CSS) difficile de répondre !
Ceci étant dit, HTML 5, CSS3 et JavaScript vont ensemble, ce sont les langages dits de front...
Les apprendre en parallèle est loin d'être une mauvaise idée, mais si CSS aura de plus en plus tendance à prendre le pas pour les effets et les animation, il restera beaucoup de chose bien plus simples à réaliser en js...
J'ai glissé Chef !
Entièrement d'accord. A défaut de vouloir apprendre Javascript en détail, vaste sujet, faire du copier/coller des solutions existantes qu'on trouve sur le Net pour lancer une animation est pratiquement indispensable.Envoyé par Ikhar84
Je ne suis pas forcément d'accord, réalisé si possible avec css 3 vaut mieux l'apprendre en premier, mais c'est position minoritaire ce qui ne l'aide pas. Et puis malheureusement les contraintes de temps (le temps c'est de l'argent) on fait au plus vite ce qui ne veut pas dire faire au mieux. Du coup difficile en effet en pratique de ne pas faire de copier/coller. Mais si tu as le temps de bien apprendre le javascript à part c'est un plus mais il faudra aussi prévoir d'étudier une utilisation moderne comme jquery en parallèle si possible.
Dernière modification par Merlin95 ; 09/02/2021 à 18h34.
Comment fais tu la réaction à l’appui sur un bouton en pure css, sans JavaScript ? Le lien que tu as donné ne le propose pas.
@Merlin:
Tu sais un document.getElementById ou un addEventListener ne demande pas un investissement temps bien considérable pour être maîtrisé(s)...
Et si ça évite de jouer avec les combinateurs de selecteur jusqu'à remonter juqqu'au enième voisin du noeud enfant du .... du DOM, il peut être pertinent de commencer à regarder du côté de js...
Edit: herbe coupée sous le pied par pm ...
Ceci dit, tu as la pseudo-classe :active pour ça en css, à tester sur un bouton ou un lien (pas sûr de mon coup, ça restera que de la présentation et pas du comportement, sans voir le code du PO)...
Dernière modification par Ikhar84 ; 09/02/2021 à 18h39.
J'ai glissé Chef !
En guise de bouton tu mets un lien dans ton html, qui appelle un gif animé, et tu a ton animation sans te casser la tête.
Simple, facile, efficace.
... aussi simple que dans le début des joyeuses années 2000...
Enfin, quand on parle d'animation, transition et autre effets en css, on ne penses pas à des petits bonhommes qui bougent les mains...
J'ai glissé Chef !
Ca oui, mais javascrit dans le cadre du développement ne se limite pas qu'à l'utilisation sur le navigateur. Par exemple tu as Node.js qui est un environnement de serveur. M'en demandez pas plus je l'utilisais durant la phase de développement c'était très pratique mais je ne rapelle plus de toutes les utilisations qu'on en faisait.
Aussi pour le développement sur smartphone je crois que vaut mieux bien connaitre javascript mais pas sûr non plus.
Dernière modification par Merlin95 ; 09/02/2021 à 19h36.
Justement je ne sais pas je connais pas css 3, mais il me semble que comme la notion est du css 3, il doit y avoir un moyen de la lancer en restant sur du css 3 mais je me trompe peut-être.
A ma connaissance il faut du JavaScript en effet.
Aprés c'est vrai que ça dépend ton objectif on va dire être à la pointe technique web ou vouloir plutôt daller plus sur du management.
Oui je confirme même s' il y a des hacks, des bidouilles que je ne conseille pas trop : https://stackoverflow.com/questions/...-effect-in-css
je suis tombé sur ce "tuto" d'animation CSS sans JS; à voir si ça peut aider (il note un problème de prise en compte par webkit à l'époque (2012); à voir aujourd'hui). https://www.screenfeed.fr/blog/css3-...thout-js-0828/
Bonjour,
Voila un exemple d'animation css déclenché par du javascript écrit directement dans la balise button.
Honnêtement, c'est rien du tout comme code javascript.
Cliquez pour afficher
Par contre le forum rajoute un espace dans le mot loader, c'est bizarre.
Dernière modification par vgondr98 ; 10/02/2021 à 16h41.
Merci pour toute vos réponses. Je cherchais vraiment un moyen pratique de le faire via css, mais si c'est vraiment moins pratique qu'en javascript y'a aucun intérêt.
je vais donc apprendre javascript en même temps parce que ca semble être très complémentaire avec le HTML et CSS.
Je voulais juste pas recopier des lignes de codes que je comprends pas et que j'ai trouvé sur internet donc je vais commencer du début!
bonne journée à vous !
PS: si quelqu'un a un lien ou une source qu'il approuve pour apprendre le JS je suis preneur !
Je te conseille de ne pas apprendre les fondements profonds, spécifiques, et interessants du javascript. Contente toi de savoir l'utiliser puis à un autre moment prend ton temps d'apprendre depuis la base.
Je plussoie ce conseil. Pour commencer, tu as juste besoin de connaitre peu de choses pour faire des actions et pas intérêt à te plonger dans le langage qui est plus complexe qu'il n'y parait.
W3Schools peut être un point de départ (vu qu'il traite des langages web) https://www.w3schools.com/js/DEFAULT.asp
