WP SITES

3082 Coded Tutorials & 284 Plugins

Add Parallax To Infinity Pro Themes Front Page Image Sections

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 :

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

  1. Jules Sanchez Avatar
    Jules Sanchez

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      Jules. Please send access details and i’ll install the code for you.

      1. Jules Sanchez Avatar
        Jules Sanchez

        I sent an email this morning.

  2. Samara Al Badri Avatar
    Samara Al Badri

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

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Samara. On which image?

  3. Cemal Ekin Avatar
    Cemal Ekin

    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

    1. Cemal Ekin Avatar
      Cemal Ekin

      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

      1. Brad Dalton Avatar
        Brad Dalton

        Updated the path to the parallax.js file in the front-page.php file.

        1. Cemal Ekin Avatar
          Cemal Ekin

          Thanks, Brad. I will download the new files and stay in sync with your updates.

          Cemal

  4. Brad Merkel Avatar
    Brad Merkel

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Brad Merkel Avatar
        Brad Merkel

        Ok, thanks for your help.

        Here’s a link to the site’s homepage with the parallax image: https://www.poshcakesbakery.com/

        1. Brad Dalton Avatar
          Brad Dalton

          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.

  5. Gill Barker Avatar
    Gill Barker

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Gill. Back from annual leave now if you need any help.

Leave a Reply

New Plugins