• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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 :

Register for full access

Infinity Pro Theme Parallax Pro Theme

Reader Interactions

Comments

  1. Jules Sanchez says

    September 9, 2019 at 6:45 pm

    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
    • Brad Dalton says

      September 9, 2019 at 11:24 pm

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

      Log in to Reply
      • Jules Sanchez says

        September 13, 2019 at 5:30 am

        I sent an email this morning.

        Log in to Reply
  2. Samara Al Badri says

    July 19, 2019 at 11:47 pm

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

    Log in to Reply
    • Brad Dalton says

      July 20, 2019 at 12:06 am

      Hello Samara. On which image?

      Log in to Reply
  3. Cemal Ekin says

    April 7, 2019 at 11:32 am

    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
    • Cemal Ekin says

      April 7, 2019 at 12:11 pm

      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
      • Brad Dalton says

        April 7, 2019 at 9:58 pm

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

        Log in to Reply
        • Cemal Ekin says

          April 8, 2019 at 5:13 am

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

          Cemal

          Log in to Reply
  4. Brad Merkel says

    January 24, 2019 at 10:08 am

    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
    • Brad Dalton says

      January 24, 2019 at 10:55 pm

      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
      • Brad Merkel says

        January 25, 2019 at 11:49 am

        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
        • Brad Dalton says

          January 27, 2019 at 7:10 pm

          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
  5. Gill Barker says

    December 21, 2018 at 3:26 am

    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
    • Brad Dalton says

      January 14, 2019 at 6:49 pm

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

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags