41Mag - Tutoriel : Un cadre de partage qui s’affiche lorsque la page défile vers le bas – Animation jQuery

Tutoriel : Un cadre de partage qui s’affiche lorsque la page défile vers le bas – Animation jQuery

Dans ce tutoriel, nous allons vous détaillé comment créer un cadre de partage (Facebook …) qui s’affichera au défilement de la page avec une animation en jQuery. Cette technique est de plus en plus employé sur de nombreux sites.

Ne vous est-il jamais arrivé de voir un bandeau ou un cadre apparaitre dans le coin inférieur droit de votre écran pour vous proposer un article relatif à celui que vous lisez ?

Dans ce  tutoriel, nous utiliseront ce procédé pour essayer d’accroitre le nombre d’abonnés à nos réseaux sociaux. Pour notre exemple, nous avons choisis d’afficher un cadre proposant aux visiteurs de vous rejoindre sur faceBook. Vous pouvez le modifier comme bon vous semble, il ne s’agit ici que d’une utilisation parmis tant d’autres.

Nous vous détaillerons pas à pas les différentes étapes de création. Bien qu’elle ne soit pas obligatoire, une connaissance minimum en HTML5 est souhaitée pour la compréhension. En savoir plus sur  : le HTML5, tutoriel complet.

Cadre de partage s'affichant au défilement de la page

Le résultat final

Introduction

Nous procèderons de la manière suivante :

  • Création d’une page web pour notre exemple, elle sera compose d’un titre et de plusieurs paragraphes.
  • Création d’un cadre en HTML5.
  • Intégration du code facebook like box dans notre cadre.
  • Mise en forme du cadre en CSS
  • Animation en jQuery du cadre

Code source en HTML5 : le corps de la page

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Demo scrollTop</title>
 
        <!-- Integration de police de caractère Google web fonts  -->
        <link href='http://fonts.googleapis.com/css?family=Glass+Antiqua|Seaweed+Script|Advent+Pro' rel='stylesheet' type='text/css'>
 
</head>
 
<body>
 
<h1>Démo scrollTop</h1>
 
<p> Faites défiler la page vers le bas pour faire apparaitre le cadre de partage <em>Facebook</em></p>
 
<article>Qui cum venisset ob haec ... </article>
<article>Qui cum venisset ob haec ... </article>
<article>Qui cum venisset ob haec ... </article>
<article>Qui cum venisset ob haec ... </article>
<article>Qui cum venisset ob haec ... </article>
 
<footer>
<p>Copyright - <a href="http://www.41mag.fr">41Mag</a></p>
</footer>
 
</body>
</html>

Les lignes de code ci-dessus étant suffisamment simple à comprendre, nous n’apporterons aucune explications. En savoir plus sur le corps d’un document HTML5.

Au ligne 5 et 6, nous intégrons une police de caractère Google. En savoir plus sur Google Web fonts.

Ce code source HTML5 est censé représenter votre page web. Nous l’avons crée à titre d’exemple, de support pour notre cadre de partage. Nous avons ajoutés plusieurs articles, suffisamment long, pour que nous puissions faire défiler notre page.

Création du cadre en HTML5

Cette étape est particulière car nous allons créer un cadre sans rien y mettre à l’intérieur. Le contenu de ce cadre nous sera fournis par facebook. Nous intégrerons ce code dans le chapitre suivant.

Nous allons donc créer un cadre vide à l’aide des balises <div>. Nous lui ajouterons un identifiant pour lui appliquer des styles CSS plus facilement.

1
2
3
<div id="cadre">
<!--  Emplacement du code fournis pas facebook  -->
</div>

Placez les lignes de code ci-dessus dans le corps de votre document, ou vous souhaitez, entre les balises <body> et </body>.

Intégration du script facebook de la like-box

Nous allons utiliser le très populaire widget de FaceBook : Like-box. Pour commencer, rendez-vous à l’adresse suivante : http://developers.facebook.com/docs/reference/plugins/like-box/

Nous allons devoir paramètrer ce widget :

  • Indiquez votre adresse faceBook (www.facebook.com/votre-identifiant)
  • Indiquez une longueur de 300px
  • Indiquez une hauteur de 120px
  • Décochez la case Stream

like-box Facebook

Il ne vous reste plus qu’à cliquer sur Get code. Choisissez l’onglet correspondant au type d’intégration que vous souhaitez. Pour notre exemple, nous avons fait au plus simple et nous avons donc choisis le type : iFrame.

iFrame Like-box

Selectionnez le script en entier et faites un copier / coller. Il ne vous reste plus qu’à le coller entre les balises <div> de notre cadre. Comme dans l’exemple ci-dessous :

1
2
3
<div id="cadre">
	<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fle41mag&amp;width=300&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowTransparency="true"></iframe>
</div>

Mise en forme du cadre en CSS

Au moment ou nous avons crée notre cadre vide, je vous ai demandé de le placer à l’endroit que vous souhaitiez entre les balises <body> et </body>.

Mais notre cadre ne s’affiche pas en bas à droite de notre écran et il n’est pas fixe, comment faire ?

Pour ajuster le positionnement de notre cadre nous allons utiliser une feuille de styles. Pour commencer, nous allons créer une feuille de style qui s’appellera : styleScrollTop.css

Ajoutez-lui les lignes de code ci-dessous :

1
2
3
4
5
6
7
8
9
10
11
12
13
#cadre {
	position:fixed;
	right:20px;
	bottom:20px;
	background:#fff;
	width:300px;
	height:120px;
	margin:0px;
	padding:0px;
	border:3px solid #3662a0;
	overflow:hidden;
	box-shadow:3px 3px 9px #777;
}

Les lignes 2, 3 et 4 définissent la position du cadre. Il sera fixe, la page pourra donc défiler sans qu’il ne bouge de sa position, et se situera à 10 pixels du bord droit et à 10 pixels du bas (afin d’être légèrement décollé de l’écran).

La ligne 11 indiquera au navigateur de cacher tous ce qui dépasse du cadre. Très pratique !

Il ne nous reste plus qu’à relier cette feuille de style. Dans le code source de la page HTML5, dans l’en-tête, entre les balises <head> et </head>, ajoutez la ligne de code ci-dessous :

1
<link rel="stylesheet" href="styleScrollTop.css" />

Notre cadre de partage est maintenant bien placé. Il se situe en bas à droite de notre écran et affiche le widget de facebook. Il ne nous reste plus qu’à l’animer pour qu’il soit invisible et n’apparaisse qu’apres le défilement de la page, lorsque le visiteur arrive vers le bas de celle-ci.

L’animation en jQuery

Nous utiliserons la biliothèque jQuery pour animer notre cadre. Commencez par télécharger la dernière version de jQuery et reliez-le à votre document en ajoutant la ligne de code ci-dessous entre les balises <head> et </head> :

1
2
<!-- jQuery  -->
<script src="js/jquery-1.4.3.min.js"></script>

Ajouter le script jQuery ci-dessous pour animer le cadre de partage. Il deviendra invisible et n’apparaitra que si la page défile suffisamment vers le bas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
   $(document).ready(function() {
 
   $("#cadre").hide();
 
   $(window).scroll(function () {
			if ($(this).scrollTop() > 300) {
				$('#cadre').fadeIn();
			} else {
				$('#cadre').fadeOut();
			}
		});
});
   </script>

Placez ce script entre les balises <body> et </body>.

A la ligne 7, nous avons mis par défaut la valeur 300. Vous pouvez modifier cette valeur comme bon vous semble pour faire apparaitre le cadre soit plus haut (en baissant cette valeur) soit plus bas (en augmentant cette valeur).

Le code source complet, le script jQuery et la feuille de style

Le code source HTML5 : le fichier scrollTop.HTML

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Demo scrollTop</title>
 
        <!-- jQuery  -->
	<script src="js/jquery-1.4.3.min.js"></script>
 
        <!-- Feuille de style -->
	<link rel="stylesheet" href="styleScrollTop.css" />
 
        <!--  Google web fonts  -->
        <link href='http://fonts.googleapis.com/css?family=Glass+Antiqua|Seaweed+Script|Advent+Pro' rel='stylesheet' type='text/css'>
 
 
</head>
<body>
 
   <script>
   $(document).ready(function() {
 
   $("#cadre").hide();
 
   $(window).scroll(function () {
			if ($(this).scrollTop() > 300) {
				$('#cadre').fadeIn();
			} else {
				$('#cadre').fadeOut();
			}
		});
});
   </script>
 
<h1>Démo scrollTop</h1>
 
 
<div id="cadre">
	<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fle41mag&amp;width=300&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowTransparency="true"></iframe>
</div>
 
	<p class="presentation"> Faites défiler la page vers le bas pour faire apparaitre le cadre de partage <em>Facebook</em></p>
 
	<article>Qui cum venisset ob haec festinatis itineribus ...</article>
	<article>Qui cum venisset ob haec festinatis itineribus ...</article>
	<article>Qui cum venisset ob haec festinatis itineribus ...</article>
	<article>Qui cum venisset ob haec festinatis itineribus ...</article>
	<article>Qui cum venisset ob haec festinatis itineribus ...</article>
 
<footer>
 
<p>Copyright - <a href="http://www.41mag.fr">41Mag</a></p>
 
</footer>
 
</body>
</html>

La feuille de style : le fichier styleScrollTop.CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
#cadre {
	position:fixed;
	right:20px;
	bottom:20px;
	background:#fff;
	width:300px;
	height:120px;
	margin:0px;
	padding:0px;
	border:3px solid #3662a0;
	overflow:hidden;
	box-shadow:3px 3px 9px #777;
}

Article du même thême : ...

  • http://www.facebook.com/dominicdesbiens Dominic Desbiens

    Dommage le téléchargement de votre PDF ne fonctionne pas.

    • http://41mag.fr 41Mag

      Le téléchargement remarche.
      En vous présentant nos excuses pour les perturbations.

  • Pingback: HTML5 & CSS3 | Pearltrees

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.