Pour les développeurs de sites Web, l'ajout d'un effet de glissement ou de carrousel au contenu d'affichage est un besoin très courant. Il y a tellement de plug-ins de carrousels payants et gratuits. Beaucoup d'entre eux offrent de nombreuses options de configuration et effets dynamiques utiles.
Plusieurs fois, si votre projet a besoin d'un carrousel léger, il ne nécessite pas beaucoup de fonctionnalités. Dans le même temps, votre projet consiste à utiliser Bootstrap (le cadre frontal open source le plus populaire). Vous pouvez vous référer au composant Bootstrap officiel.
Cet article vous montrera comment ajouter des effets d'animation intéressants au carrousel bootstrap. Dans le même temps, assurez-vous que ce composant JS est librement élargi et a rapidement commencé.
Introduction à Animate.css
Afin de faire l'effet d'animation que je me suis écrit digne d'éloges, j'ai utilisé une très célèbre bibliothèque d'animation CSS3 open source, qui s'appelle très bien Animate.css. Écrit par Dan Eden.
C'est le code qui me permet de me concentrer sur la tâche à accomplir, plutôt que d'expliquer les animations CSS3.
L'utilisation d'Animate.css nécessite 2 étapes:
1. Présentez Animate.min.css dans le document HTML.
2. Ajoutez la classe Animated Yourchosenanimation aux éléments pour être l'animation dans la page Web.
Ensuite, vous utilisez le nom de la classe sur les animations que vous voyez sur le site Web animate.css pour remplacer votre Association.
Présentation du composant carrousel bootstrap
Le composant carrousel bootstrap a trois pièces principales.
--- Le carrousel indique le nombre de pages affichées sur la diapositive , fournissant à l'utilisateur un indice visuel et fournissant une navigation coulissante.
--- Entrée du carrousel , une classe appelée .carousel-inner, contenue dans la frontière extérieure. Représente chaque curseur indépendant. Les photos peuvent être placées dans chaque image. Vous pouvez également ajouter un titre. Vous pouvez également ajouter le nom de la classe de caption de carrousel sur l'élément HTML. Bootstrap aura son propre style. Nous pouvons ajouter des animations via ces éléments.
--- Enfin, il y a la flèche de contrôle du carrousel , qui est la fonction qui permet à l'utilisateur de glisser d'avant en arrière.
Afin d'afficher simplement la démo, aucune photo ne sera ajoutée. Concentrez-vous d'abord sur le cadre du carrousel en tant qu'animation.
Bâtiment Structure HTML
Voici ceux que vous devez citer dans votre projet:
jquery
CSS et JavaScript de bootstrap
Animate.css
Une feuille de style et une documentation JS.
Afin d'accélérer le processus de développement, les modèles et les fichiers nécessaires sont référencés sur le site officiel de Bootstrap.
Vous trouverez ci-dessous le code du carrousel bootstrap :
<div id = "Carousel-Example-Generic" Data-ride = "Carousel"> <! - Indicateurs -> <Ol> <li Data-Target = "# Carousel-Example-Generic" Data-Slide-to = "0"> </li> <li Data-Target = "# Caousesel-Example-Generic" Data-Slide-to = "1"> </li> <li Data-Target = "# Carousel-Example-Generic" Data-Slide-to = "2"> </li> </l> <! - Wrapper pour les diapositives -> <div role = "Listbox"> <! - First Slide -> <div> <div> <h3 Data-Animation = "Animated Bounceinleft"> Aimitation pour la diaporama 1 </h3> <h3 Ceci est la légende de la diapositive 1 </h3> <Button Data-Animation = "Animated Zouinup"> Button </utton> </div> </div> <! - /.item -> <! - Deuxième diapositive -> <v> <v> <h3 Data-Animation = "Animated Bounceindown"> <pander> </spane Bounceinup "> Ceci est la légende de la diapositive 2 </h3> <Button Data-Animation =" Animated ZoomRight "> Button </ Button> </div> </ div> <! - /.Item -> <! - Third Slide -> <div> <h3 Data-Animation =" Animated Zoomation "> <pander> </pande> </h3> <h3 Data-animation =" Animate Flipinx "> Ceci est la légende de la diapositive 3 </h3> <Button Data-Animation =" Animated LightSpeedIn "> Button </ Button> </div> </div> <! - /.Item -> </div> <! - /.carel-inner -> <! aria-hidden = "true"> </span> <span> précédent </span> </a> <a href = "# carousel-example-generic" role = "Button" data-slide = "Next"> <span aria-hidden = "true"> </span> <span> suivant </span> </a> </v> <! - /.carousel ->>
Si le code ci-dessus n'est pas faux, vous verrez un carrousel qui peut fonctionner lors de l'ouverture dans le navigateur. Tout ci-dessus ne contient pas de ligne de code JavaScript. Si vous n'ajoutez aucune image,
Il suffit d'ajouter de la valeur min-hauteur au bloc de classe .carel.
Ajoutez un animation de données d'attribut d'animation aux éléments du titre du carrousel, en utilisant cette bibliothèque d'animation spéciale comme valeur.
Si vous souhaitez découvrir d'autres animations de la bibliothèque Animate.CSS, utilisez le nom de la classe d'animation de votre choix au lieu de la valeur de la propriété d'animation de données.
Nous utilisons la valeur d'attribut Data-Animation dans le code JavaScript.
Bien qu'un simple carrousel automatique puisse être trouvé dans certains cas, nous avons plus de contrôle sur ce cas.
Dans la première étape de cette direction, supprimez la valeur Data-Ride = "Carousel" de l'élément et initialisez la valeur d'attribut de ride de données sans écrire de code. Cependant, nous avons l'intention d'utiliser le code JS pour contrôler le carrousel, de sorte que cette propriété de ride de données n'est pas nécessaire.
Ajouter le style CSS au carrousel
Utilisez maintenant votre créativité pour ajouter des styles au titre du carrousel en fonction de vos préférences. Les règles de style que je vais écrire sont des démos qui fonctionnent en douceur.
Plus précisément, nous augmentons le contrôle des propriétés de retard d'animation. Définissez lorsque chaque animation démarre (notez que pour une démonstration simple, le préfixe du navigateur est omis)
.Carousel-caption h3: premier-enfant {animation-delay: 1s;}. Carousel-caption h3: nth-child (2) {animation-delay: 2s;}.Dans l'extrait de code ci-dessus, assurez-vous que l'animation d'élément commence de manière ordonnée. D'autres effets peuvent être effectués. Par exemple, vous pouvez sélectionner les deux premiers titres à apparaître en même temps. Ensuite, il y a le bouton du bouton. Vous pouvez décider par vous-même et vous amuser.
Écrivez le code jQuery:
Nous commençons à initialiser ce carrousel et à ajouter le code à votre fichier JavaScript personnalisé:
var $ myCaRousel = $ ('# carrousel-example-generic'); // initialiser le carrousel $ mycarel.carel ();Nous avons mis en place le carrousel dynamiquement, et ensuite, résolvons cette animation.
Afin d'animer le titre de la première diapositive, le script doit s'exécuter après la charge de la page dans le navigateur. Le diaporama suivant entre dans notre champ de vision sous animation, et notre code s'exécute sur l'événement Slide.bs.carel. Ce qui signifie que le même code s'exécute deux fois: la page se charge une fois et l'événement Slide.bs.carel une fois.
Parce que nous aimons suivre le principe de non-répétition, nous avons l'intention de résumer notre code dans les fonctions et de les référencer le cas échéant.
Code:
fonction doanimations (elems) {var animendev = 'webkitanimationend animationEnd'; elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ('animation'); // ajouter des classes animate.css à // les éléments à être animés // supprimer animate.cssSs // Une fois que l'événement d'animation a terminé $ this.addclass ($ animationType) .One (animeNev, function () {) {) {) {) {) {). $ this.reMoveClass ($ AnimationType);});});} // Sélectionnez les éléments à animer // dans la première diapositive sur la page: FirstaniMating functionDoanimations ($ FirstaniMatingElems); // pause le carrousel $ myCaRousel.carel ('pause'); // attache notre fonction doanimations () à la // carrousel's Slide.bs.carel $ (e.relatedTarget) .find ("[data-animation ^ = 'animé']"); doanimations ($ AnimatingElems);});Analysons le code ci-dessus.
Regardez la fonction doanimations ()
Les tâches effectuées par cette fonction doanimations () sont les suivantes.
Il commence par des chaînes de cache contenant le nom d'événement AnimationEnd dans la variable. Cet événement nous dit que vous avez peut-être deviné quand chaque animation se termine. Nous avons besoin d'informations pour ce point, car une fois que chaque animation est terminée, nous supprimons la classe Animate.css. Si nous ne faisons pas le retrait, le titre du carrousel n'aura qu'une animation qu'une seule fois, c'est-à-dire affichant simplement une diapositive spécifique dans le premier carrousel.
var animationEndEv = 'webkitanimationNend animationEnd';
Ensuite, notre fonction fait des boucles via chaque élément que nous voulons avoir une animation et obtenir la valeur de la propriété de l'animation des données. Pensez à ce qui est mentionné ci-dessus, cette valeur contient la classe animate.css que nous voulons ajouter à l'élément afin qu'il ait un effet d'animation.
elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ('animation'); // etc ...});Enfin, la fonction doanimations () ajoute dynamiquement à chaque élément de la classe animate.css pour exécuter l'animation. Lorsque l'animation se termine, une écoute d'événement est également attachée. Une fois l'animation terminée, nous supprimons la classe ajoutée d'Animate.css. Cela garantit que le prochain carrousel est de retour à la zone actuelle. (Vous essayez de supprimer ce code et de voir ce qui se passe)
$ this.addclass ($ AnimationType) .One (animeDev, function () {$ this.removeclass ($ animationType);});La première animation de titre
Lorsque la page se charge dans le navigateur, nous animons le contenu dans la première diapositive:
var $ FirstAnimatingElems = $ myCaRousel.find ('. Item: First') .find ("[Data-Animation ^ = 'Animated']"); Doanimations ($ FirstaniMatingElems);Dans ce code, nous trouvons la première lumière, nous voulons obtenir la valeur de l'attribut d'animation du titre de l'animation en utilisant des animations de données. Ensuite, nous transmettons la variable $ FirstAnimatingElems en tant que paramètre à la fonction doanimations (), puis exécutons la fonction.
Fonction d'arrêt du carrousel
Lorsque le contenu du premier écran a été exécuté, nous arrêtons cette fonction de carrousel.
$ myCarel.carel («pause»);
Il s'agit d'une caractéristique dans laquelle le composant carrousel bootstrap empêche la rotation constante. Une rotation constante peut rendre les visiteurs malheureux.
Dans ce cas, je recommande de m'assurer que le carrousel ne boucle pas directement à la lumière suivante jusqu'à ce que toutes les animations fonctionnent. Cela peut être contrôlé en définissant l'option "Interval" dans le code d'initialisation:
$ myCarel.carel ({interval: 4000});À mon avis, un titre de carrousel en boucle infinie saute chaque fois que la glissière dans la vue n'est pas idéale.
Animation du titre de la diapositive du carrousel
Les étapes décrites ci-dessous sont nécessaires pour devenir visibles pour le titre de carrousel animé de chaque diapositive.
Tout d'abord, nous ajoutons un écouteur d'événements sur Slide.bs.carel.
L'événement se déclenche immédiatement lorsque la méthode d'instance de diapositive est appelée.
$ myCaRousel.on ('Slide.bs.carel', fonction (e) {// Do Stuff ...});Ensuite, nous sélectionnons les lumières actuelles et trouvons les éléments que nous voulons ajouter des animations. Le code suivant utilise la propriété .RelatedTarget de l'événement Slide.bs.carel pour lier l'animation.
var $ AnimatingElems = $ (e.relatedTarget) .find ("[data-animation ^ = 'animated']");
Enfin, nous appelons la fonction doanimations () et passons $ AnimatingElems comme paramètre.
Doanimations ($ AnimatingElems);
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher deux sujets passionnants: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap
Merveilleux sujet Partage: JQUERY Picture Carrousel Javascript Picture Carrousel Bootstrap Picture Carrousel
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.