Bonjour,

J'ai fait une petite animation qui se déclenche quand on passe la souris sur du texte, qui modifie la couleur du texte en y mettant un petit effet décalé (je testais les fonctionnalités css, j'améliorerai le design une fois que j'aurais bien compris) cependant j'aimerais bien que le titre reste affiché avec la couleur finale jusqu'a ce que je recharge la page ... j'ai mis un fill mode forwards mais le soucis c'est que ça reste en place tant que la souris est sur le titre donc ce n'est pas ce que je souhaite :/.

@keyframes animation_titre {
    
    50% {
        transform: translateX(-15px);
    }

    to {
		transform: translateX(15px);
		color: #65BDEC;
	}
}

h3:hover
{
	animation: animation_titre 1s forwards; 
	
}

Salut, 

Tu peux essayer de faire ça en JQuery par exemple :

<script> 
$(document).ready(function(){
    $("h3").hover(function(){
        var h3 = $("h3");  
        h3.css({"transform": "translateX(15px)", "color": "#65BDEC"});
    });
});
</script> 

Tu as juste à mettre le code dans ton fichier.html

EDIT:

Il faut rajouter ceci dans ton fichier pour que le script fonctionne :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

-
Edité par Valarkook 11 mai 2018 à 14:03:02

Bonjour Skytchup,

Tu veux garder la couleur et le transform: translateX(15px);

En fait j'ai mis translateX(15px) parceque je voulais que le titre revienne a se position mais finalement ça le décale de 15px à partir de sa position initiale donc j'ai mis 0.

Valarkook j'ai essayé ton script en modifiant les 15px du coup

$(document).ready(function(){
	$("h3").hover(function(){
		var h3 = $("h3"); 
		h3.css({"transform": "translateX(0px)", "color": "#70C7F7"});
	});
});

j'ai deux petites questions : 

1/ pourquoi si j'enlève la translateX dans la fonction ça marche plus ? (pour alléger le code visuellement je voulais ecrire :

$(document).ready(function(){
	$("h3").hover(function(){
		var h3 = $("h3"); 
		h3.css({"transform": "color": "#70C7F7"});
	});
});

2/ ton script marche bien cependant il m'affiche en bleu tous les titres et non pas uniquement celui sur lequel je passe la souris.

Est ce que je dois écrire la fonction 3 fois en mettant l'ID des titre du coup plutôt que le h3 qui, lui, est trop général ?

En tout cas déjà merci beaucoup, j'ai ce que je voulais en mettant les ID

$(document).ready(function(){
	$("#REF1").hover(function(){
		var h3 = $("#REF1"); 
		h3.css({"transform": "translateX(0px)", "color": "#70C7F7"});
	});
});

$(document).ready(function(){
	$("#REF2").hover(function(){
		var h3 = $("#REF2"); 
		h3.css({"transform": "translateX(0px)", "color": "#70C7F7"});
	});
});

$(document).ready(function(){
	$("#REF3").hover(function(){
		var h3 = $("#REF3"); 
		h3.css({"transform": "translateX(0px)", "color": "#70C7F7"});
	});
});

-
Edité par Skytchup 11 mai 2018 à 14:51:04

1) Je ne suis pas sûr que tu puisses utiliser "transform" seul comme celà. Ceci-dit tu as laissé les deux points après le transform et il faudrait donc enlever car cela indique qu'il y a un paramètre après. A la place des deux points tu dois mettre une virgule pour dire que tu passes à une autre propriété CSS.

2)Effectivement le script tel quel affiche tous les titres en balise h3 en bleus, si tu veux que cela ne se passe que pour quelques titres alors tu dois mettre un un id sur tes balises h3 que tu veux modifier, exemple:

<h3 id="modif">Test1</h3>
<h3>Test2</h3>
<h3 id="modif">Test3</h3>

$(document).ready(function(){
    $("#modif").hover(function(){
        var h3 = $("#modif");
        h3.css({"transform": "translateX(0px)", "color": "#70C7F7"});
    });
});

Ici seuls Test1 et Test3 seront modifiés.

-
Edité par Valarkook 11 mai 2018 à 14:54:41

Bonjour,

Voici une tentative bricolée d'obtenir ce que tu souhaites en pur CSS avec :not(:hover), mais je ne suis pas sûr que ce soit très recommandable.

Fondamentalement, ce n'est pas possible en CSS et il faut en effet du JS (pas forcément via jQuery).

Voici la bidouille tout de même (si on sort trop vite du hover du conteneur, on fige là où on en était):

Démo: http://jsbin.com/lufavey/1/edit?html,css,output

<div class="stop"><h3>Mon titre</h3></div>

CSS

@keyframes animation_titre {

    50% {
        transform: translateX(-15px);
    }
 
    to {
        transform: translateX(15px);
        color: #65BDEC;
    }
}

h3:hover
{
    animation: animation_titre 1s forwards;
}

.stop:not(:hover)>h3{
  animation: animation_titre 1s forwards;
  animation-play-state: paused;
}

Valarkook

Au temps pour moi, je suis idiot j'avais pas effacé le "transform": !! Oui du coup c'est sûr que si je lui demande de transformer mon texte en espérant qu'il devine comment tout seul, je n'irai pas bien loin !

Avec les ID j'ai eu la même idée ça fonctionne très bien du coup super !

philiga 

Si l'utilisateur n'attend pas 1s entièrement sur le titre ça va me décaler le titre du coup non ?! En tout cas j'aime bien l'idée, je suis du genre à bidouiller comme ça aussi !

Merci Valarkook, philiga et AliasDmc pour votre aide ! J'ai résolu mon petit problème !

Skytchup a écrit:

...

philiga 

Si l'utilisateur n'attend pas 1s entièrement sur le titre ça va me décaler le titre du coup non ?!

Bonjour Skytchup,

en fait, j'ai du mal à comprendre ce que tu veux, et là on te parle de  js mais .... je doutes.

Quand on survole le h3  et que l'on reste sur le titre :

• une transition de couleur du noir (ou autre peut importe) au bleu (seulement pour le premier survol, sinon cela reste bleu), ca je pense que j'ai compris
• par compte c'est ton translate que  je ne comprend pas , on doit avoir : 
• 1 solution : une transition translatex() qui doit partir de 0px allé a 15px puis revenir a 0px. Ou bien on doit rester à 15px et c'est quand on sort du h3 que l'on revient en 0px
• 2 solution : une transition translatex() qui doit partir de 0px allé a -15px  puis aller a 15px revenir a 0px.

-
Edité par AliasDmc 11 mai 2018 à 15:40:20

AliasDmc,

En fait je voulais (et ça fonctionne !) que lorsqu'on passe la souris sur le titre, il se décale de 15px sur la gauche en changeant de couleur et lorsqu'on quitte le titre, il revient a sa position initiale mais en restant bleu. Petite confusion de ma part au départ je pensais qu'il fallait le re-décaler de 15 px pour qu'il revienne à sa position initiale mais en fait ça le décalait de 15px à droite donc ce n'était pas bon !

Bonjour Skytchup,

Au cas où voilà un petit exemple :

https://codepen.io/Zonecss/pen/jxpyPq