Very cool bootstrap picture Carousel Animation _javascript Skills

It is a very common requirement for web developers to add a sliding or carousel effect to the display content. Fees and free carousel Plug-ins are too numerous to enumerate. Many of these provide a number of useful configuration options and dynamic effects.

Many times, if your project needs to be a lightweight carousel, it doesn't require a lot of functionality. At the same time your project is to adopt Bootstrap, (one of the most popular open source front-end framework) words. You can refer to the official Bootstrap component.

This article will show you how to add an interesting animation effect to Bootstrap carousel. At the same time ensure that the JS component free expansion and quick start.

Introduction Animate.css

In order to allow me to write the animation effect is commendable, I use a very well-known open source CSS3 animation library, is the image called Animate.css. Dan Eden wrote that.

This is the code that allows me to focus on the task at hand, not explain the CSS3 animation.

Using ANIMATE.CSS requires 2 steps:

1, the introduction of ANIMATE.MIN.CSS in HTML documents.
2. Add the animated Yourchosenanimation class to the elements on the page that you want to animate.
Then you replace yourchosenanimation with the class name of the animation you see on the ANIMATE.CSS website.

Introduction of Bootstrap Carousel components

The bootstrap Carousel component has three main parts.

---Carousel indicates the number of pages that show the slide , providing a visual clue to the user and providing navigation that can be slid.
---A carousel entry , a class called. Carousel-inner that contains an outer border. Represents each individual slider. Each picture can be placed inside the picture. You can also add a caption. You can also add the Carousel-caption class name to the HTML element. Bootstrap will have its own style. We can add animations through these elements.
---Finally, it is the carousel control Arrow , which allows the user to slide back and forth.

In order to simply show the demo, you will not add the picture first. The focus is first placed on the carousel frame as an animation.

Building HTML Structures

Below is what you need to refer to your project:

Jquery
Bootstrap ' s CSS and JavaScript
Animate.css
A style sheet and a JS document.

To speed up the development process, the template and necessary files were referenced from the bootstrap website.

Below is the bootstrap Carousel code :

<div id= "Carousel-example-generic" class= "Carousel Slide" data-ride= "Carousel" > <!--indicators--> <ol class= "Carousel-indicators" > <li data-target= "#carousel-example-generic" data-slide-to= "0" class= "active" > </li> <li data-target= "#carousel-example-generic" data-slide-to= "1" ></li> <li data-target= "#carousel-example-generic" data-slide-to= "2" ></li> </ol> <!--wrapper for slides--> <div clas s= "Carousel-inner" role= "ListBox" > <!--slide--> <div class= "Item Active" > <div class= "carous El-caption "> 
 

If the above code is correct, you will see a running carousel in the browser, and none of the above contains a line of JavaScript code. If you don't add any images,

Just add min-height value to the class block for the carousel. Item in the CSS document to prevent the carousel from collapsing.

Add an animated property data-animation to the element in the carousel header, using this particular animated class library as their value.

If you want to experience other animations from the ANIMATE.CSS library, replace the Data-animation attribute value with the animated class name you choose.

We use Data-animation attribute values in JavaScript code.

Although a simple automatic carousel can be found in some cases, we have more control over the case.

The first step in this direction is to remove the data-ride= "Carousel" value from the element and initialize the Data-ride property value without writing any code. However, we intend to control the carousel with JS code, so this data-ride attribute is unnecessary.

Add CSS style to Carousel

Now, according to their own preferences, to play the creative role of the carousel title to add style. The style rule I'm going to write is a demo that works smoothly.

More specifically, we increase the control of animation delay properties. Define when each animation starts (note that the browser prefix is omitted for a simple demo)

. carousel-caption H3:first-child {
 animation-delay:1s;
}

. Carousel-caption H3:nth-child (2) {
 animation-delay:2s;
}

. Carousel-caption button {
 animation-delay:3s;
}

The code fragment above ensures that the element animation begins in an orderly fashion. There are other effects that can be done. For example, you can select the first two headings to appear simultaneously. Then the button buttons. You can decide for yourself and enjoy the fun.

Write jquery code:

Let's start by initializing this carousel and adding code to your custom JavaScript file:

var $myCarousel = $ (' #carousel-example-generic ');
Initialize Carousel
$myCarousel. Carousel ();

We've set up the carousel dynamically, and next we're going to fix this animation.

To animate the title of the first slide, the script runs when the page is loaded in the browser. The following slides move into our field of vision under animation, and our code runs on the Slide.bs.carousel event. means the same code runs two times: the page loads once and the Slide.bs.carousel event once.

Because we like to follow the principle of non-repetition, we intend to encapsulate our code in a function and reference it at the appropriate time.

Code:

function Doanimations (elems) {var Animendev = ' Webkitanimationend animationend ';
 Elems.each (function () {var $this = $ (this), $animationType = $this. Data (' animation ');  ADD ANIMATE.CSS classes to//elements to be animated//Remove ANIMATE.CSS classes//Once the animation event
 Has ended $this. addclass ($animationType). One (Animendev, function () {$this. Removeclass ($animationType);
 });
}); }//Select The elements to is animated//in the "page load var $firstAnimatingElems = $myCarousel.
Tem:first '). Find (' [Data-animation ^= ' animated] ');
Apply the animation using our function doanimations ($firstAnimatingElems);

Pause the Carousel $myCarousel. Carousel (' Pause '); Attach our doanimations () function to the//Carousel's Slide.bs.carousel event $myCarousel. On (' Slide.bs.carousel ', Fu
  Nction (e) {//Select the elements to be animated inside the active slide var $animatingElems = $ (e.relatedtarget) . Find ("[Data-animation ^= ' aniMated '] ");
Doanimations ($animatingElems);

 });

We'll analyze the code above.

Look at the doanimations () function

This doanimations () function performs the following tasks.

It begins by caching the string containing the Animationend event name in the variable. This event tells us that you may have guessed that when each animation ends. We need the information for this point, because each time the animation ends, we remove the Animate.css class. If we do not remove, the carousel title will have only one animation, that is, only the first time the carousel displays a specific slide.

var Animendev = ' Webkitanimationend animationend ';
Next, our function loops through every element we want to animate and gets the Data-animation attribute value. To think of the above, this value contains the Animate.css class we want to add to the element so that it has an animation effect.

Elems.each (function () {
 var $this = $ (this),
 $animationType = $this. Data (' animation '); 
 etc..
});

Finally, the doanimations () function dynamically adds each element of the Animate.css class to animate, and when the animation ends, an event listener is attached. At the end of the animation we remove the class that was added from the animate.css. This ensures that the next carousel light Slice returns to the current area. (You try to delete this code and see what happens)

$this. addclass ($animationType). One (Animendev, function () {
 $this. removeclass ($animationType);
});

Animation of the first title

When the page is loaded in a browser, we animate the contents of the first slide:

var $firstAnimatingElems = $myCarousel. Find ('. Item:first ')
  . Find ("[Data-animation ^= ' animated ']"); 
Doanimations ($firstAnimatingElems);

In this code, we find the first piece of light, and we want to get the value of the animated property from the animated caption by using Data-animation. We then pass the variable $firstAnimatingElems as a parameter to the Doanimations () function, and then execute the function.

Stop function of the carousel

When the first piece of the light is finished, we stop the carousel function.

$myCarousel. Carousel (' pause ');
This is the feature of the bootstrap carousel component to prevent constant rotation. The constant rotation may be annoying to the visitor.

In this case, I recommend making sure that the carousel does not loop directly to the next light slice until all the animations have finished running. You can control this by setting the interval option in the initialization code:

$myCarousel. Carousel ({
 interval:4000
});

In my opinion, an infinite cyclic carousel header jumps every time the slide enters the view is not ideal.

Animation of a Carousel slide title

The following steps are required to become visible for the animated carousel headers for each slide.

First, we add an event listener to the Slide.bs.carousel.

When a slide instance method is invoked, the event is immediately triggered.

$myCarousel. On (' Slide.bs.carousel ', function (e) { 
 //do stuff ...
});

Next, we select the current light film and find the elements we want to add to the animation. The code below uses the. Relatedtarget property of the Slide.bs.carousel event to bind the animation.

var $animatingElems = $ (e.relatedtarget). Find ("[Data-animation ^= ' animated ']");
Finally, we call the Doanimations () function and pass the $animatingelems as a parameter.

Doanimations ($animatingElems);

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.