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 […]
Search Results for: 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 […]
jQuery Counter on scroll using WOW.js in Genesis
In my tutorial requests Trello board, a user asked I want to create a counter using jquery-counter – http://sophilabs.github.io/jquery-counter/ and put it in a footer widget. Can you create a tutorial to install and configure jquery-counter on a Genesis theme? This tutorial provides the steps to trigger jQuery.Counter when the section having the counters is […]
How to set up fadeUp effect from Digital Pro in any Genesis child theme
Digital Pro has two fadein animations: On page load As widget areas are scrolled to If you are looking to implement the same in other Genesis child themes, follow these steps: Step 1 Create a file named fadeup.js in your child theme’s js directory having the following code: To view the full content, please sign […]
How to add Parallax background for an existing widget area in Dynamik
In the comments section of Parallax animations in Genesis using Stellar.js article, a user asked: As always, this is excellent, Sridhar. Of course, there will be questions. The first one for me: How can I apply this to an existing widget area? I use the Dynamik child theme for Genesis and there are numerous predefined […]
How to get Menu and Page Transitions like this?
Hi there I would like tutorials using Genesis in how to get the Menu on this website ? Also how to have the animations/page load transition between pages a tutorial for both would be great ! http://www.isabellek.co.uk/ Thanks Andy
Simple CSS transitions for entry elements in Genesis
Inspired by Rafal Tomal’s blog, in this tutorial I show how CSS transition and transform properties can be used to smoothly show a background color around entries animate post title and post info down animate read more link up when an entry in content archives (all listing i.e., non singular pages) that are split into […]
App-like off-canvas menu using mmenu + Hide header until it’s needed using Headroom in Genesis
A couple of users in the Dynamik Facebook group wanted my take on using mmenu and Headroom jQuery scripts. In this tutorial I share the details of how a custom menu placed in Header Right widget area of Genesis can be converted to a hamburger menu icon at a specific width (768px) – which when […]
Full width Soliloquy slider in Genesis
Soliloquy is perhaps the best WordPress slider plugin out there. It is simple, light-weight, very well optimized for speed and comes with excellent support. Note: Soliloquy does not have the bells and whistles like layers that are present in LayerSlider and Revolution. If you need layers and a variety of animations, go with one of […]
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 […]
Recent Comments