312 lines
12 KiB
HTML
312 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Animación Nodos Infinito</title>
|
|
<style>
|
|
/* Estilos generales solo para visualizar en este ejemplo */
|
|
body {
|
|
background-color: #0f172a; /* Fondo oscuro para resaltar la luz */
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
/* --- CÓDIGO A INSERTAR EN TU SECCIÓN --- */
|
|
|
|
.mi-seccion-web {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
/* El contenedor ocupa el 50% de la sección y mantiene una proporción 2:1 */
|
|
.animacion-infinito {
|
|
width: 50%;
|
|
min-width: 300px;
|
|
max-width: 1000px;
|
|
aspect-ratio: 2 / 1;
|
|
position: relative;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.capa-svg-lineas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1; /* Por detrás de los nodos */
|
|
}
|
|
|
|
.capa-html-nodos {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2; /* Por delante de las líneas */
|
|
pointer-events: none; /* Permite clicks a través del contenedor vacío */
|
|
}
|
|
|
|
/* Estilos de los Nodos (Círculos) */
|
|
.nodo-circulo {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: auto; /* Reactiva interacción en el nodo */
|
|
transition: filter 0.3s ease;
|
|
overflow: hidden;
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.nodo-circulo:hover {
|
|
filter: brightness(1.2);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nodo-contenido {
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: clamp(0.6rem, 1.5vw, 1.2rem); /* Texto responsivo */
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.nodo-contenido img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover; /* Ajusta logos o imágenes png al círculo */
|
|
}
|
|
|
|
/* Estilos de las líneas SVG */
|
|
.linea-base {
|
|
fill: none;
|
|
stroke-width: 1.5;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.linea-pulso {
|
|
fill: none;
|
|
stroke-width: 2.5;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 10 120; /* Tamaño del pulso de luz */
|
|
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
|
|
opacity: 0.8;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<section class="mi-seccion-web">
|
|
|
|
<!-- CONTENEDOR PRINCIPAL DE LA ANIMACIÓN -->
|
|
<div class="animacion-infinito">
|
|
|
|
<!-- SVG para las líneas de conexión dinámicas -->
|
|
<svg class="capa-svg-lineas" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet">
|
|
<defs id="svg-defs">
|
|
<!-- Los gradientes se inyectan por JS para coincidir con los nodos -->
|
|
</defs>
|
|
<g id="grupo-lineas"></g>
|
|
</svg>
|
|
|
|
<!-- Contenedor HTML para los Círculos con contenido -->
|
|
<div class="capa-html-nodos" id="grupo-nodos">
|
|
<!-- Los nodos HTML se renderizan dinámicamente -->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<script>
|
|
/**
|
|
* CONFIGURACIÓN DE LOS CÍRCULOS (NODOS)
|
|
* - id: Identificador único
|
|
* - x0, y0: Coordenadas base en una grilla virtual de 1000x500
|
|
* - r: Radio base del círculo (escala acorde al contenedor)
|
|
* - color: Color principal usado para fondos y fusión de gradientes
|
|
* - html: Contenido interno (Texto o una etiqueta <img src="...">)
|
|
*/
|
|
const nodosData = [
|
|
{ id: 'tl', x0: 200, y0: 125, r: 50, color: '#16a085', html: '<span>LOGO A</span>' }, // Arriba Izquierda (Verde)
|
|
{ id: 'bl', x0: 200, y0: 375, r: 50, color: '#2980b9', html: '<span>LOGO B</span>' }, // Abajo Izquierda (Azul)
|
|
{ id: 'tr', x0: 800, y0: 125, r: 50, color: '#c0392b', html: '<span>LOGO C</span>' }, // Arriba Derecha (Rojo)
|
|
{ id: 'br', x0: 800, y0: 375, r: 50, color: '#f39c12', html: '<span>LOGO D</span>' }, // Abajo Derecha (Naranja)
|
|
{ id: 'c', x0: 500, y0: 250, r: 65, color: '#000000', html: '<span>NÚCLEO</span>'} // Centro (Negro)
|
|
];
|
|
|
|
// Definición de las conexiones lógicas entre nodos
|
|
const conexiones = [
|
|
{ id: 'arcL', from: 'tl', to: 'bl', type: 'vertical', curveOut: -120 }, // Arco exterior izquierdo
|
|
{ id: 'c1', from: 'tl', to: 'c', type: 'horizontal', curveOut: 0 },
|
|
{ id: 'c2', from: 'bl', to: 'c', type: 'horizontal', curveOut: 0 },
|
|
{ id: 'arcR', from: 'tr', to: 'br', type: 'vertical', curveOut: 120 }, // Arco exterior derecho
|
|
{ id: 'c3', from: 'tr', to: 'c', type: 'horizontal', curveOut: 0 },
|
|
{ id: 'c4', from: 'br', to: 'c', type: 'horizontal', curveOut: 0 }
|
|
];
|
|
|
|
// Inicializar elementos DOM
|
|
const contenedorNodos = document.getElementById('grupo-nodos');
|
|
const grupoLineas = document.getElementById('grupo-lineas');
|
|
const svgDefs = document.getElementById('svg-defs');
|
|
|
|
// Mapeo rápido de nodos para acceder por ID
|
|
const nodosMap = {};
|
|
|
|
// 1. Crear Nodos HTML y Gradientes SVG
|
|
nodosData.forEach(nodo => {
|
|
nodosMap[nodo.id] = nodo;
|
|
|
|
// Offset aleatorio para que floten desincronizados
|
|
nodo.floatOffset = Math.random() * 10;
|
|
|
|
// Crear elemento DOM
|
|
const el = document.createElement('div');
|
|
el.className = 'nodo-circulo';
|
|
el.id = `node-${nodo.id}`;
|
|
el.style.backgroundColor = nodo.color;
|
|
// El ancho y alto real se maneja por % para ser responsivo respecto a 1000x500
|
|
el.style.width = `${(nodo.r * 2 / 1000) * 100}%`;
|
|
el.style.height = `${(nodo.r * 2 / 500) * 100}%`;
|
|
|
|
const content = document.createElement('div');
|
|
content.className = 'nodo-contenido';
|
|
content.innerHTML = nodo.html;
|
|
|
|
el.appendChild(content);
|
|
contenedorNodos.appendChild(el);
|
|
nodo.el = el;
|
|
});
|
|
|
|
conexiones.forEach(conn => {
|
|
const n1 = nodosMap[conn.from];
|
|
const n2 = nodosMap[conn.to];
|
|
const gradId = `grad-${conn.from}-${conn.to}`;
|
|
conn.gradId = gradId;
|
|
|
|
// Crear gradiente SVG
|
|
const esHorizontal = conn.type === 'horizontal';
|
|
const grad = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
|
|
grad.setAttribute('id', gradId);
|
|
grad.setAttribute('x1', '0%');
|
|
grad.setAttribute('y1', '0%');
|
|
grad.setAttribute('x2', esHorizontal ? '100%' : '0%');
|
|
grad.setAttribute('y2', esHorizontal ? '0%' : '100%');
|
|
|
|
const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
|
|
stop1.setAttribute('offset', '0%');
|
|
stop1.setAttribute('stop-color', n1.color);
|
|
|
|
const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
|
|
stop2.setAttribute('offset', '100%');
|
|
stop2.setAttribute('stop-color', n2.color);
|
|
|
|
grad.appendChild(stop1);
|
|
grad.appendChild(stop2);
|
|
svgDefs.appendChild(grad);
|
|
|
|
// Crear múltiples paths para dar aspecto de "cable de datos" y luces
|
|
conn.pathsBase = [];
|
|
for (let i = -2; i <= 2; i++) {
|
|
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
path.classList.add('linea-base');
|
|
path.setAttribute('stroke', `url(#${gradId})`);
|
|
grupoLineas.appendChild(path);
|
|
conn.pathsBase.push({ el: path, offset: i * 6 }); // Separación entre cables
|
|
}
|
|
|
|
// Path para el pulso de luz (datos)
|
|
const pathPulso = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
pathPulso.classList.add('linea-pulso');
|
|
pathPulso.setAttribute('stroke', '#ffffff'); // Color de la luz
|
|
grupoLineas.appendChild(pathPulso);
|
|
conn.pathPulso = pathPulso;
|
|
});
|
|
|
|
// 2. Lógica de animación
|
|
let offsetPulsoDatos = 0;
|
|
|
|
function animarFrame() {
|
|
const tiempo = Date.now() * 0.001; // Tiempo en segundos
|
|
|
|
// A. Actualizar posición de los círculos (Flotación en el vacío)
|
|
nodosData.forEach(nodo => {
|
|
// Cálculo de oscilación leve basada en seno y coseno
|
|
nodo.x = nodo.x0 + Math.sin(tiempo * 1.2 + nodo.floatOffset) * 12;
|
|
nodo.y = nodo.y0 + Math.cos(tiempo * 1.5 + nodo.floatOffset) * 12;
|
|
|
|
// Actualizar posiciones en HTML (Usando % para hacerlo 100% responsivo)
|
|
nodo.el.style.left = `${(nodo.x / 1000) * 100}%`;
|
|
nodo.el.style.top = `${(nodo.y / 500) * 100}%`;
|
|
});
|
|
|
|
// B. Animar pulso de datos (CSS Stroke Dashoffset)
|
|
offsetPulsoDatos -= 1.5; // Velocidad del pulso de luz
|
|
|
|
// C. Recalcular trazados de las líneas para acompañar a los círculos
|
|
conexiones.forEach(conn => {
|
|
const n1 = nodosMap[conn.from];
|
|
const n2 = nodosMap[conn.to];
|
|
|
|
// Función que genera un Bezier Curve fluido (forma del infinito)
|
|
const calcularRuta = (offsetX, offsetY) => {
|
|
let cp1x, cp1y, cp2x, cp2y;
|
|
|
|
if (conn.type === 'horizontal') {
|
|
// Curvas hacia el centro (Eje X dinámico para suavidad)
|
|
const distanciaX = n2.x - n1.x;
|
|
cp1x = n1.x + distanciaX * 0.45;
|
|
cp1y = n1.y;
|
|
cp2x = n2.x - distanciaX * 0.45;
|
|
cp2y = n2.y;
|
|
} else {
|
|
// Arcos exteriores
|
|
cp1x = n1.x + conn.curveOut;
|
|
cp1y = n1.y;
|
|
cp2x = n2.x + conn.curveOut;
|
|
cp2y = n2.y;
|
|
}
|
|
|
|
return `M ${n1.x + offsetX} ${n1.y + offsetY}
|
|
C ${cp1x + offsetX} ${cp1y + offsetY},
|
|
${cp2x + offsetX} ${cp2y + offsetY},
|
|
${n2.x + offsetX} ${n2.y + offsetY}`;
|
|
};
|
|
|
|
// Actualizar líneas base
|
|
conn.pathsBase.forEach(p => {
|
|
// Si es horizontal las separamos en el eje Y, si es vertical en el eje X
|
|
const isHoriz = conn.type === 'horizontal';
|
|
p.el.setAttribute('d', calcularRuta(isHoriz ? 0 : p.offset, isHoriz ? p.offset : 0));
|
|
});
|
|
|
|
// Actualizar línea de pulso
|
|
conn.pathPulso.setAttribute('d', calcularRuta(0, 0));
|
|
conn.pathPulso.style.strokeDashoffset = offsetPulsoDatos;
|
|
});
|
|
|
|
requestAnimationFrame(animarFrame); // Bucle infinito a 60fps
|
|
}
|
|
|
|
// Iniciar animación
|
|
animarFrame();
|
|
|
|
</script>
|
|
</body>
|
|
</html> |