Fading out a section when scrolling down

Ask the community
, ,
1

Hello,

I want to add to my site some JavaScript interaction but I can’t make anything working, despite some research here and there.

I noticed that vanilla JS won’t work on Wix, or Velo doesn’t support DOM.

The idea is ideally (PLEASE correct my code if you see any mistakes, failures,…):

import wixWindow from 'wix-window';

$w.onReady(function () {
    // get section ID to be fade out
    const sectionId = 'sectionFadeOut';

    // add scrolling event to the window
    wixWindow.addEventListener('scroll', function () {
        // get the actual window position relative to the top of the page
        const scrollTop = wixWindow.scrollY;

        // get the section position relative to the top of the page
        const sectionOffset = $w(sectionId).offsetTop;

        // get the height of the section
        const sectionHeight = $w(sectionId).clientHeight;

        // put the opacity according to scrolling position
        const minOpacity = 0;
        const maxOpacity = 1;
        let opacity = 1 - (scrollTop - sectionOffset) / sectionHeight;

        // Limit opacity between 0 and 1
        opacity = Math.max(minOpacity, Math.min(maxOpacity, opacity));

        // apply opacity to the section
        $w(sectionId).opacity = opacity;
    });
});

Thanks for any help

2

Hello,
The easiest way to add scroll effects with Wix, is to use Wix Studio, You ll get plenty No-Code scroll events

1 Like
3

Ok, but what about the total customization by me or my colleagues ? :thinking:
If I want to perform really custom code, would it be at least possible, or only some features, though impressive and usefull, would be there?

More over, if I understood correctly, Studio is more expensive than Editor.

4

fading a section wont work I believe.
It may be possible to fade out a box in the classic editor.

havnt tested but maybe something like this.

// Get the box element
const box = $w("#myBox");

// Set the initial opacity of the box
box.style.opacity = 1;

// Add an event listener for the window scroll event
$w.onReady(function () {
    $w("#page1").onViewportEnter(() => {
        $(window).scroll(function() {
            // Calculate the opacity based on the scroll position
            let opacity = 1 - $(window).scrollTop() / 500;
            // Ensure the opacity value stays between 0 and 1
            opacity = Math.max(opacity, 0);
            opacity = Math.min(opacity, 1);
            // Set the opacity of the box
            box.style.opacity = opacity;
        });
    });
});

…Studio will give you more options. Its worth the small increase in costs

1 Like