Alterner une image et un texte avec une transition CSS3

**6nawak** · 26/04/2015, 16h51

Bonjour à tous,

Je débute en javascript.

Sauriez-vous m'aider pour le problème suivant :

Je cherche le code javascript le plus léger possible afin d'effectuer la chose suivante :

Sur une page HTML5, j'ai une image, lorsque je clique sur celle-ci elle disparait (avec une transition CSS3) et laisse apparaître un texte à sa place.
Puis lorsque je clique sur le texte, de nouveau celui-ci disparait et laisse apparaître l'image précédente (toujours avec une transition CSS3).

Je vous remercie par avance pour votre aide,

**ABCIWEB** · 26/04/2015, 21h27

Salut,

C'est un impératif la transition css3 ? Je vois pas trop comment faire avec un comportement onclick. Cela dit je suis pas un as des css donc tu auras peut être une meilleure réponse.
En attendant comme j'ai pas plusieurs vies, j'utilise jquery et on peut le faire très simplement en une seule ligne de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title></title>
<script src="//code.jquery.com/jquery-1.11.2.js"></script>
<script>
$(function(){                 
	$(".content").on('click',function(){$(".change").fadeToggle( "slow", "linear" );});
});
</script>
<style type="text/css">
.content {   
  position:relative;
}
.content, .change {   
  height:90px;
  width:216px;
}
.change { 
  position:absolute;
  top:0;
  left:0;
  background:#ccc; 
}
</style>
</head>
<body>
<div class="content">
    <div class="change" style="display:none">Le texte qui s'affiche onclick sur l'image puis disparaît ensuite </div>
    <img class="change"  src="http://www.developpez.net/template/images/logo.png" alt="développez">
</div>
</body>
</html>

L'avantage en plus d'être rapide c'est que c'est également compatible avec des navigateurs anciens

**6nawak** · 30/04/2015, 23h39

Bonjour,

J'essai de créer un script qui effectue ceci :

- Si je clique sur l'image, alors elle disparait avec un effet de floutage, puis un texte apparaît à la place.

- Si je clique sur le texte, alors il disparait avec un effet de floutage, puis l'image reapparaît à sa place.

- et ainsi de suite... à chaque clique on alterne entre l'image et le texte.

Cependant si vous regardez le jsFiddle dont voici le lien :

http://jsfiddle.net/n3gky0y3/1/

vous verrez qu'au troisième clique le texte ET le dessin disparaissent...

Pouvez-vous m'expliquer d'où vient mon erreur ?

Si vous voyez des optimisations à apporter à mon code n'hésitez pas.

Je vous remercie par avance pour votre aide.

**SylvainPV** · 01/05/2015, 01h31

Il y a la fonction fadeToggle pour ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var elements = $('img, p'); // selectionne image et texte
elements.click($.fn.fadeToggle.bind(elements));

http://jsfiddle.net/n3gky0y3/3/

Si tu tiens à garder l'effet de flou (compatible Webkit uniquement), une transition CSS au lieu de deux anims est plus simple :
http://jsfiddle.net/n3gky0y3/4/

**6nawak** · 01/05/2015, 12h08

Merci SylvainPV,

Non seulement ton code fonctionne très bien mais il est, de plus, optimisé à l'extrême.

Encore merci.

**6nawak** · 01/05/2015, 14h06

J'ai encore une dernière question.

Si je me trouve dans une situation comme celle-ci :

http://jsfiddle.net/n3gky0y3/6/

où j'ai plusieurs images.

Quelle serait la manière la plus optimisée pour effectuer au clic que l'animation de l'élément concerné, sans les enclenchés toutes.

Par exemple si je clique sur la première image il n'y a que la première description qui apparait, sans que la seconde s'enclenche.

Car j'aurai beaucoup d'images, je ne suis pas sûr que de désigner chaque image et description par un id et répéter ainsi le même code pour chaque id soit la manière la plus optimisée de faire.

Encore merci pour votre aide.

**SylvainPV** · 01/05/2015, 14h45

Ma première idée serait de mettre chacun des groupes dans un élément différent, puis d'aller modifier les classes des enfants de l'élément cliqué :
http://jsfiddle.net/n3gky0y3/7/

**6nawak** · 01/05/2015, 15h25

Ok merci SylvainPV,

Ca fonctionne parfaitement !

**NoSmoking** · 02/05/2015, 17h24

Bonjour,
peut être pourrais tu penser à finaliser ta précédente discussion

.

**ABCIWEB** · 03/05/2015, 03h28

Envoyé par 6nawak

Merci SylvainPV,
Non seulement ton code fonctionne très bien mais il est, de plus, optimisé à l'extrême.

La transition CSS3 est discutable. A partir du moment où tu charge jquery autant faire du code un maximum compatible, alors pourquoi utiliser une transition css3 qui sera incompatible avec des navigateurs encore assez utilisés comme IE9. Le seul avantage de cette solution est que tu vas éventuellement fluidifier la transition pour les smartphones d'entrée de gamme. Mais avec un fadeToogle tu étais compatible avec tous les navigateurs, même anciens...

**SylvainPV** · 04/05/2015, 14h48

Les transitions CSS3 c'est 90% de support aujourd'hui en part globale de marché. Et c'est juste de l'animation, donc ce n'est pas grave si le navigateur ne les supporte pas. Aussi, elles sont plus fluides sur mobile et moins consommatrices en CPU que leur équivalent fadeToggle à base de timeout.

**ABCIWEB** · 04/05/2015, 21h22

Oui mais dans les 90% je suppose que tu inclus les mobiles. Cela fausse la moyenne car la plupart des sites sont vus à bien plus de 50% sur ordinateurs de bureau, ce sera donc réellement beaucoup plus de 10% de visiteurs qui seront "lésés".

Pour les mobiles, je fais les tests sur un smartphone entrée de gamme à 60 € et un fadeToogle est fluide plus de deux fois sur trois. Au final tu favorise un affiche plus fluide dans ~ 30% des cas pour les smartphones entrée de gamme qui ne représentent par ailleurs qu'une petite part du parc des mobiles, au détriment d'un mauvais fonctionnement à 100 % pour tous les utilisateurs qui utilisent un navigateur un peu ancien.
C'est un choix très discutable si l'on compte le nombre total de visiteurs qui auront vu l'animation se dérouler correctement.
Sur ce critère, il faudra encore bien des années avant que la courbe s'inverse en faveur de la transition CSS3. Je ne doute pas que ce soit la solution d'avenir et la plus optimisée, mais rentable seulement à moyen-long terme, à moins évidemment de cibler principalement les portables.

**SylvainPV** · 05/05/2015, 10h26

Les transitions CSS3 sont compatibles tous navigateurs desktop excepté IE9 et inférieur, qui représentent une part de marché minoritaire (moins de 5% d'après StatCounter)
voir http://caniuse.com/#search=transitions

Je ne sais pas comment tu fais tes tests pour avoir un résultat différent une fois sur trois, mais c'est un fait bien connu que l'implémentation même des animations en jQuery pose des problèmes de performance, particulièrement visibles sur mobile où le CPU est limité. C'est justement pour ça qu'il existe des plugins pour venir améliorer les animations jQuery en utilisant les transitions CSS3 lorsqu'elles sont supportées : https://github.com/benbarnett/jQuery-Animate-Enhanced ; si tu veux absolument conserver les animations sur les IE antiques, utilise au moins ça pour ne pas pénaliser les autres navigateurs.

**ABCIWEB** · 06/05/2015, 05h24

Salut,

Ces chiffres ne correspondent pas à ce que je constate de visu autour de moi.

Et si l'on parle statistiques, elles peuvent varier fortement suivant qui les fait.
Par exemple : Nom : Capture1.png
Affichages : 573
Taille : 25,8 Ko

Nom : Capture1.png
Affichages : 573
Taille : 25,8 Ko

Ces stats (source netmarketshare.com) qui mettent IE8 + IE9 à pas loin de 25% pour le mois d'avril 2015 correspondent mieux avec ce que j'observe dans mon entourage (à la louche j'aurais dit entre 15 et 20%).

Après c'est peut être "un fait bien connu que l'implémentation de jquery pose des problèmes de performance, particulièrement visibles sur mobile où le CPU est limité" mais ce n'est pas ce que j'observe quand je fais des tests.
Et justement pour savoir à quoi m'en tenir, j'ai acheté il y a un an un smartphone entrée de gamme (Huawei Ascend Y330 à 65€) pour faire des tests dans les conditions les plus défavorables. Il s'avère que les fondus enchainés d'images réalisés avec le fadeToggle de jquery sont fluides dans presque 80% des cas. De temps en temps, 2 à 3 fois sur 10 environ la transition est un peu hésitante mais rien de bien gênant. Pour les smartphones un peu plus puissants (gamme 150-200€) le fondu est ok dans pratiquement 100% des cas.
Alors tu comprendras que je suis pas très pressé d'utiliser les transitions css3, à moins de vendre des sites à 1 million de dollars pour avoir le temps d'intégrer tout ce bin's de compatibilité (pour au final pas gagner grand chose). Pour moi ce sera dans quelques années quand on en aura terminé avec les IE8 et 9 et à ce moment là je ferai toutes les transitions en css3, mais pas avant.

**SylvainPV** · 06/05/2015, 21h11

C'est pas grave, tu n'es pas le premier à te montrer réticent au changement. 6nawak a les deux façons de faire, il choisira ce qu'il préfère.

**ABCIWEB** · 07/05/2015, 09h59

Pas réticent, mais disons que je mesure toujours le rapport bénéfice/investissement peut-être parce que j'ai passé l'âge d'essuyer les plâtres.
On a simplement pas les mêmes priorités, mais comme tu le dis c'est bien qu'on ait pas le même profil, ça donne à voir plus de paysage

Alterner une image et un texte avec une transition CSS3

jQuery

Discussions similaires

Partager

Partager