Tu web en tres pasos
Tres opciones claras, sin letra pequeña.
Colores, logo y dominio en dos minutos.
Tu web en línea con un solo botón.
Pasos con móvil fijo al hacer scroll
Al bajar, el texto de cada paso pasa de largo mientras un móvil a la izquierda se queda fijo y cambia de pantalla.
Ajustes
Código
<div class="uv-tss"><div class="sc" tabindex="0" aria-label="Tu web en tres pasos"><div class="gr"><div class="vs" aria-hidden="true"><div class="ph"><span class="fc on" style="--c:#6366f1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="5" width="16" height="14" rx="2.5"/><path d="M8 10h8M8 14h5"/></svg></span><span class="fc" style="--c:#ec4899"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"/><circle cx="9" cy="10" r="1.2" fill="currentColor"/><circle cx="14.5" cy="9" r="1.2" fill="currentColor"/><circle cx="15.5" cy="14" r="1.2" fill="currentColor"/></svg></span><span class="fc" style="--c:#10b981"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3c3 2.5 4.5 5.5 4.5 9l-2 3h-5l-2-3c0-3.5 1.5-6.5 4.5-9zM9.5 15l-2.5 4M14.5 15l2.5 4M12 9.5v.01"/></svg></span><i class="bar"></i></div></div><div class="ls"><h3>Tu web en tres pasos</h3><section class="on"><span>01</span><b>Elige tu plan</b><p>Tres opciones claras, sin letra pequeña.</p></section><section><span>02</span><b>Personaliza</b><p>Colores, logo y dominio en dos minutos.</p></section><section><span>03</span><b>Publica</b><p>Tu web en línea con un solo botón.</p></section><div class="end"></div></div></div></div><span class="hn" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg>Desplázate</span></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Texto y scroll
Ver todos: Texto y scrollDónde usarlo
Un diseño clásico de scrollytelling para onboarding o recorridos de producto. Un móvil vive en una columna fija y cambia entre tres pantallas de color con iconos, mientras los pasos de la derecha se desplazan. El paso que cruza el centro de la vista se resalta y los demás se apagan, así la atención queda en una idea cada vez.
El script compara cada paso con el centro del contenedor y cambia una clase, y CSS se encarga de las transiciones de pantalla. Edita los títulos, descripciones, colores e iconos de los pasos para explicar tu propio proceso.