In this article I share my findings on animating elements as they come into view in WordPress.
Yesterday I came across Jack In The Box. From the github page:
Reveal CSS animation as you scroll down a page. By default, you should use it to trigger animate.css animations.
Jack In The Box is kind of similar to Waypoints about which I wrote here and here.
When to use which?
Use Jack In The Box when the sections that you wish to add scroll animations to are custom sections that you have manually added vs sections auto generated by your theme's markup functions i.e., when you have the flexibility to add custom classes like box and slideInLeft easily.
Use Waypoints when the elements to which animations are to be added as they are scrolled to are generated by the theme.
I am going to use Genesis Sample as the active WordPress theme in this tutorial.
Example 1: Slide in Primary Sidebar from top
Let's say we want to slide in the Primary sidebar from top as we reach to it. Unless there is a tall slider below the standard header and navigation, Primary sidebar will usually be visible above the fold as pages load. This means that the slide in from top animation will be visible upon page load.
Upload animate.min.css to /css under your child theme.
Download jack-in-the-box.js and edit it.
Replace (line 2)
| jQuery(function() { |
by with
