Lay Theme Forum

Up 🧖‍♂️

I figured out how to do it: https://benoitlefeuvre.com/

<script>
let cursorX = 0;
let cursorY = 0;
let cursorMoved = false; 

document.addEventListener("mousemove", (e) => {
    if (!cursorMoved) {
        showCursor(); 
        cursorMoved = true;
    }
    
    cursorX = e.clientX;
    cursorY = e.clientY;
    updateCursorPosition();
});

function updateCursorPosition() {
    const followTexts = document.querySelectorAll(".numbers");
    followTexts.forEach((followText) => {
        followText.style.left = cursorX + "px";
        followText.style.top = cursorY + "px";
    });
}

function showCursor() {
    const followTexts = document.querySelectorAll(".numbers");
    followTexts.forEach((followText) => {
        followText.style.display = "block"; 
    });
}

function hideCursor() {
    const followTexts = document.querySelectorAll(".numbers");
    followTexts.forEach((followText) => {
        followText.style.display = "none"; 
    });
}

window.laytheme.on("newpageshown", function() {
    cursorMoved = false; 
    hideCursor();
});
</script>

I changed web hosting (which was already planned) and the bug doesn't seem to appear anymore.

thank you for updating the js code, but the script doesn't work between pages on carousel, the cursor resets to the top left, do you have any idea how to do this? if you prefer, we can close this topic and open another.

Thanks in advance!

thank you!

it happens when you come from home, it's certain images in the carousel and footer that take a long time to load and asynchronously, it's the only page that does this.

hi, I've had a bug for a long time on this one project page, the images don't all load in the carousel or in the footer afterwards. I've tried making a new page, changing the url, following the steps to follow before posting here, but it always comes back.
I'd be grateful to understand what's going on : https://www.benoitlefeuvre.com/iridescence/

Thanks in advance,
Benoît

Greaaat!

Hi @arminunruh,

it would be great to have above the carousel a column or row of all the thumbnails of the next/prev images and to be able to access them with a click.

Example: https://www.thisisveryrude.com/projects/wt-zine-2023

Thank you for your work!

I managed to make the numbers as custom cursor thanks to chatgpt.
here's what it looks like : https://www.benoitlefeuvre.com/earthworks/

here's the js code :

<script>
        document.addEventListener("mousemove", (e) => {
            const followTexts = document.querySelectorAll(".numbers");
            const x = e.clientX;
            const y = e.clientY;

            // Update the position for each element with the class
            followTexts.forEach((followText) => {
                followText.style.left = x + "px";
                followText.style.top = y + "px";
            });
        });
</script>

then here's the css selector :

.lay-carousel-sink-parent .numbers {
}

I can't share my exact style because I have several hover states on the carousel, so you'll have to specify the css that works best for you.
To retain the next/prev slide function, you'll need to add an empty 10x10px png, for example, to the 'custom mouse cursor' parameters.

I hope this helps !

Up @arminunruh :)
Do you think you can make this feature?
best!

Craig

I finally found another solution with the opacity transition, sorry for late reply

I was able to make the feature I wanted, but the nav.primary arrives a moment after the intro. I think this is due to the "intro animatehide" class, but I can't solve it. Do you know how to do it?

Thank for your help,
Benoît
—
benoitlefeuvre.com/

@arminunruh Thank you Armin 🔱

Hi, I would like to change the style of images only during the intro part (which is a mask showing only the image, the image is not part of the intro section). Any help please ?

benoitlefeuvre.com

Cheers,
Benoît

Hello, I use carousels as a unique element of my project images. I have two image formats, one in 4:5 and one in 16:9. I set the carousel to fixed height 100vh on desktop.
I would like to know if it is possible to activate the fill slides function only for one image ratio (16:9) in the same carousel?

The trick I use today is to make a template in 16:9 with white background on my 4:5 images and keep all my images in the same ratio 16:9 + fill slides activated.

Thanks a lot in advance :)
benoitlefeuvre.com

--

@Richard
The quality of the images is 100% with option to never show resized images activated. The quality of the images in mobile is only problematic for carousels, if you then go to the home (from your phone not from the browser) you can see the difference.

Up! same problem here : https://www.benoitlefeuvre.com/ile-her/
Thank in advance :)