In this tutorial we shall register a custom Feature Boxes widget area, display it below header, drag 4 text widgets into it and add the CSS to add a subtle hover effect to the widgets as seen at https://www.answerfinancial.com/Home-Insurance?a=RETAIL. Screenshot: Screencast: For the icons we are going to use ionicons and for ensuring that the […]
Search Results for: animations
Scroll animations in Genesis using AniView
AniView is jQuery plugin that works in harmony with Animate.css in order to enable animations only when content comes into view. It is similar to WOW.js that I wrote about in the past. AniView is relatively new and not as popular as WOW.js but is lighter than WOW. This tutorial covers using post_class filter hook to […]
Page transitions and Animations
Hi I saw a request for CSS page transitions I would also like this as well : http://www.onextrapixel.com/examples/jquery-page-transitions/ Thanks Andy
Scroll Animations in WordPress using Smoove
In the past I wrote several tutorials on scroll animations Genesis/WordPress: Scroll animations in WordPress using WOW.js Adding scroll animations in Parallax Pro Using ScrollReveal.js to fade in posts in Genesis Scroll animations in WordPress using Animate.css, Jack In The Box and Waypoints Using Waypoints jQuery to animate and fade in elements as they are […]
Scroll animations in WordPress using WOW.js
In the past I wrote about using ‘Jack In The Box’ and ScrollReveal here and here for on scroll (more like, ‘when-it-comes-in-the-view’) animations. I have updated the post on ScrollReveal today. But find that animations no longer work during my tests. Therefore I gave WOW, the newer incarnation of Jack In The Box a try […]
Parallax animations in Genesis using Stellar.js
Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element. In this article I show how Stellar can be used for Parallax background and Parallax elements for a widgetized section on homepage in Genesis. Step 1 Upload jquery.stellar.min.js to child theme/js directory. Create a file named say, jquery.stellar.init.js having the following […]
Adding scroll animations in Parallax Pro
To view the full content, please sign up for the membership. Already a member? Log in below or here.
Scroll animations in WordPress using Animate.css, Jack In The Box and Waypoints
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 […]
Cross-browser animations using Animate.css
To view the full content, please sign up for the membership. Already a member? Log in below or here.
Ken Burns effect for Front Page 1 image in Infinity Pro
In my tutorial requests Trello board, a user asks: How would you add the Ken Burns Effect to the front-page1 background image in infinity pro and keep it responsive? The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. We can create a custom animation using […]
Recent Comments