Hover et back to top
Résolu/Fermé
Evalon
Messages postés
66
Date d'inscription
mercredi 30 septembre 2015
Statut
Membre
Dernière intervention
21 juillet 2017
-
11 août 2016 à 21:55
Evalon Messages postés 66 Date d'inscription mercredi 30 septembre 2015 Statut Membre Dernière intervention 21 juillet 2017 - 13 août 2016 à 22:03
Evalon Messages postés 66 Date d'inscription mercredi 30 septembre 2015 Statut Membre Dernière intervention 21 juillet 2017 - 13 août 2016 à 22:03
A voir également:
- Hover et back to top
- Qwerty to azerty - Guide
- Top site telechargement - Accueil - Outils
- Get data back - Télécharger - Récupération de données
- Press del to enter setup ✓ - Forum Windows
- Video to video - Télécharger - Conversion & Codecs
3 réponses
Utilisateur anonyme
12 août 2016 à 00:46
12 août 2016 à 00:46
Bon déjà quelques points qui vont t'aider par la suite:
Met tes class et id en minuscule, car c'est une convention, et ça aide si tu veut écrire midBack par exemple, au cas où tu utilises le camelCase
Ensuite le display: inline sur un <a> est inutile car il est déjà en inline de base.
Utilise les transform: translate pour déplacer un élément plutôt que top/left, car la méthode tranform utilise le GPU et non le CPU (donc optimisation de l'animation)
Donc au lieu de faire:
C'est mieux:
Si tu ne changes pas de transition entre l'animation en hover et celle en sortie, il est inutile de remettre transition dans l'état hover, juste dans l'état de base suffit.
Après -webkit-transition est différent de transition, donc si tu veux utiliser -webkit-transition oublie pas de remettre la même ligne en dessous mais juste pour transition afin que ça fonctionne sur tout les navigateurs et non juste Chrome/Opera.
Ensuite pour ton problème comme ton img et ton texte sont tous les deux dans le a tu peux juste faire .Legal:hover img pour que ça fonctionne.
Tu peux aussi retirer le :focus qui fonctionne que si c'est un éléments qui accepte une entrer de texte comme un input. La balise img et a n'en font pas parti.
Ensuite pour le scrollTop, il faut mettre un écouteur sur ton id cRetour et réaliser un scrollSmooth grâce à une librairie par exemple:
https://cferdinandi.github.io/smooth-scroll/
Met tes class et id en minuscule, car c'est une convention, et ça aide si tu veut écrire midBack par exemple, au cas où tu utilises le camelCase
Ensuite le display: inline sur un <a> est inutile car il est déjà en inline de base.
Utilise les transform: translate pour déplacer un élément plutôt que top/left, car la méthode tranform utilise le GPU et non le CPU (donc optimisation de l'animation)
Donc au lieu de faire:
top: -10px;
transform: rotateY(360deg);
C'est mieux:
transform: translate(-10px) rotateY(360deg);
Si tu ne changes pas de transition entre l'animation en hover et celle en sortie, il est inutile de remettre transition dans l'état hover, juste dans l'état de base suffit.
Après -webkit-transition est différent de transition, donc si tu veux utiliser -webkit-transition oublie pas de remettre la même ligne en dessous mais juste pour transition afin que ça fonctionne sur tout les navigateurs et non juste Chrome/Opera.
Ensuite pour ton problème comme ton img et ton texte sont tous les deux dans le a tu peux juste faire .Legal:hover img pour que ça fonctionne.
Tu peux aussi retirer le :focus qui fonctionne que si c'est un éléments qui accepte une entrer de texte comme un input. La balise img et a n'en font pas parti.
Ensuite pour le scrollTop, il faut mettre un écouteur sur ton id cRetour et réaliser un scrollSmooth grâce à une librairie par exemple:
https://cferdinandi.github.io/smooth-scroll/
Evalon
Messages postés
66
Date d'inscription
mercredi 30 septembre 2015
Statut
Membre
Dernière intervention
21 juillet 2017
3
12 août 2016 à 22:25
12 août 2016 à 22:25
Je te remercie beaucoup d'avoir pris le temps de me répondre
J'ai résolu le :hover en changeant mon code Css et en prenant en compte tes conseils.
Par contre pour le Javascript c'est une autre paire de manche, je suis une bille en JS, car je suis incapable, et c'est pas faute d'avoir essayer, de résoudre mon problème.
Aurais tu l'amabilité de modifier mon code avec cet écouteur ?
Je te remercie d'avance
J'ai résolu le :hover en changeant mon code Css et en prenant en compte tes conseils.
Par contre pour le Javascript c'est une autre paire de manche, je suis une bille en JS, car je suis incapable, et c'est pas faute d'avoir essayer, de résoudre mon problème.
Aurais tu l'amabilité de modifier mon code avec cet écouteur ?
Je te remercie d'avance
Evalon
Messages postés
66
Date d'inscription
mercredi 30 septembre 2015
Statut
Membre
Dernière intervention
21 juillet 2017
3
13 août 2016 à 22:03
13 août 2016 à 22:03
Je suis incapable de le faire avec le peu de niveau de javascript que j'ai et mon niveau 0 en jquery donc je crois que je vais abandonner l'idée.
je te remercie quand même d'avoir pris le temps de me donner des conseils pour mon Css et d'avoir résolue mon problème d'image
Je marque en résolue
je te remercie quand même d'avoir pris le temps de me donner des conseils pour mon Css et d'avoir résolue mon problème d'image
Je marque en résolue