En este tutorial aprenderás a crear un increíble efecto de cursor con linterna para tus secciones de Elementor. Este efecto interactivo permite que el cursor funcione como una linterna que ilumina áreas específicas mientras sigues los movimientos del mouse o, en dispositivos móviles, con el gesto de deslizamiento del dedo. Además de mejorar la experiencia de usuario, el diseño es altamente personalizable, lo que te permitirá ajustar el tamaño, la intensidad y el degradado de color de la luz para adaptarlo a tu estilo.
INSTRUCCIONES PARA INSTALAR EL EFECTO DE CURSOR LINTERNA EN ELEMENTOR:
- Accede a tu panel de WordPress:
- Inicia sesión en tu panel de administración de WordPress.
- Instala un plugin de Code Snippets:
- Si aún no tienes un plugin para añadir fragmentos de código, instala y activa el plugin Code Snippets.
- Dirígete a la sección Snippets y haz clic en Añadir nuevo.
- Añade el código del efecto linterna:
- Copia y pega el siguiente código en el nuevo snippet:
function flashlight_cursor_effect() {
?>
<style>
/* Clase CSS para la sección de Elementor */
.flashlight-effect {
position: relative;
background-color: #000000;
overflow: hidden;
cursor: none;
min-height: 100vh; /* Asegura que la sección ocupe el 100% de la pantalla */
}
/* Linterna difusa con fondo oscuro */
.flashlight-effect::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle 15vmax at var(--pointerX) var(--pointerY),
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 255, 255, 0.0) 0%,
rgba(0, 0, 0, 0.95) 90%,
rgba(0, 0, 0, 1) 100%);
pointer-events: none;
transition: background 0.2s ease-out; /* Movimiento más suave */
z-index: 1;
}
/* Asegura que el contenido de la sección se mantenga visible */
.flashlight-effect .elementor-widget-container {
position: relative;
z-index: 2;
}
:root {
--pointerX: 50vw;
--pointerY: 50vh;
}
</style>
<script>
// Efecto de linterna para la clase .flashlight-effect
document.addEventListener('DOMContentLoaded', function() {
var flashlightSection = document.querySelector('.flashlight-effect');
if (flashlightSection) {
// Maneja el evento de movimiento del mouse en escritorio
flashlightSection.addEventListener('mousemove', function(e) {
let x = e.clientX - this.getBoundingClientRect().left;
let y = e.clientY - this.getBoundingClientRect().top;
document.documentElement.style.setProperty('--pointerX', x + 'px');
document.documentElement.style.setProperty('--pointerY', y + 'px');
});
// Maneja el evento de toque (touchmove) para dispositivos móviles
flashlightSection.addEventListener('touchmove', function(e) {
let touch = e.touches[0];
let x = touch.clientX - this.getBoundingClientRect().left;
let y = touch.clientY - this.getBoundingClientRect().top;
document.documentElement.style.setProperty('--pointerX', x + 'px');
document.documentElement.style.setProperty('--pointerY', y + 'px');
}, { passive: true }); // Usamos passive: true para mejorar el rendimiento en móviles
}
});
</script>
<?php
}
add_action('wp_footer', 'flashlight_cursor_effect');
- Guardar y activar el Snippet:
- Una vez que hayas pegado el código, guarda el snippet y actívalo.
- Añadir la clase CSS a la sección de Elementor:
- Ve a la página de Elementor donde deseas aplicar el efecto.
- Selecciona la sección específica y, en las Opciones Avanzadas, añade la clase
flashlight-effectal campo Clase CSS.
- Revisa el efecto en tu sitio:
- Guarda los cambios en tu página y visualiza el efecto de cursor linterna en tu sitio. Asegúrate de probarlo tanto en escritorio como en dispositivos móviles para verificar que funcione correctamente.
¡Y listo! Ahora tendrás un atractivo efecto de linterna que sigue el cursor en tu sitio web de WordPress.