In his last July post, Paul Kaiser from WPMU shared three different methods on how you can animate your web content using the free animate.css toolset created by Dan Eden: 1) by adding the CSS element manually, 2) through theme templates, and 3) by using jQuery.

Today, I’m going to feature one of those tricks, which is the third one which involving jQuery. In this method, you’re going to implement the class animation on an element (in this case, a slide), based on the user’s action on another element (a link).

In-Content slider

First you’re going to have to give your site’s authors the option of creating a slider, right from the “Edit Post” screen. Paul took an example from the animate.css author’s site and adapted it to WordPress. Below are the steps on how to do this.

Adding a box to edit screens for holding slider fields

1. Go to “Settings > More Fields,” and click “Add new input box” on the “More Fields” screen.
2. Enter “Post Slider” as the title of the box.
3. Check only “Posts” for the “Used with post types” option.
4. Click “Save.”
5. After saving, the “More Fields” screen lists the new box, which you can now add fields to.
6. Click “Edit” in the “Actions” column for your “Post Slider” box.
7. Click “Add new field” in the “List of fields” (which is currently an empty list.)
8. Enter “Slider 1 Content” as the field title.
9. Enter “pek_slide1_content” as the custom field key.
10. Enter the following as the caption:“Enter content for slide 1 here.”
11. Choose “WYSIWYG” as the field type.
12. Click “Save.”

Add new fields for as many sliders as you want to allow. I recommend at least 3 and no more than 6. Be sure to change the name of the field title and custom field key to reflect the slider number. e.g., “Slider 2 Content” and “pek_slide2_content,” etc.

Adding an On/Off switch for the slider

1. Add a new field with the title “Activate Slider.”
2. Use “pek_slider_active” as the custom field key.
3. Enter something like the following as the caption:“Check this box to make your sliders appear for this post.”
4. Choose “Checkbox” as the field type.
5. Click “Save.”

After adding the fields to your slider box, you’re going to test the sliders by editing a post and adding some content to at least 3 of the sliders, making sure to tick the “Activate Slider” box.

Rig your template for the new slider fields

In the template file “content-single.php” you need to:

1. Check if the “Activate Slider” checkbox is on. If it is, proceed.
2. Add a “ul” element to contain all our slides.
3. Check for each individual slider.
4. Create the <li> slider with appropriate classes, then dump the slider contents in there, properly escaped.
5. Add an activation button for the slider.
6. When all slides have been added, close the “ul” element that contains all slides.
7. Add the slider buttons HTML.

You can also download Paul’s own modified content-single.php file (.zip), which also already has some comments in it to give you a better understanding of the code.

After saving the changes to your template file, view the sample post you created with the content slider. You should see an unordered list after the normal page content containing an item for each of your slides, followed by a line of linked text like “Slider 1,” and “Slider 2,” etc.

Here are some additional CSS to add some style to your sliders:

Styles for the slider container

.slides {
 -webkit-animation-delay: .5s;
 -moz-animation-delay: .5s;
 animation-delay: .5s;
 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
 animation-fill-mode: both;
 -webkit-animation-name: fadeInUp;
 -moz-animation-name: fadeInUp;
 animation-name: fadeInUp;
 width: 100%;
 height: 400px;
 position: relative;
 margin: 1.5em 0;
}

Styles for the slides (.slides li)

.slides li {
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 96%;
 padding: 2%;
 list-style: none;
 background: #fff;
 margin: 0 auto;
 border-radius: 5px;
 box-shadow: 0 0 2px 1px rgba(0,0,0,.1);
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-animation-duration: 1s
 -moz-animation-duration: 1s;
 -ms-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-timing-function: ease
 -moz-animation-timing-function: ease;
 -ms-animation-timing-function: ease;
 animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
 -ms-animation-fill-mode: both;
 animation-fill-mode: both;
 opacity: 0;
 z-index: 1;
}     

Styles for the inactive sliders

.slides .inactive {
 -webkit-animation-fill-mode: backwards;
 -moz-animation-fill-mode: backwards;
 -ms-animation-fill-mode: backwards;
 animation-fill-mode: backwards;
 -webkit-animation-name: fadeOutRight;
 -moz-animation-name: fadeOutRight;
 -ms-animation-name: fadeOutRight;
 animation-name: fadeOutRight;
}

Styles for the active sliders

.slides .active {
 -webkit-animation-name: fadeInLeft;
 -moz-animation-name: fadeInLeft;
 -ms-animation-name: fadeInLeft;
 animation-name: fadeInLeft;
 -webkit-animation-delay: .5s;
 -moz-animation-delay: .5s;
 -ms-animation-delay: .5s;
 animation-delay: .5s;
 opacity: 1 !important;
 z-index: 5;
}

And now for your sliders’ JavaScript, with this, visitors can choose which slide to see by clicking the links underneath the slider display area. When they click, the JavaScript function “slide” is called, passing in the number of the slide which the link should then activate.

To make it work, you need to make a small JavaScript file available to your page in the “head” portion of your HTML code. The file contains the JavaScript function “slide.”

1. In your theme folder, make a “js” folder, if it doesn’t already exist.
2. In the “js” folder, create a new file named “animate-css.js”.
3. Add the following to the file and save it:

function slide(n) {
 jQuery('.active').removeClass('active').addClass('inactive');
 jQuery('.slide' + n).addClass('active').removeClass('inactive');
}

Load the new JavaScript

Go back to your theme’s “function.php” file and scroll to the bottom. You enqueued some CSS here previously, and now you’ll enqueue the new JavaScript file. Add the following to the end of your “paukai_2011_styles” function and then save.

// add new JS
wp_enqueue_script(
 'animate-css-script',
 get_template_directory_uri() . '/js/animate-css.js',
 array('jquery')
);

Now it’s time to test the new slider. Refresh the post you added the sliders to, and then click the different slide links to watch your new slider in action.

For the full details of this tutorial and its other methods, you can read Paul Kaiser’s main article. I hope this has sparked your curiosity in this very useful toolset called animate.css!

Incoming search terms for the article:

• animate css wordpress
• wordpress animation
• free animation for wordpress
• animation wordpress
• wordpress animate css
• animate wordpress
• animate css wordpress plugin
• title=commentluv enabled full container load
• wordpress анимация
• wordpress tutorial for animation