How to Add Extra-Smooth Scroll Effect in Divi With Luxy.js

h

v

Want to make your Divi site feel extra smooth and fancy? Try Luxy.js!

If you’ve ever scrolled through a site and thought “Whoa, that felt nice” – chances are, you’ve experienced a custom scroll effect. And that’s exactly what Luxy.js can do for your Divi website.

Luxy adds a buttery-smooth scrolling experience with subtle parallax effects. It’s super lightweight and doesn’t require any plugins. You’ll just need a few lines of code – and in this post, I’ll show you how to implement it in several ways, depending on your layout setup.

Behind the scenes:

Yup, this is another effect inspired by a student question inside Divi Stylist Academy.
You ask – I test – and if it works, we all win 😄

Watch the walkthrough

Want to see exactly how to implement this effect?
In this step-by-step video tutorial, I’ll show you how to set up Luxy.js inside your Divi website (with different code options depending on your setup).

👇 Watch below and follow along!

check out the official Luxy.js demo

Step 1:

Add Luxy.js to your Divi site

First, include Luxy.js from the CDN. You can add this in Divi ➜ Theme Options ➜ Integration ➜ Add code to the <head> of your blog:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/luxy.min.js"></script>

Step 2:

Choose your setup

Now it’s time to initialize Luxy. Pick the version of the script that matches your layout best.

Option 1: You don’t have a fixed navigation

If your navigation scrolls with the page (in other words – it's not fixed to the top of the screen), you can use #page-container as the wrapper:

<script>
jQuery(document).ready(function($){
  if (! $('body').hasClass('et-fb')) {
    luxy.init({
      wrapper: '#page-container',
      wrapperSpeed: 0.06
    });
  }
});
</script>

Option 2: You use a fixed navigation (standard or Theme Builder)

Use this version if:

You’re using standard Divi header and enabled Fixed Navigation in Theme Options, or
You’re using a Theme Builder header with a section set to Stick to top (via Scroll Effects).

In this case, your wrapper should be #et-main-area instead:

<script>
jQuery(document).ready(function($){
  if (! $('body').hasClass('et-fb')) {
    luxy.init({
      wrapper: '#et-main-area',
      wrapperSpeed: 0.06
    });
  }
});
</script>

Note: If you're using both a fixed header and a footer built with the Theme Builder, Luxy may miscalculate the page height, causing layout issues (like the footer getting cut off). To fix this, you might need to add extra bottom padding to the last row or section inside your Footer template - try adding 150–200px extra bottom padding to see if it resolves the issue.

Option 3: Add parallax effect to a single element

Want one element to move at a different speed than the rest of the page? Use a unique CSS class for that element – something like element.

In your builder, apply this class to the module, image, or row you want to animate. (Don’t forget: this should be an element that isn’t crucial to layout alignment – more on that in the video!)

In the tutorial, I also show how to use an empty row with a background image to fake a parallax background. Why? Because Divi's native parallax setting doesn’t play nicely with Luxy.

Here’s the code:

<script>
jQuery(document).ready(function($){
  if (! $('body').hasClass('et-fb')) {
    $('.element').attr({
      'data-speed-y': '-5',
      'data-offset': '20'
    });

    luxy.init({
      wrapper: '#et-main-area',
      wrapperSpeed: 0.06,
      targets: '.element'
    });
  }
});
</script>

Option 4: Multiple parallax elements, each with different speed

You can use multiple custom classes and give each element its own scroll behavior. Just replace element and element2 with your own class names, and apply those classes in the Divi Builder.

The fun part? You can mix and match values – try different data-speed-y and data-offset numbers to get just the right look. It may take a few tries to get everything just right, depending on spacing and layout.

<script>
jQuery(document).ready(function($){
  if (! $('body').hasClass('et-fb')) {
    $('.element').attr({
      'data-speed-y': '-5',
      'data-offset': '20'
    });

    $('.element2').attr({
      'data-speed-y': '3',
      'data-offset': '10'
    });

    luxy.init({
      wrapper: '#et-main-area',
      wrapperSpeed: 0.06,
      targets: '.element, .element2'
    });
  }
});
</script>

Option 5: Disable on mobile/touch devices

Luxy.js works on mobile, but if you don’t love how it feels on touch screens, you can disable it with a simple condition. If you want to disable the effect on mobile or tablets, you can wrap the code with a condition that checks for touch input:

<script>
jQuery(document).ready(function($){
  if (! $('body').hasClass('et-fb')) {
    var isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

    if (!isTouch) {
      $('.element').attr({
        'data-speed-y': '-5',
        'data-offset': '20'
      });

      $('.element2').attr({
        'data-speed-y': '3',
        'data-offset': '10'
      });

      luxy.init({
        wrapper: '#et-main-area',
        wrapperSpeed: 0.06,
        targets: '.element, .element2'
      });
    }
  }
});
</script>

And that’s it!

As I mentioned in the tutorial – Luxy is fun to play with, but the parallax effect can be a bit tricky. I recommend using it mainly on background elements, where exact positioning isn’t critical. And it works best on layouts with plenty of white space, so elements have room to breathe and move around.

If you decide to try it on your own site, I’d love to see what you come up with! Tag me or drop a link – let’s spread that smooth scroll joy 💜

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

Divi Lover Shop

6 Comments

Simon C on 2025-04-10 at 16:19

Hi Ania,

Thanks so much for the explainer, its a lovely effect. I have used Option 2 as my header built in theme builder has a sticky element which works fine. My problem is that I cannot scroll to the footer (which is also built in the them builder )
I have tried excluding the main footer using

#main-footer {
position: relative !important;
transform: none !important;
}

but no luck – Have you come across this issue?
Reply
- Ania Romańska on 2025-04-10 at 16:28
  
  Hi Simon, can you share a link, so that I can check this issue for you?
  Reply
  - Simon on 2025-04-11 at 10:12
    
    Hi Ania,
    
    I have it enabled on http://www.gavingreenaway.com
    
    Thanks so much
    
    S
  - Ania Romańska on 2025-04-11 at 10:23
    
    Hi Simon! I see what you mean. It looks like Luxy isn’t calculating the height correctly when using #et-main-content as the wrapper. To work around this, try adding extra bottom padding to your footer: additional 150px should help. See if that resolves the issue.
Rikke on 2025-04-10 at 14:15

Hi Ania,

Thanks so much for another awesome Divi tutorial – I always learn something new from your posts! 🙌

I tried combining Option 2 (fixed navigation) with Option 5 (disabling on touch devices), but I couldn’t quite get it to work properly. I’m not sure if I placed the wrapper and the touch check in the right order, or if something’s conflicting.

Could you help clarify the best way to combine those two options?

Thanks in advance – and keep the great content coming! 💜

Best,
Rikke
Reply
- Ania Romańska on 2025-04-10 at 16:27
  
  Hi Rikke! I’m glad you like it! Option 5 already includes a scenario with a fixed header. The difference between the fixed and no-fixed header version is in the wrapper: '#et-main-area', property: it should be #et-main-area if you are using fixed header, and #page-container if you’re not.
  Reply