295 lines
11 KiB
HTML
295 lines
11 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 - Pulsos Aleatorios</title>
|
|
<style>
|
|
/* Estilos generales solo para visualizar en este ejemplo */
|
|
body {
|
|
background-color: #0f172a;
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.mi-seccion-web {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.capa-html-nodos {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Estilos de los Nodos */
|
|
.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;
|
|
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);
|
|
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;
|
|
}
|
|
|
|
/* Estilos de las líneas base SVG */
|
|
.linea-base {
|
|
fill: none;
|
|
stroke-width: 1.5;
|
|
opacity: 0.35; /* Un poco más tenues para resaltar la luz */
|
|
}
|
|
|
|
/* NUEVO: Estilo Brillante (Leve) para los datos */
|
|
.linea-pulso {
|
|
fill: none;
|
|
stroke: #ffffff;
|
|
stroke-width: 2.5;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 18 250; /* Pulso de luz corto, separación larga */
|
|
/* Efecto glow con doble sombra: un núcleo brillante y un halo difuso */
|
|
filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 8px rgba(135, 206, 250, 0.7));
|
|
opacity: 0.9;
|
|
mix-blend-mode: screen; /* Fusión luminosa con el fondo */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<section class="mi-seccion-web">
|
|
<div class="animacion-infinito">
|
|
<svg class="capa-svg-lineas" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet">
|
|
<defs id="svg-defs"></defs>
|
|
<g id="grupo-lineas"></g>
|
|
</svg>
|
|
<div class="capa-html-nodos" id="grupo-nodos"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
const nodosData = [
|
|
{ id: 'tl', x0: 200, y0: 125, r: 50, color: '#16a085', html: '<span>LOGO A</span>' },
|
|
{ id: 'bl', x0: 200, y0: 375, r: 50, color: '#2980b9', html: '<span>LOGO B</span>' },
|
|
{ id: 'tr', x0: 800, y0: 125, r: 50, color: '#c0392b', html: '<span>LOGO C</span>' },
|
|
{ id: 'br', x0: 800, y0: 375, r: 50, color: '#f39c12', html: '<span>LOGO D</span>' },
|
|
{ id: 'c', x0: 500, y0: 250, r: 65, color: '#000000', html: '<span>NÚCLEO</span>'}
|
|
];
|
|
|
|
const conexiones = [
|
|
{ id: 'arcL', from: 'tl', to: 'bl', type: 'vertical', curveOut: -120 },
|
|
{ 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 },
|
|
{ id: 'c3', from: 'tr', to: 'c', type: 'horizontal', curveOut: 0 },
|
|
{ id: 'c4', from: 'br', to: 'c', type: 'horizontal', curveOut: 0 }
|
|
];
|
|
|
|
const contenedorNodos = document.getElementById('grupo-nodos');
|
|
const grupoLineas = document.getElementById('grupo-lineas');
|
|
const svgDefs = document.getElementById('svg-defs');
|
|
const nodosMap = {};
|
|
|
|
// 1. Crear Nodos HTML
|
|
nodosData.forEach(nodo => {
|
|
nodosMap[nodo.id] = nodo;
|
|
nodo.floatOffset = Math.random() * 10;
|
|
|
|
const el = document.createElement('div');
|
|
el.className = 'nodo-circulo';
|
|
el.id = `node-${nodo.id}`;
|
|
el.style.backgroundColor = nodo.color;
|
|
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;
|
|
});
|
|
|
|
// 2. Crear Líneas y Gradientes
|
|
const offsetsLineas = [-12, -6, 0, 6, 12]; // Distancias de las 5 líneas paralelas
|
|
|
|
conexiones.forEach(conn => {
|
|
const n1 = nodosMap[conn.from];
|
|
const n2 = nodosMap[conn.to];
|
|
const gradId = `grad-${conn.from}-${conn.to}`;
|
|
|
|
// Gradiente
|
|
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 5 líneas base paralelas
|
|
conn.pathsBase = [];
|
|
offsetsLineas.forEach(offset => {
|
|
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: offset });
|
|
});
|
|
|
|
// NUEVO: Crear 3 pulsos de luz dinámicos por conexión
|
|
conn.pulsos = [];
|
|
for (let i = 0; i < 3; i++) {
|
|
const pathPulso = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
pathPulso.classList.add('linea-pulso');
|
|
grupoLineas.appendChild(pathPulso);
|
|
|
|
conn.pulsos.push({
|
|
el: pathPulso,
|
|
currentOffset: offsetsLineas[Math.floor(Math.random() * offsetsLineas.length)], // Elige línea al azar
|
|
dash: Math.random() * 500, // Desfase inicial
|
|
speed: 1.0 + Math.random() * 1.5 // Velocidad ligeramente distinta para cada uno
|
|
});
|
|
}
|
|
});
|
|
|
|
// Lógica para que los pulsos salten de línea aleatoriamente cada cierto tiempo
|
|
setInterval(() => {
|
|
conexiones.forEach(conn => {
|
|
conn.pulsos.forEach(p => {
|
|
if (Math.random() > 0.4) { // 60% de probabilidad de saltar de carril
|
|
p.currentOffset = offsetsLineas[Math.floor(Math.random() * offsetsLineas.length)];
|
|
}
|
|
});
|
|
});
|
|
}, 1200);
|
|
|
|
// 3. Lógica de animación
|
|
function animarFrame() {
|
|
const tiempo = Date.now() * 0.001;
|
|
|
|
// Flotación de nodos
|
|
nodosData.forEach(nodo => {
|
|
nodo.x = nodo.x0 + Math.sin(tiempo * 1.2 + nodo.floatOffset) * 12;
|
|
nodo.y = nodo.y0 + Math.cos(tiempo * 1.5 + nodo.floatOffset) * 12;
|
|
|
|
nodo.el.style.left = `${(nodo.x / 1000) * 100}%`;
|
|
nodo.el.style.top = `${(nodo.y / 500) * 100}%`;
|
|
});
|
|
|
|
// Recalcular trazados y animar datos
|
|
conexiones.forEach(conn => {
|
|
const n1 = nodosMap[conn.from];
|
|
const n2 = nodosMap[conn.to];
|
|
const isHoriz = conn.type === 'horizontal';
|
|
|
|
const calcularRuta = (offsetX, offsetY) => {
|
|
let cp1x, cp1y, cp2x, cp2y;
|
|
if (isHoriz) {
|
|
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 {
|
|
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}`;
|
|
};
|
|
|
|
// Líneas base acompañando el movimiento
|
|
conn.pathsBase.forEach(p => {
|
|
p.el.setAttribute('d', calcularRuta(isHoriz ? 0 : p.offset, isHoriz ? p.offset : 0));
|
|
});
|
|
|
|
// Pulsos de luz viajando y cambiando de línea
|
|
conn.pulsos.forEach(p => {
|
|
p.dash -= p.speed; // Avanza la animación
|
|
p.el.setAttribute('d', calcularRuta(isHoriz ? 0 : p.currentOffset, isHoriz ? p.currentOffset : 0));
|
|
p.el.style.strokeDashoffset = p.dash;
|
|
});
|
|
});
|
|
|
|
requestAnimationFrame(animarFrame);
|
|
}
|
|
|
|
animarFrame();
|
|
|
|
</script>
|
|
</body>
|
|
</html> |