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
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
<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:

3 réponses

Utilisateur anonyme
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:


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/
1
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
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
0
Utilisateur anonyme
13 août 2016 à 01:16
Il faut que tu utilises une librairie déjà, mais je te conseille de le faire en jQuery, c'est plus simple et il y a une fonctionne simple pour faire un scrollSmooth
0
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
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
0