Aller au contenu


[Astuce] - Créez la surprise avec un lien !


  • Vous ne pouvez pas répondre à ce sujet
2 replies to this topic

#1 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 26 août 2014 - 10:25

Créez la surprise avec un lien !



Si vous me lisez, il est fort probable que vous sachez ce qu'est un lien :transpi:, un lien hypertexte de son vrai nom. Cliquer sur un lien amène au déclenchement d'une action, qui consiste le plus souvent à aller sur une autre page, c'est bien pour cela que le lien a été "inventé" - parfois cela sert à modifier la page (aspect, contenu, pop-up, suivante-précédente ou autre contrôle, etc).


Bref, un lien, ça sert avant tout à naviguer.


Et quand on clique sur un lien, on ne s'attend pas à autre chose que d'aller sur la page demandée, et on aime que cela se fasse vite et bien.


Il n'y a aucune surprise ...



Je vais vous présenter rapidement comment créer une petite surprise au clic sur le lien. Mais attention: c'est une technique à ne mettre en oeuvre qu'avec parcimonie, à bon escient, et à ne surtout pas généraliser à tous vos liens sous peine de devenir tout simplement insupportable. Il s'agit vraiment de voir quels sont les rares liens concernés par cette astuce et de trouver également la bonne surprise, celle qui collera bien avec le lien ...
 
 
 
Il y a toutefois un bémol à indiquer: tout repose sur javascript, si bien que si javascript n'est pas activé sur le navigateur de votre visiteur, il pourra suivre le lien mais n'aura pas la surprise.
 
 
Alors, le principe:
 
on écoute les événements sur la page, et quand on entend un clic sur le lien-surprise, on suit ces 3 étapes dans l'ordre:

  • on empêche le clic d'être suivi,
  • on fait notre petite surprise,
  • on permet ensuite au lien d'être suivi.

Pour la surprise, il vaut mieux rester léger, ne surtout pas faire long, bien rester sur la page même si ce n'est pas obligatoire techniquement, et (tenter d') être créatif. Un message, une animation, tout peut être envisagé à condition d'être à-propos.

Une remarque d'importance: pour respecter le caractère impératif de la présence de ce lien-surpise sur la page, on est amené à ne pas créer ce lien par javascript, comme on le fait par agilité la plupart du temps. Si ce lien n'est pas impératif et ne sert qu'à faire la surprise, on créera au contraire ce lien par javascript.

Enfin, on peut également améliorer le système avec un cookie ou session storage, de façon à permettre de ne faire la surprise qu'une fois (en fait, jusqu'à expiration, la modification ou destruction du cookie ou de la session de session storage), ou de laisser le choix à l'utilisateur.
 
 



 
Pour expliquer plus en détail la démarche, je propose de montrer un exemple où le lien cliqué déclenche une animation. C'est un "vrai" lien, donc celui-ci est écrit en dur dans le HTML, et non généré par javascript. En revanche, l'animation est constituées d'images qui n'ont rien à faire sur la page sinon, et n'apparaissent qu'au clic sur le lien: tout cela sera donc non présent dans le code HTML, mais généré via javascript.
 
Enfin, dans cet exemple animé, l'utilisation de la bibliothèque jQuery peut simplifier les instructions à écrire, donc c'est cette syntaxe que j'utiliserai dans cet exemple.
 
 
Commençons à placer sur une page HTML le petit code suivant:

<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	
	<style>

	body{
		background: #999;
		color: white;
		font-family: sans-serif;
		text-align: center;}
			
	a{color: orange; font-weight: bold;}

	#bloc-demo a{
		display: block;
		width: 50%;
		margin: 2rem auto;
		padding: 2rem 0;
		background-color: orange;
		color: white;
		font-size: 1.5rem;
		text-decoration: none;}
		
		    
        #surprise{
		background: #bbb;
		width: 40rem;
		height: 40rem;
		margin: 0 auto;
		border-radius: 50%;
		border: solid 30px #666;
		position: relative;
		overflow: hidden;}
	
	#surprise img{
		width: 10%;
		position: absolute;
		top: 40rem;}
	
	#soucoupe_volante-1{left: -20%;}
	#soucoupe_volante-2{left: 0;}
	#soucoupe_volante-3{left: 20%;}
	#soucoupe_volante-4{left: 40%;}
	#soucoupe_volante-5{left: 50%;}
	#soucoupe_volante-6{left: 60%;}
	#soucoupe_volante-7{left: -40%;}
	
	
	#rocket{left: -10%;}
		
	</style>

</head>


<body>
	<div id="bloc-demo">
	
		<a href="cible.html">Mon lien-surprise</a>


	</div>		
		
	<p>Soucoupes et fusée:  <a target="_blank" href="http://www.iconarchive.com/artist/visualpharm.html">VisualPharm</a></p>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
	<script>
	
	//on créé les soucoupes
	
	$("#bloc-demo a").after('<p style="position: relative;" id="surprise"><img src="images/soucoupe.png"  id="soucoupe_volante-1" /><img src="images/soucoupe.png" id="soucoupe_volante-2" /><img src="images/soucoupe.png" id="soucoupe_volante-3" /><img src="images/soucoupe.png" id="soucoupe_volante-4" /><img src="images/soucoupe.png" id="soucoupe_volante-5" /><img src="images/soucoupe.png" id="soucoupe_volante-6" /><img src="images/soucoupe.png" id="soucoupe_volante-7" /><img src="images/rocket.png" id="rocket" /></p>');
	
	// au clic sur le lien ...
	$("#bloc-demo a").click(function(event){
		
		//on ne suit pas le lien tout de suite ...
		event.preventDefault();
		// en revanche on prend note de son attribut href :)
		var link=$(this).attr("href");
		
		// l'intitulé du lien fait place nette ...		
		$("#bloc-demo a").animate({'opacity':'0'},1000);
		
		
		// On fait appraitre le bloc contenant la surprise
		$("#surprise").css({'display':'block'});
		
		// et les soucoupes s'envolent ...
		$("#soucoupe_volante-1").animate({'top':'-5rem','left':'50%','opacity':'1'},2000);
		$("#soucoupe_volante-2").delay(250).animate({'top':'-5rem','left':'70%','opacity':'1'},2000);
		$("#soucoupe_volante-3").delay(1000).animate({'top':'-5rem','left':'15%','opacity':'1'},1500);
		$("#soucoupe_volante-4").delay(500).animate({'top':'-5rem','left':'40%','opacity':'1'},2000);
		$("#soucoupe_volante-5").delay(1000).animate({'top':'-5rem','left':'30%','opacity':'1'},1500);
		$("#soucoupe_volante-6").delay(750).animate({'top':'-5rem','left':'30%','opacity':'1'},1500);
		$("#soucoupe_volante-7").delay(750).animate({'top':'-5rem','left':'70%','opacity':'1'},1500);
		$("#rocket").delay(2000).animate({'top':'-5rem','left':'65%','opacity':'1'},1500, 
		
		function(){
			// discrêtement, les soucoupes et le lien reviennent à  leur place initiale (en cas de retour du visiteur)
			
			//$("#raccourci-realisations a").animate({'opacity':'1'},1000);
			$('#soucoupe_volante-1').css({'top':'40rem','left':'-20%','opacity':'0.4'});
			$('#soucoupe_volante-2').css({'top':'40rem','left':'0','opacity':'0.4'});
			$('#soucoupe_volante-3').css({'top':'40rem','left':'20%','opacity':'0.7'});
			$('#soucoupe_volante-4').css({'top':'40rem','left':'40%','opacity':'0.5'});
			$('#soucoupe_volante-5').css({'top':'40rem','left':'20%','opacity':'0.7'});
			$('#soucoupe_volante-6').css({'top':'40rem','left':'30%','opacity':'0.5'});
			$('#soucoupe_volante-7').css({'top':'40rem','left':'-40%','opacity':'0.6'});
			$('#rocket').css({'top':'40rem','left':'-10%','opacity':'0.8'});
			
			// l'intitulé du lien refait son apparition ...		
			$("#bloc-demo a").animate({'opacity':'1'},1000);
		
			// on suit le lien ...
			window.location.href =link;
		});
	}); 
	
	</script>
</body>
</html>


Vous remarquerez qu'il vous manque les images. :D
Elles sont dans le zip en téléchargement à la fin de l'article.


Et vous avez la démo à cet endroit: http://infomars.fr/f...ien-surprise-1/

Fichier(s) joint(s)



#2 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 03 janvier 2016 - 10:41

Une participation intempestive à ce sujet m'a fait l'abandonner sur le moment,

un peu saoulé à vrai dire par le troll intervenant.



Le ménage vient d'être fait, et le sujet va pouvoir reprendre avec un peu plus d'enthousiasme bientôt.

 

EDIT: la démo est en ligne !



#3 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 25 mars 2021 - 19:00

MAJ de la version de jQuery pour que la démo re-fonctionne.





0 utilisateur(s) en train de lire ce sujet

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)