Editions ENI Livres | Vidéos | e-Formations
Des bibliothèques pour dynamiser les sites
Les bibliothèques JavaScript
Dans ce chapitre, nous allons aborder quelques bibliothèques JavaScript qui vont vous permettre de dynamiser vos pages web. Sachez qu’il existe des milliers de bibliothèques JavaScript. Certaines ne fonctionnent qu’en JavaScript "pur" et d’autres fonctionnent avec des frameworks JavaScript comme jQuery, qui est la plus célèbre. Dans les exemples qui suivent, nous n’allons étudier que des bibliothèques JavaScript sans dépendances.
Avec les connaissances que vous avez acquises dans les chapitres précédents, vous avez toutes les capacités nécessaires pour comprendre et personnaliser ces scripts.
Nous n’allons pas étudier chaque bibliothèque de manière exhaustive, en détaillant chaque option disponible. L’objectif est que vous compreniez comment ces bibliothèques fonctionnent et que vous puissiez mettre en œuvre rapidement ces scripts dans vos pages web. Ensuite, cela sera à vous d’approfondir le paramétrage de ces scripts en étudiant leur documentation, pour aller plus loin dans leur exploitation, pour les personnaliser à vos besoins. Puis, la dernière étape sera de créer vos propres scripts.
La bibliothèque Anime
1. Les objectifs
La bibliothèque anime.js (http://animejs.com) nous propose toute une série de scripts qui vont permettre d’animer des éléments des interfaces de nos pages web. Ces animations vont s’appliquer sur des propriétés CSS3, des transformations CSS3 et des animations CSS3.
Cette bibliothèque fournit les bases de la programmation à travers une documentation fournie, accessible par le bouton Documentation sur la page d’accueil (http://animejs.com/documentation/).
C’est ensuite aux développeurs de s’appuyer sur ces bases pour développer leurs propres applications, les animations qui répondent à leurs besoins. Nombre d’entre eux nous proposent leurs créations via le célèbre site de partage de code codepen.io (https://codepen.io). Ces créations sont accessibles via le bouton Codepen sur la page d’accueil (https://codepen.io/collection/XLebem/).
2. Installer la bibliothèque
La première étape consiste à installer la bibliothèque et à la lier aux pages qui utiliseront cette bibliothèque.
Pour installer la bibliothèque anime.js dans vos pages web, sur la page d’accueil du site, cliquez sur le bouton Github.
Dans la zone Usage, cliquez sur le lien download pour télécharger la bibliothèque.
Vous téléchargez une archive nommée anime-master.zip.
Décompressez cette archive pour obtenir un dossier nommé anime-master.
Vous pouvez utiliser le fichier anime.js qui est non minimisé et qui pèse 31 ko pour étudier le code JavaScript. Le fichier anime.min.js est plutôt fait pour la production, puisqu’il est minimisé et qu’il ne pèse que 14 ko.
Placez le fichier anime.min.js dans le dossier de votre choix (js, par exemple), ou à la racine du dossier de votre site web.
Dans chaque fichier .html, vous devez lier cette bibliothèque pour exploiter ses fonctionnalités, avec l’élément HTML <script>.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma page</title>
</head> ...La bibliothèque Animate On Scroll
1. Les objectifs
La bibliothèque Animate On Scroll (https://michalsnik.github.io/aos/) va permettre d’afficher des éléments HTML, des boîtes <div> contenant des images, du texte..., avec des effets d’apparition divers, lorsque ces éléments arriveront à l’écran lors de l’utilisation de la barre de défilement vertical.
De nombreux exemples vous sont proposés sur la page d’accueil du site et ils apparaîtront en utilisant la barre de défilement vertical :
Toute la documentation technique se trouve sur GitHub : https://github.com/michalsnik/aos
2. Installer la bibliothèque
Pour exploiter cette bibliothèque, vous devez bien sûr l’installer et l’initialiser :
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
Vous devez aussi utiliser ses règles CSS, accessibles depuis un CDN :
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"
rel="stylesheet">
Voici la page complète avec les liaisons CSS et JS, sans aucune animation :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma page</title>
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"
rel="stylesheet">
</head>
<body>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js">
</script>
<script>
AOS.init();
</script>
</body>
</html>
3. Les éléments d’animation
Dans cet exemple, nous...
La bibliothèque Cleave
1. Les objectifs
La bibliothèque Cleave (http://nosir.github.io/cleave.js/) permet d’effectuer des vérifications et des validations de motifs de saisie dans les formulaires. Les motifs de saisie, patterns en anglais, sont des règles qui concernent les caractères à saisir ou à ne pas saisir, que doivent respecter les champs de saisie.
Les champs utilisables sont de nombreux types et il existe de nombreuses options pour chaque type de champ. Vous avez à votre disposition une documentation détaillée sur le GitHub de cette bibliothèque : https://github.com/nosir/cleave.js
2. Installer la bibliothèque
Pour installer Cleave, vous pouvez télécharger le fichier cleave-react.min.js minimisé à cette URL : https://github.com/nosir/cleave.js/tree/master/dist
Dans le dossier de votre site web, placez ce fichier où cela vous semble le mieux. Dans cet exemple simple, le fichier est à la racine du dossier du site.
Ensuite, vous faites une liaison classique au fichier .js :
<script src="cleave.min.js"></script>
Voici la structure de la page qui va servir dans l’exemple qui va suivre :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma page</title>
</head>
<body>
<script src="cleave.min.js"></script>
</body>
</html>
3. Le champ de saisie de la date
Dans cet exemple simple, nous allons utiliser la bibliothèque pour trois types de champ de saisie :
-
saisie d’une date,
-
saisie d’un nombre,
-
saisie d’un code composé de caractères devant répondre à un motif précis.
Le premier champ de saisie utilisé est un champ dans lequel l’utilisateur doit saisir une date avec un format précis : l’année en quatre chiffres, le mois et le jour en deux chiffres.
Voici le champ dans le formulaire qui utilise la classe .input-date :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma...La bibliothèque Granim
1. Les objectifs
La bibliothèque Granim (https://sarcadass.github.io/granim.js/index.html) permet de dynamiser vos pages web en animant des dégradés. Vous en avez la démonstration dès la page d’accueil du site.
Pour visualiser les différents effets des dégradés animés, cliquez sur le bouton Examples :https://sarcadass.github.io/granim.js/examples.html
Pour connaître tous les paramètres d’utilisation de cette bibliothèque, cliquez sur le bouton API (https://sarcadass.github.io/granim.js/api.html).
2. Installer la bibliothèque
Comme toujours, la première étape consiste à installer la bibliothèque dans vos pages web.
Dans la page d’accueil du site de Granim, cliquez sur le bouton Download.
Puis, sur la page du GitHub de Granim, téléchargez la dernière version disponible.
Vous téléchargez une archive nommée granim.js-1.1.1.zip. Le numéro est fonction de la version téléchargée, bien sûr.
Décompressez cette archive.
Dans le dossier dist, copiez le fichier JavaScript minimisé de Granim, granim.min.js.
Dans le dossier de votre site, placez ce fichier là où vous le souhaitez.
Dans chaque page HTML qui doit utiliser cette bibliothèque, faites une liaison au fichier JavaScript :
<script src="granim.min.js"></script>
Dans cet exemple, le fichier JavaScript est placé à la racine du dossier contenant le fichier HTML.
Voici la structure initiale de la page utilisée dans ces exemples :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma page</title>
</head>
<body>
<script src="granim.min.js"></script>
</body>
</html>
3. Créer un dégradé animé avec trois teintes
Dans ce premier exemple, nous allons créer un dégradé qui va utiliser trois jeux de couleurs.
Attention, l’élément HTML qui va contenir le dégradé doit être un élément...
La bibliothèque Tippy
1. Les objectifs
La bibliothèque Tippy (https://atomiks.github.io/tippyjs/) permet d’insérer des bulles d’aide pouvant afficher du texte, des images ou tout autre élément HTML.
Pour fonctionner, Tippy s’appuie sur une autre bibliothèque JavaScript, Popper (https://popper.js.org). La documentation de Tippy se trouve sur GitHub : https://github.com/atomiks/tippyjs
2. Installer la bibliothèque Tippy
L’installation de Tippy se fait par une simple liaison vers un CDN, juste avant la balise de fermeture </body> :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma page</title>
</head>
<body>
...
<script src="https://unpkg.com/tippy.js/dist/tippy.all.min.js"></script>
</body>
</html>
Notez que l’installation du fichier .js installe aussi les règles CSS utilisées par les bulles d’aide.
3. Ajouter une bulle d’aide textuelle simple
Dans ce premier exemple, nous allons ajouter une bulle d’aide à un texte. Le texte associé à la bulle d’aide devra pouvoir être référencé par un identifiant id. Le texte de la bulle d’aide est placé dans l’attribut title de ce texte.
Voici l’élément HTML utilisé :
<p>Le <span class="tippy" id="doges" title="Le palais des Doges ou palais
Ducal est un palais vénitien de styles gothique et Renaissance situé sur la
place Saint-Marc.">Palais des doges</span>.</p>
Voici ce code simple :
-
Toute la phrase est insérée dans un simple élément <p>.
-
Le texte activant la bulle d’aide est placé dans un élément <span>.
-
Cet élément utilise la classe .tippy pour sa mise en forme.
-
Cet élément possède l’identifiant id="doges".
-
Cet élément utilise bien l’attribut title, avec le texte pour la bulle d’aide.
Voici la règle CSS span.tippy, placée dans l’élément...
La bibliothèque Micron
1. Les objectifs
Cette très légère bibliothèque va permettre de dynamiser les boutons avec de petites animations. Voici son URL sur GitHub : https://github.com/webkul/micron
Sa documentation est aussi sur GitHub : https://webkul.github.io/micron/docs.html
2. L’installation de la bibliothèque
Pour installer cette bibliothèque, vous devez lier son fichier .js et son fichier .css à un CDN, dans l’élément <head> de vos fichiers .html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma page</title>
<link
href="https://unpkg.com/webkul-micron@1.1.4/dist/css/micron.min.css"
type="text/css" rel="stylesheet">
<script
src="https://unpkg.com/webkul-micron@1.1.4/dist/script/micron.min.js"
type="text/javascript"></script>
</head>
<body>
...
</body>
</html>
3. Insérer un bouton animé
Nous allons insérer un bouton avec l’élément <button> et avec la classe .boutons pour sa simple mise en forme :
<button class="boutons">Mon...
