Efeito 3D Tilt ao passar o mouse somente com Elementor Free
Sem necessidade de qualquer plugin ou add-ons é possível adquirir efeitos modernos e interessantes utilizando o Elementor Free a partir de incrementações de código.
Copie e cole o código abaixo em um componente HTML Code do Elementor. É necessário incluir o código dentro da tag <script>código abaixo</script>, desta forma. Feito isso, atribua o ID tilt-div ao elemento que tu quer aplicar o efeito.
// Get the div element
const tiltDiv = document.getElementById('tilt-div');
// Add event listener for mousemove event
tiltDiv.addEventListener('mousemove', handleMouseMove);
// Reset transformation on mouse leave
tiltDiv.addEventListener('mouseleave', () => {
tiltDiv.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)';
});
// Function to handle mousemove event
function handleMouseMove(event) {
const rect = tiltDiv.getBoundingClientRect();
const x = event.clientX - rect.left; // X position within the element
const y = event.clientY - rect.top; // Y position within the element
const tiltX = (rect.height / 2 - y) / 25; // Tilt calculation for X axis
const tiltY = (x - rect.width / 2) / 40; // Tilt calculation for Y axis
// Apply the transformation with perspective and rotate based on mouse position
tiltDiv.style.transform = `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
}
Para evitar comportamentos inesperados de mouse hover e obter uma transição suave, adicione uma propriedade CSS conforme o código abaixo. É necessário incluir o código dentro da tag <style>código abaixo</style>, desta forma. Utilize o mesmo componente HTML code e adicione o CSS antes do script do 3D tilt.
#tilt-div {
transition: transform 250ms ease;
}
Passe o mouse sobre imagem abaixo para ver a aplicação:
