Bootstrap and CSS3 animation, cool in the end! _javascript Tips

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.
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:

Introduce animate.min.css in HTML documents.
Add the animated Yourchosenanimation class to the elements you want to animate in your Web page.
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.

• The carousel indicates the number of pages showing the slide, providing a visual clue to the user and providing navigation that can be slid.
• A carousel entry, a class called. Carousel-inner, containing an outer border inside. 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.

If you want to learn more about the bootstrap carousel components, you can view the Syed Fazle Rahman with the Bootstrap3 create JS Carousel effect this article.

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= "Carou  Sel-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 give the. Carousel item in the CSS document to add Min-height value to prevent the wheel 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 above code fragment ensures that the element animation starts in an orderly fashion and can be used for other effects. For example, you can choose the first two headings to appear at the same time, then the button buttons, you can decide for yourself, enjoy the fun bar.

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.

1, see 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);
});

2, the first title of the animation

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.

3. 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.

4, the animation of the 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);

As many of you may know, there are some issues that need to be considered by the developer in the carousel.

In this article, we show how to add some extra effort, using a few lines of jquery and ANIMATE.CSS libraries for basic bootstrap carousel components. However, other similar CSS libraries, or CSS3 animation, we will do as well, I hope this article can give you more inspiration, open everyone's learning ideas.

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