143 lines
4.5 KiB
Markdown
143 lines
4.5 KiB
Markdown
# Plan para "Apaciguar" el Efecto Fluid sobre Textos
|
|
|
|
## Comportamiento Actual
|
|
- El efecto de fluid responde al movimiento del mouse en toda la página (gracias a EventListener en document)
|
|
- Cuando el mouse está sobre texto, el efecto es tan intenso que dificulta la lectura
|
|
- La dinámica del efecto (color transition, fuerza, etc.) sigue funcionando bien
|
|
|
|
## Objetivo
|
|
"Apaciguar" el efecto cuando el mouse está sobre áreas de texto - reducir su impacto visual sin eliminar la interacción.
|
|
|
|
## Opciones viables:
|
|
|
|
### Opción 1: Reducir intensidad basado en elementos (Recomendado)
|
|
**Enfoque:** Detectar cuándo el mouse está sobre elementos de texto/lectura y reducir la intensidad
|
|
|
|
#### Implementación:
|
|
```javascript
|
|
// En fluid.js, modificar el event listener
|
|
document.addEventListener("mousemove", function(e) {
|
|
//Verificar si está sobre elementos que no deben tener efecto fuerte
|
|
const overText = isMouseOverTextElements(e.target);
|
|
|
|
if (overText) {
|
|
//Modo "apaciguado" - reducir intensidad
|
|
pointers[0].dx = (e.clientX - canvas.offsetLeft - pointers[0].x) * 2.0; //Reducido (<10.0)
|
|
pointers[0].dy = (e.clientY - canvas.offsetTop - pointers[0].y) * 2.0;
|
|
|
|
//Opcional: reducir el color también
|
|
const mutedColor = [colorArr[0]*0.7, colorArr[1]*0.7, colorArr[2]*0.7];
|
|
pointers[0].color = mutedColor;
|
|
} else {
|
|
//Modo normal - comportamiento actual
|
|
pointers[0].dx = (e.clientX - canvas.offsetLeft - pointers[0].x) * 10.0;
|
|
pointers[0].dy = (e.clientY - canvas.offsetTop - pointers[0].y) * 10.0;
|
|
pointers[0].color = colorArr;
|
|
}
|
|
|
|
pointers[0].x = e.clientX - canvas.offsetLeft;
|
|
pointers[0].y = e.clientY - canvas.offsetTop;
|
|
});
|
|
|
|
function isMouseOverTextElements(target) {
|
|
//Listar selectores de elementos donde NO queremos efecto fuerte
|
|
const textSelectors = [
|
|
'p', '.hero-content p','h1', '.hero-content h1',
|
|
'h2', 'h3', 'a.sheet-link', '.sheet-link span',
|
|
'.menu-btn', '.eyebrow'
|
|
];
|
|
|
|
for (const selector of textSelectors) {
|
|
if (target.closest(selector)) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
```
|
|
|
|
**Ventajas:**
|
|
- Automático y contextual
|
|
- No cambia la dinámica original en áreas no-textuales
|
|
- Conserva completa interacción
|
|
- Personalizable qué elementos "apacigar"
|
|
|
|
---
|
|
|
|
### Opción 2: Transparencia condicional (Alternativa simple)
|
|
**Enfoque:** Reducir opacidad del canvas cuando está sobre texto
|
|
|
|
#### Implementación:
|
|
```css
|
|
/* En styles.css */
|
|
p, h1, h2, h3,
|
|
.sheet-link span,
|
|
.eyebrow {
|
|
position: relative;
|
|
}
|
|
|
|
p::after, h1::after, h2::after, h3::after,
|
|
.sheet-link span::after,
|
|
.eyebrow::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -10px; right: -10px; bottom: -10px; left: -10px;
|
|
z-index: 2;
|
|
}
|
|
```
|
|
|
|
**Ventajas:**
|
|
- Solución CSS-only (no requiere JS)
|
|
- Simple implementación
|
|
|
|
**Desventajas:**
|
|
- No control fino, solo todo o nada
|
|
- Puede afectar capas y layout existing
|
|
|
|
---
|
|
|
|
### Opción 3: Efecto "follow" más suave para texto
|
|
**Enfoque:** Reducir la intensidad (dx/dy multiplier) pero mantener color full
|
|
|
|
#### Implementación:
|
|
```javascript
|
|
document.addEventListener("mousemove", function(e) {
|
|
const isOverReadableText = /(p|h[1-6]|.eyebrow|.sheet-link)/i.test(e.target.className || e.target.tagName);
|
|
|
|
const multiplier = isOverReadableText ? 3.0 : 10.0; // Reducido de 10 a 3 sobre texto
|
|
|
|
pointers[0].dx = (e.clientX - canvas.offsetLeft - pointers[0].x) * multiplier;
|
|
pointers[0].dy = (e.clientY - canvas.offsetTop - pointers[0].y) * multiplier;
|
|
//Restante del código...
|
|
});
|
|
```
|
|
|
|
**Ventajas:**
|
|
- Muy sutil, difícil de notas
|
|
- Conserva dinámica del efecto
|
|
|
|
---
|
|
|
|
## Recomendación Final: Implementar Opción 1 con refinamientos
|
|
|
|
### Cambios específicos:
|
|
1. **En fluid.js** (líneas ~372):
|
|
- Modificar el `mousemove` handler para detectar elementos de texto
|
|
- Aplicar multiplicador reducido (*2 o *3) y color más tenue en esos casos
|
|
|
|
2. **Lista de selectores** para "modo apaciguado":
|
|
```javascript
|
|
['p', 'h1', 'h2', 'h3', '.hero-content h1', '.eyebrow',
|
|
'a.sheet-link', '.sheet-link span', '.menu-btn']
|
|
```
|
|
|
|
### Beneficios clave:
|
|
- 📖 Facilita la lectura al reducir ruido visual sobre texto
|
|
- ✨ Conserva el efecto completo en áreas no-textuales (fondo, logos)
|
|
- 🎨 Mantiene las transiciones de color entre marcas
|
|
- 🚀 Sin cambios en la dinámica del sistema fluid (solo intensidad)
|
|
|
|
### Prueba y ajuste:
|
|
- Probar con diferentes multiplicadores (2.0 vs 3.0) para encontrar el balance ideal
|
|
- Ajustar selectores CSS según qué elementos necesitan "apaciguamiento"
|
|
- Verificar que botones/menu sigan siendo interactivos |