CASO 1
SECTOR
Arquitectura
HERRAMIENTAS
Generate Press + CSS/JS Custom
AÑO
2025
TRABAJO
Maquetación a medida
Maquetación a medida
Maquetación pixel-perfect a partir de diseño entregado en Adobe XD. Implementación completa en WordPress con GeneratePress y código personalizado, respetando tipografías, espaciados y comportamientos interactivos del diseño original. Adaptación responsive para tablet y móvil.
- Problema: La agencia necesitaba una experiencia de navegación inmersiva que ningún plugin ni constructor de páginas podía ofrecer de serie. Scroll por secciones de pantalla completa, titulares que siguen el cursor y un carrusel controlado por rueda del ratón que transiciona suavemente al contenido.
- Solución: Implementé las tres interacciones con JavaScript vanilla y CSS personalizado sobre GeneratePress, sin librerías pesadas, manteniendo un PageSpeed alto.
<div class="image-container custom-cursor">
<a href="/projectes/escola-gem/">
<img src="/wp-content/uploads/2025/06/home.webp" alt="Vestuaris Escola GEM" class="hover-image">
<span class="name-overlay">Vestuaris Escola Gem</span>
</a>
<span class="name-overlay-responsive">Vestuaris Escola Gem</span>
</div>
const hoverImages = document.querySelectorAll('.hover-image');
const offsetDistanceX = 15;
const offsetDistanceY = 0;
hoverImages.forEach(image => {
image.addEventListener('mousemove', e => {
const nameOverlay = image.nextElementSibling;
const boundingRect = image.getBoundingClientRect();
const offsetX = e.clientX - boundingRect.left + window.scrollX + offsetDistanceX;
const offsetY = e.clientY - boundingRect.top + window.scrollY + offsetDistanceY;
nameOverlay.style.left = `${offsetX}px`;
nameOverlay.style.top = `${offsetY}px`;
});
image.addEventListener('mouseenter', () => {
const nameOverlay = image.nextElementSibling;
nameOverlay.classList.add('show');
});
image.addEventListener('mouseleave', () => {
const nameOverlay = image.nextElementSibling;
nameOverlay.classList.remove('show');
});
});
Stack utilizado
- WordPress
- Elementor
- Contact Form 7
- WPML
- Yoast SEO
- Wordfence
