Add Parallax To Infinity Pro Themes Front Page Image Sections

Jul 22, 2018

—

This tutorial shows you how to add a parallax scrolling effect to front page 1, 3, 5 & 7 background images so they move at a different speed to the overlaying content when scrolling the front page of the Infinity Pro child theme by StudioPress.

When screen widths are 1180px and smaller, the image background will scroll.

#Demo Video

Shows the images behind the front page image sections moving at a different speed to the widget content creating a parallax effect on scroll.

Note : Tested using the Infinity Pro child theme by StudioPress however the CSS may need modifying for use in other Genesis child themes.

#Parallax Installation

There’s 3 steps relating to usage of the files in the download folder :

Infinity Pro Theme Parallax Pro Theme

Comments

15 responses to “Add Parallax To Infinity Pro Themes Front Page Image Sections”

Jules Sanchez

September 9, 2019

Is there a video that shows me how to do this exactly? I thought that is what we were getting tutorials on how to add parallax to the website.

Log in to Reply
1. Brad Dalton
  
  September 9, 2019
  
  Jules. Please send access details and i’ll install the code for you.
  
  Log in to Reply
  1. Jules Sanchez
    
    September 13, 2019
    
    I sent an email this morning.
    
    Log in to Reply
Samara Al Badri

July 19, 2019

Hi Brad, is it possible to have the parallax effect for the Studio Pro theme too? Thanks!

Log in to Reply
1. Brad Dalton
  
  July 20, 2019
  
  Hello Samara. On which image?
  
  Log in to Reply
Cemal Ekin

April 7, 2019

I have followed all the steps, Brad, but the parallax effect is not showing on this site I am working on:

https://www.strive.construction/

I cleared the cache and tried different browsers too. Any idea where I might have skipped a step?

Thanks,

Cemal

Log in to Reply
1. Cemal Ekin
  
  April 7, 2019
  
  I got it working by copying the parallax.js to the theme root rather than the folder indicated in the instructions, js folder. It now behaves as expected, thank you.
  
  Cemal
  
  Log in to Reply
  1. Brad Dalton
    
    April 7, 2019
    
    Updated the path to the parallax.js file in the front-page.php file.
    
    Log in to Reply
    1. Cemal Ekin
      
      April 8, 2019
      
      Thanks, Brad. I will download the new files and stay in sync with your updates.
      
      Cemal
      
      Log in to Reply
Brad Merkel

January 24, 2019

Hi, I’ve implemented this effect, and it works great on desktop, but on mobile the background image is zoomed in and not displayed correctly. Is there a fix for mobile?

Log in to Reply
1. Brad Dalton
  
  January 24, 2019
  
  Brad, it looks fine on smaller screens on the demo https://my.studiopress.com/themes/parallax/#demo-full
  
  However, your images may be different. You can use CSS to modify the default effect at any screen width.
  
  Otherwise, please link to your site and i’ll take a look.
  
  Log in to Reply
  1. Brad Merkel
    
    January 25, 2019
    
    Ok, thanks for your help.
    
    Here’s a link to the site’s homepage with the parallax image: https://www.poshcakesbakery.com/
    
    Log in to Reply
    1. Brad Dalton
      
      January 27, 2019
      
      Looks ok to me. You could use CSS to display a different image on mobiles however it will need to cover the widget content and i doubt you’ll fit it all in on smaller screens.
      
      Log in to Reply
Gill Barker

December 21, 2018

Hi Brad, I’m a new member, no specific questions yet but might do in a week or so. Just saying hi and also thanks for this tutorial – I tried this yesterday and it works like a charm, really improves the look of the theme.

Log in to Reply
1. Brad Dalton
  
  January 14, 2019
  
  Hi Gill. Back from annual leave now if you need any help.
  
  Log in to Reply