Hover et back to top
Résolu
Evalon
Messages postés
66
Date d'inscription
Statut
Membre
Dernière intervention
-
Evalon Messages postés 66 Date d'inscription Statut Membre Dernière intervention -
Evalon Messages postés 66 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Tous d'abord je m'excuse si le sujet est dans le mauvais forum
Je suis en train de développer mon premier site uniquement en Notepad++ et j'ai deux sujets sur lesquels je sèche complètement car cela fait des jours que je cherche sur le net en vain.
Je vous pris d’être indulgent car je suis encore loin d’être un expert en Html et Css et je suis un novice complet en Javascript.
Le premier est l'animation d'un élément en faisant un hover sur un autre élément.
Je dévelloppe:
J'ai ceci en html
Et voilà mon CSS
Et je voudrais que quand je passe ma souris sur le texte l'animation sur l'image s’exécute, j'ai essayer, en vain des heures, le ~ et le + en Css, mais rien a faire.
Mon deuxième souci est avec le javascript et le back to top
J'ai ceci
Je pourrais vous mettre le Css, mais je ne vois pas trop l’intérêt.
Quand j'appuie sur le bouton je suis directement en haut sans scrolling et je ne trouve pas ça très esthétique et je voudrais rajouter cette fonction de scroll.
Je vous remercie d'avance et j’espère que mettre deux questions dans un même sujet n'est pas trop dérangeant.
Tous d'abord je m'excuse si le sujet est dans le mauvais forum
Je suis en train de développer mon premier site uniquement en Notepad++ et j'ai deux sujets sur lesquels je sèche complètement car cela fait des jours que je cherche sur le net en vain.
Je vous pris d’être indulgent car je suis encore loin d’être un expert en Html et Css et je suis un novice complet en Javascript.
Le premier est l'animation d'un élément en faisant un hover sur un autre élément.
Je dévelloppe:
J'ai ceci en html
<a class="Legal" href="#" rel="nofollow" target="_blank" title="Toto"><img src="MonImage.png" alt="Bloc et stylo">Tata</a>
Et voilà mon CSS
.Legal { position: relative; display:inline; order: 1; width:50px; height:48px; transform: translateY(-50%); font-size: 1vw; transition: all 1s ease-in; } .Legal img { position: relative; width:48px; height:48px; margin-right: 15px; top: 0; vertical-align:-18px; transition: all 1s ease-in; } .Legal img:hover, .Legal img:focus { position: relative; top: -10px; transform: rotatey(360deg); -webkit-transition: all 1s ease-in; }
Et je voudrais que quand je passe ma souris sur le texte l'animation sur l'image s’exécute, j'ai essayer, en vain des heures, le ~ et le + en Css, mais rien a faire.
Mon deuxième souci est avec le javascript et le back to top
J'ai ceci
<a name="haut" id="haut"></a> [Mon contenu] <div><a id="cRetour" class="cInvisible" href="#haut" rel="nofollow" target="_blank"></a></div> <script> document.addEventListener('DOMContentLoaded', function() { window.onscroll = function(ev) { document.getElementById("cRetour") .className = (window.pageYOffset > 100) ? "cVisible" : "cInvisible"; }; }); </script>
Je pourrais vous mettre le Css, mais je ne vois pas trop l’intérêt.
Quand j'appuie sur le bouton je suis directement en haut sans scrolling et je ne trouve pas ça très esthétique et je voudrais rajouter cette fonction de scroll.
Je vous remercie d'avance et j’espère que mettre deux questions dans un même sujet n'est pas trop dérangeant.
A voir également:
- Hover et back to top
- Qwerty to azerty - Guide
- Get data back - Télécharger - Récupération de données
- Top site telechargement - Accueil - Outils
- Video to video - Télécharger - Conversion & Codecs
- Majuscule to minuscule - Guide
3 réponses
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/
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