Well, animated websites catch user concentration. (At least mine definitely.) I am particularly a blog writer but whenever I see a website which has some appear or hover animations, it grab my eyes for sure.
If you want to add animations on your WordPress theme, you can do it very easily.
What will you need?
- cPanel Access
- Basic HTML and CSS Knowledge
- Understanding of core WordPress Files
So, firstly we ought to invite the CSS repository in the theme. There are two methods to do this.
- Editing the functions.php
- Adding Custom CSS to WordPress
Let’s do it with the second method as it is a bit easier that the first one.
WP Add Custom CSS is a FREE plugin for WordPress and you can add your personal custom CSS to your theme using this plugin. The benefit of using this plugin is – “You won’t lose the CSS while updating the theme files.”
Step1. Download the Plugin, Install and Activate
Step2. Download the Animate.css from GitHub and add it in sitewide CSS
Step3. Now Go to Appearance >> Editor
Step4. Open header.php
Note: It totally depends on the formation of your theme how you will be editing certain theme files.
Step5. For instance, I want to animate the primary navigation. I will obtain the right <div> and add the style class to it.
Step6. Now you need a list of probable animations that You can add to it.
Here is the list of the same
- bounce
- flash
- pulse
- rubberBand
- shake
- headShake
- swing
- tada
- wobble
- jello
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- hinge
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
Now you have a list of animations that you can add to your blog theme.
Step7. Type “animated” followed by the animation you want to add to the section.
sample
<div id=”primary-navigation” class=”primary navigation animated wobble”>
Step8. Make sure you attach the code in class property only. Putting animation code in id attribute won’t act at all.
Step9. Save the theme file.
Step10. Add animations to required files wherever you want to append animations. For single post cover animations, you may need to edit single.php.
Step11. experiment it live on your site.
Howdy, You did it.
Let’s have a look at some origami hacks to advance those animations on your site.
- You can attach loop perpetual animation just by adding “infinite” between “animated” and “wobble”
like this:<div class=”primary-navigation animated infinite wobble”>
- These animations are fired when the page is loaded.
- As a result, the animations only above the fold would be seen.
- To trigger animations when you scroll the page you will need to implement wow.js into your theme files. (You can either subscribe to read How to trigger animate.css when you scroll or keep visiting daily.)
Final Words
I would like to contribute and help you make your theme animations friendly. Let me know if you want animations in your theme using the comment form or contact form.
