Für Website -Entwickler ist das Hinzufügen eines Gleit- oder Karussffeffekts zum Anzeigeinhalt ein sehr häufiges Bedürfnis. Es gibt so viele bezahlte und kostenlose Karussell-Plug-Ins. Viele von ihnen bieten viele nützliche Konfigurationsoptionen und dynamische Effekte.
Wenn Ihr Projekt ein leichtes Karussell benötigt, erfordert es zwar nicht viele Funktionen. Gleichzeitig besteht Ihr Projekt darin, Bootstrap (das beliebteste Open-Source-Front-End-Frontwork) zu verwenden. Sie können sich auf die offizielle Bootstrap -Komponente beziehen.
In diesem Artikel wird Ihnen angezeigt, wie Sie dem Bootstrap -Karussell interessante Animationseffekte hinzufügen. Stellen Sie gleichzeitig sicher, dass diese JS -Komponente frei erweitert und schnell begonnen wird.
Einführung in Animate.css
Um den Animationseffekt zu erzielen, den ich mir eines Lobs würdigte, habe ich eine sehr berühmte Open -Source -CSS3 -Animationsbibliothek verwendet, die lebhaft Animate.css genannt wird. Geschrieben von Dan Eden.
Dies ist der Code, mit dem ich mich auf die jeweilige Aufgabe konzentrieren kann, anstatt CSS3 -Animationen zu erklären.
Die Verwendung von Animate.css erfordert 2 Schritte:
1. Einführen inimate.min.css in das HTML -Dokument.
2. Fügen Sie die animierten YourChoseanimation -Klasse zu den Elementen hinzu, um die Animation auf der Webseite zu sein.
Als nächstes verwenden Sie den Klassennamen über Animationen, die Sie auf der Website von Animate.css sehen, um Ihre Chosenanimation zu ersetzen.
Einführung der Bootstrap -Karussellkomponente
Die Bootstrap -Karussellkomponente hat drei Hauptteile.
--- Das Karussell gibt die Anzahl der auf der Folie angezeigten Seiten an , die dem Benutzer einen visuellen Hinweis und eine Schiebedavigation zur Verfügung stellt.
--- Karusselleintrag , eine Klasse namens .Carousel-Inner, enthalten in der äußeren Grenze. Repräsentiert jeden unabhängigen Schieberegler. Bilder können in jedem Bild platziert werden. Sie können auch einen Titel hinzufügen. Sie können auch den Namen der Karussell-Kapion-Klasse zum HTML-Element hinzufügen. Bootstrap wird seinen eigenen Stil haben. Wir können Animationen über diese Elemente hinzufügen.
--- Schließlich gibt es den Karussell-Steuerpfeil , der die Funktion ist, die es dem Benutzer ermöglicht, hin und her zu rutschen.
Um einfach die Demo anzuzeigen, werden keine Bilder hinzugefügt. Konzentrieren Sie sich zuerst auf den Karussellrahmen als Animation.
HTML -Struktur aufbauen
Hier sind diejenigen, die Sie in Ihr Projekt zitieren müssen:
JQuery
Bootstraps CSS und JavaScript
Animate.css
Eine Stylesheet- und JS -Dokumentation.
Um den Entwicklungsprozess zu beschleunigen, werden Vorlagen und erforderliche Dateien auf der offiziellen Website von Bootstrap verwiesen.
Unten finden Sie den Bootstrap -Karussellcode :
<div id = "carousel-example-generic" data-ride = "carousel"> <!-Indikatoren-> <ol> <li data-target = "#carousel-example-generic" data-klide-to = "0"> </li> <li data-target = "#carousel-exam-generic" data-Sslside "1" 1 "> </li> </li li li lilside" data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div role="listbox"> <!-- First slide --> <div> <div> <h3 data-animation="animated bounceInLeft"> This is the caption for slide 1 </h3> <h3 data-animation="animated bounceInRight"> This is the caption for slide 1 </h3> <button data-animation="animated zoomInUp">Button</button> </div> </div><!-- /.item --> <!-- Second slide --> <div> <div> <h3 data-animation="animated bounceInDown"> <span></span> </h3> <h3 data-animation="animated bounceInDown"> bounceInUp"> This is the caption for slide 2 </h3> <button data-animation="animated zoomInRight">Button</button> </div> </div><!-- /.item --> <!-- Third slide --> <div> <div> <h3 data-animation="animated zoomInLeft"> <span></span> </h3> <h3 data-animation="animated flipInX"> This is the Bildunterschrift für Folie 3 </h3> <button data-Animation = "Animated LightSpeedin"> Taste </button> </div> </div> <!-/.item-> </div> <!-/.Carousel-innerer-> <!-steuerungssteuerung- aria-hidden = "true"> </span> <span> vorher </span> </a> <a href = "#carousel-example-generic" rollen = "button" data-Slide = "next"> <span aria-hidden = "true"> </span> <span> </span> </a> </div> <!
Wenn der obige Code nicht falsch ist, sehen Sie ein Karussell, das beim Öffnen im Browser ausgeführt werden kann. Alles oben enthält keine Zeile von JavaScript -Code. Wenn Sie keine Bilder hinzufügen,
Fügen Sie dem .Carousel .Item-Klasse-Block im CSS-Dokument einfach einen MINHEIT-Wert hinzu, um den Zusammenbruch des Karussells zu verhindern.
Fügen Sie den Elementen im Karussell-Titel eine Datenanimation für Animationsattribut hinzu und verwenden Sie diese spezielle Animationsbibliothek als Wert.
Wenn Sie andere Animationen aus der Animate.css-Bibliothek erleben möchten, verwenden Sie den Namen der Animationsklasse Ihrer Wahl anstelle des Daten-Animations-Eigenschaftswerts.
Wir verwenden den Daten-Animations-Attributwert im JavaScript-Code.
Obwohl in einigen Fällen ein einfaches automatisches Karussell gefunden werden kann, haben wir mehr Kontrolle über diesen Fall.
Entfernen Sie im ersten Schritt in dieser Richtung den Wert von Data-Ride = "Carousel" aus dem Element und initialisieren Sie den Data-Ride-Attributwert, ohne Code zu schreiben. Wir beabsichtigen jedoch, den JS-Code zu verwenden, um das Karussell zu steuern, sodass diese Datenreite unnötig ist.
Fügen Sie dem Karussell CSS -Stil hinzu
Verwenden Sie nun Ihre Kreativität, um dem Karussell -Titel nach Ihren Vorlieben Stile hinzuzufügen. Die Stilregeln, die ich schreiben werde, sind Demos, die reibungslos funktionieren.
Insbesondere erhöhen wir die Kontrolle über Animationsverzögerungseigenschaften. Definieren Sie, wann jede Animation beginnt (Beachten Sie, dass das Browser -Präfix für einfache Demonstration weggelassen wird).
.Carousel-Kapion H3: Erst-Kind {Animation-Delay: 1S;Stellen Sie im obigen Code -Snippet sicher, dass die Elementanimation ordentlich beginnt. Andere Effekte können durchgeführt werden. Beispielsweise können Sie die ersten beiden Titel gleichzeitig auswählen. Dann ist da noch die Taste. Sie können selbst entscheiden und Spaß haben.
Schreiben Sie JQuery Code:
Wir beginnen dieses Karussell und fügen den Code zu Ihrer benutzerdefinierten JavaScript -Datei hinzu:
var $ mycarousel = $ ('#carousel-example-generic'); // Initialisieren Sie Carousel $ mycarousel.carousel ();Wir haben das Karussell dynamisch eingerichtet und als nächstes diese Animation lösen.
Um den Titel der ersten Folie zu animieren, muss das Skript ausgeführt werden, nachdem die Seite im Browser geladen wurde. Die anschließende Diashow tritt unter Animation in unser Sichtfeld ein, und unser Code wird auf dem Ereignis von Slide.bs.Carousel ausgeführt. Dies bedeutet, dass der gleiche Code zweimal ausgeführt wird: Die Seite wird einmal geladen und das Ereignis von Slide.bs.Carousel einmal.
Da wir dem Prinzip der Nicht-Wiederholung gerne folgen möchten, beabsichtigen wir, unseren Code in Funktionen zu verkörpern und sie gegebenenfalls zu verweisen.
Code:
Funktion doanimations (elems) {var animendev = 'webkitanimationend animationend'; Elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ('Animation'); // fügen Sie Animate.css -Klassen zu // den Elementen an, die animiert werden sollen // Animation.css -Klassen //, sobald das Animation Event $ this.addclasse ($ animationtype). $ this.removeclass ($ animationType); Funktionsdoanimationen ($ Firstanimatelems); // Pause das Karussell $ mycarousel.carousel ('pause'); // Anhängen unsere Doanimations () an die Folie // Karussell. $ (E.-bezogene Target) .Find ("[Data-Animation ^= 'Animated']");Lassen Sie uns den obigen Code analysieren.
Schauen Sie sich die Funktion doanimations () an
Die von dieser doanimations () -Funktion ausgeführten Aufgaben sind wie folgt.
Es beginnt mit Cache -Zeichenfolgen, die den Animationend -Ereignisnamen in der Variablen enthalten. Dieses Ereignis sagt uns, dass Sie vielleicht erraten haben, wenn jede Animation endet. Wir brauchen Informationen für diesen Punkt, da wir nach jeder Animation die Animate.css -Klasse entfernen. Wenn wir die Entfernung nicht durchführen, hat der Titel des Karussells nur einmal eine Animation, dh nur eine bestimmte Folie im ersten Karussell.
var animationendev = 'webkitanimationend animationend';
Als nächstes schaltet unsere Funktion jedes Element durch, in dem wir Animation haben und den Eigenschaftswert der Datenanimation erhalten möchten. Überlegen Sie, was oben erwähnt wird, dieser Wert enthält die Animate.css -Klasse, die wir dem Element hinzufügen möchten, damit er einen Animationseffekt hat.
Elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ('Animation'); // etc ...});Schließlich ergänzt die Funktion von Doanimations () jedes Element der Animation.css -Klasse dynamisch, um die Animation auszuführen. Wenn die Animation endet, ist auch ein Ereignishörer beigefügt. Nachdem die Animation vorbei ist, entfernen wir die von Animate.css hinzugefügte Klasse. Dies stellt sicher, dass das nächste Karussell zurück in den aktuellen Bereich ist. (Sie versuchen, diesen Code zu löschen und zu sehen, was passiert.)
$ this.addClass ($ animationType) .one (animendev, function () {$ this.removeclass ($ animationType);});Die erste Titelanimation
Wenn die Seite im Browser geladen wird, animieren wir den Inhalt in der ersten Folie:
var $ erstanimatingelems = $ mycarousel.find ('. item: First') .find ("[data-Animation ^= 'animiert']"); Doanimations ($ Firstanimatelems);In diesem Code finden wir das erste Licht. Wir möchten den Wert des Animationsattributs aus dem Titel der Animation mithilfe von Datenanimation aus dem Titel der Animation erhalten. Dann geben wir die Variable $ Firstanimatelems als Parameter an die Funktion doanimations () über und führen dann die Funktion aus.
Karussell -Stoppfunktion
Wenn der erste Bildschirminhalt ausgeführt wurde, stoppen wir diese Karussellfunktion.
$ mycarousel.Carousel ('pause');
Dies ist ein Merkmal, bei dem die Bootstrap -Karussellkomponente eine konstante Rotation verhindert. Ständige Rotation kann die Besucher unglücklich machen.
In diesem Fall empfehle ich, sicherzustellen, dass das Karussell nicht direkt mit dem nächsten Licht schaltet, wenn alle Animationen ausgeführt werden. Dies kann gesteuert werden, indem die Option "Intervall" im Initialisierungscode festgelegt wird:
$ mycarousel.carousel ({Intervall: 4000});Meiner Meinung nach ist ein unendlicher Loop -Karussell -Titel jedes Mal, wenn die Folie in Sichtweite in Sicht ist, nicht ideal.
Karussell -Folie -Titel Animation
Die nachstehend beschriebenen Schritte sind erforderlich, um für die animierten Karussell -Title der einzelnen Folien sichtbar zu werden.
Zunächst fügen wir einen Event -Hörer auf Slide.bs.Carousel hinzu.
Das Ereignis feuert sofort aus, wenn die Slide -Instanzmethode aufgerufen wird.
$ mycarousel.on ('slide.bs.carousel', function (e) {// do Sachen ...});Als nächstes wählen wir die aktuellen Lichter aus und finden die Elemente, die wir animationen hinzufügen möchten. Der folgende Code verwendet die Eigenschaft mit der Eigenschaft von Slide.bs.Carousel, um die Animation zu binden.
var $ animatingelems = $ (E.-bezogenen Target) .find ("[data-Animation ^= 'animiert']");
Schließlich nennen wir die Funktion doanimations () und übergeben $ animatingelems als Parameter.
Doanimations ($ animatingelems);
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial
Wunderbares Thema Teilen: JQuery Bild Karussell JavaScript Bild Karussell Bootstrap Bild Karussell
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.