Currently, I am experimenting with adding jQuery to my Cargo Collective website:
I have been working on a mouse-tracking jQuery effect that I really like, but I am facing an issue where the script does not stay contained in a specific section of the site. As you scroll down the page, the image continues to follow the mouse throughout the entire journey.
Here is the current code snippet:
My goal is to limit the effect to only the top VH/VW area, and disable it when the user scrolls past a certain point within the container. I have tried wrapping it in a div tag and adjusting the height, but so far without success…
Any assistance would be greatly appreciated as always.
Thank you and stay safe.
$(document).on("mousemove", function(event) {
$("img.lisle").css("width", event.pageX)
$("img.lisle").css("height", event.pageY)
$("img.stroke").css("width", $(window).width() - event.pageX)
$("img.stroke").css("height", event.pageY)
})img {
position: absolute;
width: 100%;
height: 100v%;
}
img. lisle {
top: 0 !important;
left: 0 !important;
}
img.stroke {
top: 0 !important;
right: 0 !important;
}<img src="https://freight.cargo.site/t/original/i/52942d135a28c76f77ec1127ef9a8d14d2df813d5f16575bdd381101d8097937/LisleA_Stretch.png" class="lisle" style="width: 1432px; height: 846px;">
<img src="
https://freight.cargo.site/t/original/i/0292f819549959a5b1390d6d3c07c7853f8e95782e81450d62250dfd0b912a3e/test-stroke.png" class="stroke" style="width: 88px; height: 846px;">