(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Get Elementor Pro Today –
1 – Elementor Pro
Image Scroll effect with Elementor and CSS
There are two versions available below, first version allows you to scroll longer image with scrollbar and second version simply scrolls the image automatically if you hover on it. For the second version, some extra configuration might require if you change the container height, so watch above video to learn it.
- dm-eye is the CSS class of the element that requires track/follow effect.
- Simply change the value from 20 to your desired value to control how strong the track/follow should be at
const dmEyeX = (mouseX – dmEyeRect.x) / 20;
const dmEyeY = (mouseY – dmEyeRect.y) / 20; - Simply add negative(-) sign before dmEyeX or dmEyeY to make track/follow be at opposite direction of mouse cursor.
dmEye.style.transform = `translate(${dmEyeX}px, ${dmEyeY}px)`;
<style>
.dm-eye {
transform: translate(0px,0px);
}
.dm-eye-container {
clip-path: ellipse(49% 27% at 50% 50%);
}
</style>
<script>
const dmEyes = document.querySelectorAll('.dm-eye');
document.addEventListener('mousemove', e => {
const mouseX = e.clientX;
const mouseY = e.clientY;
dmEyes.forEach(dmEye => {
const dmEyeRect = dmEye.getBoundingClientRect();
const dmEyeX = (mouseX - dmEyeRect.x) / 20;
const dmEyeY = (mouseY - dmEyeRect.y) / 20;
dmEye.style.transform = `translate(${dmEyeX}px, ${dmEyeY}px)`;
});
});
</script>
- To add more elements with different track/follow strengths or different track/follow directions. Simply add the below code with changes every time at appropriate locations. You can copy this code multiple times but make sure to change names accordingly.
- Add line number 1 below line 18 in above code.
- Add line number 3 -10 below line number 31 in above code = after first });
- Add any name at secondElements , I have added “s” at the end for easy coding. Also change .second-element to the CSS class used for element.
- Replace secondElements to the name you have used, only in line 3 below. (only first one)
- Replace secondElement (not secondElements), to your desired name. Here I have used secondElement without s for easy coding.
- Replace secondElementRect, secondElementX, secondElementY with your desired name and make sure it is same wherever it is used.
const secondElements = document.querySelectorAll('.second-element');
secondElements.forEach(secondElement => {
const secondElementRect = secondElement.getBoundingClientRect();
const secondElementX = (mouseX - secondElementRect.x) / 20;
const secondElementY = (mouseY - secondElementRect.y) / 20;
secondElement.style.transform = `translate(${secondElementX}px, ${secondElementY}px)`;
});
