AniJS is a Javascript library to easily add animations to elements on webpages by setting the value of data-anijs data attribute using the following syntax: if an event occurs on this element do an action/animation to this element In this tutorial, I share the steps for loading this library and using it in Genesis. We […]
scroll animations
Unobtrusive page transitions in Genesis with smoothState.js
smoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. In this tutorial I discuss implementing smoothState.js in Genesis. Since the HTML content of initial page (ex.: front page) will be replaced with that of the later page (ex: an inner page) using Ajax, going back to the […]
How to fade in widgets using ScrollMagic in Genesis
This tutorial provides the steps to fade in widget areas on a custom full-width front page in Genesis using the ScrollMagic javascript library. We are going to create 5 front page widget areas and display these on a static front page using this method. Then enqueue ScrollMagic and initialize it like so: create a new […]
Using Element Queries for Scroll-triggered Flyout Opt-in in Genesis
From http://elementqueries.com/: Element queries are a new way of thinking about responsive web design where the responsive conditions apply to elements on the page instead of the width or height of the browser. EQCSS is a JavaScript plugin that lets you write element queries inside CSS today. In this article I share the steps for […]
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 […]
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 […]
Hide header until it is needed in WordPress using Headroom.js
Want to slide your site’s header out of view when scrolling down and slide it back in when scrolling up? In this article I show how to incorporate Headroom.js in WordPress for non handheld devices. Upload headroom.min.js to your child theme directory/js (create js directory if it’s not present). Upload jQuery.headroom.min.js to the same location […]
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.
Recent Comments