rf-v4.9-desafios+soluciones
This commit is contained in:
+295
@@ -0,0 +1,295 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user