I have recently come across a parallax Javascript aptly named Universal Parallax that works beautifully on all devices incl. tablets and mobiles. In fact, this is the only cross-platform or universal parallax script as far as I know that works for background images. If you are looking to move multiple elements at different speeds on […]
parallax
How to add Parallax effect to Header Hero in Essence Pro
Updated on 26 May 2022 This tutorial provides the steps to load Jarallax javascript and apply it on Header Hero in Essence Pro for parallax scrolling effect on the header hero image. Tested in Essence Pro 1.5.1. Step 1 Upload jarallax.min.js to Essence Pro’s js directory. Step 2 Edit functions.php. a) Inside essence_enqueue_scripts_styles(), above wp_enqueue_script( […]
Parallax Scrolling for Front Page sections in Altitude Pro
Altitude Pro’s demo site has fixed background images for Front Page sections 1, 3, 5 and 7. This tutorial provides the steps to set up parallax scrolling (subtle movement of the background image with scrolling) for these sections using Parallax.js. https://sridharkatakam.com/wp-content/uploads/2018/03/altitude-pro-parallax-background.mp4 Step 1 Upload parallax.min.js to Altitude Pro’s js directory. Step 2 Comment out or […]
Parallax featured image below header in Genesis
In the comments section of Featured Parallax Section on Singular pages in Genesis, a user asked: Hi Sridhar I sit possible for this to function without the ACF plugin? I don’t need the text area. You have other full width header image tutorials where ACF is not needed. Many thanks This tutorial provides the steps […]
Chevron-shaped Featured Parallax Section in Genesis using clip-path
This tutorial is based on How to slant edges of elements in Genesis and provides the steps to set up a down facing chevron-like featured section below the front page in Genesis with a parallax background image changeable in the Customizer (with instant live preview). We are going to register a custom Home Featured widget […]
Featured Parallax Section on Singular pages in Genesis
In the past, I wrote a tutorial titled Featured Image Background Parallax section on Posts and Pages in Altitude Pro. This tutorial is different in the following ways: Parallax.js jQuery script (more robust) is used instead of JS from Parallax Pro theme Instead of post info/title, entry-specific content (if present) in a custom text area […]
Parallax scrolling effect in Genesis using Parallax.js
In this tutorial I show how Parallax.js jQuery script can be implemented in Genesis. We shall register a “Featured” widget area, place a text widget in it, display it below header while specifying the URL of a image to be shown as the parallax background. Also we will display another parallax image above the footer. […]
Parallax effect for Front Page background image in Digital Pro
In the comments section of How to apply Parallax effect from Parallax Pro in any Genesis theme a user asked, Hi Sridhar, I signed up specifically for this tutorial because described being able to apply the parallax effect to ANY Genesis theme but it doesn’t work on ‘Digital Pro’. I think it has to do […]
How to add Parallax effect to front page image sections in Altitude Pro
In my Facebook group, a user asked: Hey Sridhar. Can you consider a tutorial on how to create a real parallax effect with the background images on the landing page in Altitude Pro? You have a tutorial (https://sridharkatakam.com/add-parallax-background-header-…/) where you used stellar.js, and you made home-widgets-6 parallax. I’d like to have sections 1, 3, 5, […]
How to move an image from bottom to top when scrolling down in Genesis
In a recent project that I completed, keyot.com, the requirement was to move an image of a rocket as the user scrolled down the homepage. This is how I did it using Stellar.js. Step 1 Uploaded jquery.stellar.min.js to child theme’s js directory. Created a file named home-non-mobiles.js in the same location and initialized Stellar like […]
Recent Comments