This tutorial provides the steps to overlay site header (automatically sized to half the viewport height) on featured image on single posts and the image fading away on scrolling down with fading in when scrolling up in Genesis. https://sridharkatakam.com/wp-content/uploads/2018/02/hero-featured-image-fade-scroll.mp4 While the tutorial has been written for Genesis Sample, it should work with a few adjustments […]
jQuery
How to auto play videos as they come into view in Genesis
This tutorial provides the steps to: add custom fields to upload/select mp4, webm and ogv video files for Posts using Advanced Custom Fields. replace content archive images with muted looping videos (if set) for each post appearing on the archives on the front end using shortcode built in WordPress. use jQuery Visible to a) play […]
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 set up an image link to play video inline in WordPress
One of the tasks in a recent Genesis Customization project that I worked on was to make a Vimeo video play inline (replacing the image) when an image is clicked. Sounds simple, but apparently is not – at least based on my brief googling. In this tutorial, we are going to place the HTML in […]
How to use Strip, a less intrusive responsive Lightbox in WordPress
Strip is a jQuery script by Nick Stakenburg for elegantly sliding images and videos (YouTube and Vimeo hosted) from your screen edge rather than the traditional lightbox that appears no top of the content. In this article I show how Strip can be implemented in WordPress and share custom jQuery code for making Strip work […]
Medium-like fluid lightbox in WordPress using Fluidbox
Fluidbox is a jQuery script by Terry Mun for “opening images seamlessly in a lightbox on your page without interruption”. In this article I show how Fluidbox can be incorporated in WordPress. Step 1 Upload fluidbox.css to your child theme’s directory/css (create ‘css’ directory if not existing). Ex.: wp-content/themes/genesis-sample/css/fluidbox.css Step 2 Upload jquery.fluidbox.min.js to child […]
Equal height elements in WordPress using jQuery.equalHeights
jQuery.equalHeights is a simple jQuery plugin to equalize heights of multiple elements on a page by Matt Banks. In this article I show how jQuery.equalHeights can be used to set equal heights for footer widgets in Genesis teaser entries when using Bill Erickson’s Genesis Grid plugin The method in this tutorial can very well be […]
How to link to a accordion panel when using jQuery UI Accordion in WordPress
To view the full content, please sign up for the membership. Already a member? Log in below or here.
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.
Using ScrollReveal.js to fade in posts in Genesis
While the below tutorial should work in theory, it does not. You might want to instead follow Scroll animations in WordPress using WOW.js. Declarative on-scroll reveal animations. A simple way to create and maintain how elements fade in, triggered when they enter the viewport. In a previous post titled Scroll animations in WordPress using Animate.css, […]
Recent Comments