MyPhoto has a special offer alert in a prominent position on the page. However, it may still not grab the attention of the user initially. We need to focus the attention of the user immediately on the alert and add some emphasis. We need to tell the user that this is something they should read.

Animate.css has a range of bounce classes that are great for grabbing the attention of a user. We have a selection of 11 bounce classes here: bounce, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, and bounceOutUp.

We'll go with the bounceIn class, which gives a throbber-like behavior. To get the bounceIn effect, add the animated and bounceIn classes to the special offers alert element:

 <div class="alert alert-info alert-position animated bounceIn">
      <a href="#" class="close" data-dismiss="alert" aria-        
       label="close">&times;</a>
      <a href="#" class="close minimize" data-minimize="alert" aria-
       label="minimize">_</a>
      <a href="#" class="close expand d-none" data-expand="alert" aria-   
       label="expand">+</a>
      <strong><i class="fa fa-exclamation"></i> Special Offer -  
      </strong>
      2 FOR 1 PRINTS TODAY ONLY WITH PROMO CODE 
      <span style="font-style: italic">BOOTSTRAP</strong></span>
</div>

The alert should now be animated. Animate.css also provides an infinite animation option, where the animation will be infinitely repeated. To use this option, simply add the infinite class to the element:

    <div class="alert alert-info alert-position animated bounceIn
    infinite">

Now, the bounceIn effect will be infinitely repeated. However, it does not look great as the element actually transitions from hidden to visible during the animation, so this transition is also looped. This is a great example of how the infinite class does not play well with all animations. A more infinite-friendly animation is pulse, which offers a similar effect. Replace the bounceIn class with the pulse class:

    <div class="alert alert-info alert-position animated pulse   
    infinite">

Great, the special offers alert now animates infinitely, with a gentle pulse to gain the attention of the user. However, if we want this applied to all alerts, then we need to apply it to all alerts individually. In this scenario, if there is a design change and, for instance, we want to change the animation, we will again have to change them all individually. Let's manage it centrally, instead, by extending the Alert jQuery plugin by adding further customizations to the js/alert.js file we created in Chapter 6, Customizing Your Plugins.

So, what do we want to do? On page load, we want to add animate.css classes to our alert elements. First, let's add our on load listener to our IIFE. Add this directly after $(document).on('click.bs.alert.data-api', '[data-expand="alert"]', Alert.prototype.expand):

    $(window).on('load', function () {
    })

Next, we need a hook for our plugin. Let's use a data-* attribute, as is the general practice with Bootstrap jQuery plugins. We will call it data-alert-animate. Any element to which we want these classes applied will already have the data-alert-animate attribute. Our plugin will loop through each of these elements, applying the relevant classes:

    $(window).on('load', function() {
        $('[data-alert-animate]').each(function() {
        })
    })

In our markup, let's update the special offers alert element to remove the animate.css classes and add the data-alert-animate attribute:

    <div class="alert alert-info alert-position" data-alert-animate>

We want to add three classes to the data-alert-animate elements: animated, pulse, and infinite. Let's update the plugin to apply these classes to each data-alert-animate element:

    $(window).on('load', function() {
        $('[data-alert-animate]').each(function() {
            $(this).addClass('animated pulse infinite')
        })
    })

Now, the markup will be dynamically transformed on page load, adding the animated, pulse, and infinite classes:

Great, but it isn't exactly extensible. Our plugin does not allow for these classes to be overridden via the data-alert-animate attribute. Let's fix this by defining a default animation, using pulse infinite, but allowing a developer to override the animation via the data-alert-animate attribute. Update the on load function as follows:

    $(window).on('load', function() {
        $('[data-alert-animate]').each(function() {
            var defaultAnimations = 'animated pulse infinite'
            var $animations = $(this).attr('data-alert-animate')
            if ($animations) {
                $(this).addClass('animated ' + $animations)
            } else {
                $(this).addClass(defaultAnimations)
            }
        })
    })

Now, we are defining a defaultAnimations variable from animated, pulse, and infinite. We then check whether the data-alert-animate attribute has any value; if it has, add the classes referenced, plus the animated class. If not, simply apply the classes defined in defaultAnimations.

Loading MyPhoto as-is, we should still see the animated, pulse, and infinite classes applied. However, the alert looks a little awkward, as it renders in a static state before the animation takes effect. To make the behavior of the alert more natural, let's make it invisible until Alert.js adds the animation classes. Add a new class, hide-before-animated, to myphoto.css:

    .hide-before-animated {
        visibility: hidden;
    }
    .hide-before-animated.animated {
        visibility: visible;
    }

The hide-before-animated class simply sets the visibility of the element to hidden, unless the animated class is also present on the element, in which case visibility is set to visible. As the data-alert-animate attribute adds the animated class to an element, the element will be invisible until the element is ready. Add the hide-before-animated class to the class attribute of the special offers alert element and reload the page to see the results:

    <div class="alert alert-info alert-position hide-before-
    animated" data-alert-animate>

Let's update our special offers alert element to override the pulse and infinite values with just the bounceIn class:

    <div class="alert alert-info alert-position" data-alert-
    animate="bounceIn">

Now, we should see just the animated and bounceIn classes applied to the element:

That's perfect. Now, via a neat little data-attribute, we can initiate a default animation for our alerts and override that animation if need be.

Another nice use of these animations is to add a natural feel to the rendering of elements that may initially be hidden. Let's apply this idea to the Testimonials tab we created earlier in this chapter.