Liquid Section Navigator
Un navegador flotante de secciones con indicador líquido, seguimiento del desplazamiento, tres estilos, progreso opcional y menú móvil compacto.
Primeros pasos
- Usa Add to Framer desde la confirmación o el recibo de tu compra, o pega la URL del componente recibido dentro de tu proyecto de Framer.
- Añade una instancia a la página. El editor muestra una vista en línea; Preview y el sitio publicado fijan el navegador a la ventana.
- Asigna a cada sección de destino un nombre de sección de desplazamiento / ID HTML único en Framer, por ejemplo
home,workycontact. El nombre visible de una capa por sí solo no es un ancla. - En Sections, configura Label y el Anchor correspondiente. Puedes escribir
worko#work. Mantén el mismo orden que las secciones de la página. - Elige Appearance → Preset y Layout → Position. Empieza con Bottom Center y Horizontal.
- Abre Preview, prueba cada enlace, recorre la página y revisa el menú móvil. Si un encabezado fijo cubre el destino, ajusta Navigation → Section Offset a su altura.
La lista inicial contiene Home, Work, Services, About y Contact con anclas en minúsculas. El componente no crea esas secciones. Los destinos inexistentes se omiten en el sitio; si ninguno existe, el navegador se oculta. Canvas puede mostrar una indicación de configuración.
Secciones y anclas
| Control | Opciones / valor inicial | Función |
|---|---|---|
| Sections | Hasta 10 entradas | Destinos de la misma página, en orden de navegación. |
| Label | Entrada nueva: Section | Etiqueta visible en escritorio; usa textos breves. |
| Anchor | Entrada nueva: section | ID existente del destino, con o sin #. |
| Mobile Label | Vacío | Etiqueta corta opcional; en su ausencia usa Label. |
| Icon | None, Home, Grid, Spark, Person, Mail, Arrow | Icono integrado antes de la etiqueta; inicial None. |
| Enabled | Activado | Desactivarlo excluye la entrada. |
Usa IDs únicos y etiquetas no vacías. Las entradas desactivadas, inválidas y duplicadas se ignoran. Los IDs distinguen mayúsculas de minúsculas. Los nombres simples en minúsculas y con guiones facilitan la configuración. El componente enlaza secciones de la página actual, no otras rutas ni URLs externas.
El elemento activo sigue el desplazamiento del documento. Al inicio selecciona la primera sección válida; al final de la página, la última. Un clic mantiene seleccionado el destino durante el desplazamiento suave y después devuelve el control al seguimiento. Interrumpirlo con rueda, tacto o teclado libera ese bloqueo. Los cambios de tamaño de las secciones y la carga de contenido pueden actualizar las posiciones detectadas.
Distribución
| Control | Opciones o rango | Valor inicial |
|---|---|---|
| Position | Top Center, Top Left, Top Right, Bottom Center, Bottom Left, Bottom Right | Bottom Center |
| Orientation | Horizontal, Vertical | Horizontal |
| Edge Offset | 0–120 px | 24 px |
| Horizontal Inset | 0–200 px | 0 px |
| Padding | 0–24 px | 6 px |
| Item Gap | 0–24 px | 3 px |
| Item Padding | 8–32 px | 16 px |
| Layer | 0–10000 | 100 |
Edge Offset separa la barra del borde superior o inferior elegido. Horizontal Inset aporta separación horizontal adicional. Layer controla el nivel de superposición. Deja espacio para avisos de cookies, chats y otros controles fijos. La barra contempla las áreas seguras del dispositivo. Las listas horizontales permiten desplazarse cuando su contenido supera el ancho disponible; las verticales limitan su altura a la ventana.
En el sitio, el navegador permanece fijo aunque su instancia esté dentro de un stack. Reserva por tu cuenta el espacio que quieras dejar libre en la composición. Usa una instancia por página salvo que busques mostrar varias barras.
Apariencia y estilos
| Preset | Apariencia |
|---|---|
| Warm Glass | Superficie cálida translúcida, etiquetas oscuras e indicador coral. Inicial. |
| Midnight | Superficie oscura, etiquetas claras e indicador pálido. |
| Cobalt | Superficie azul, etiquetas blancas e indicador blanco. |
Custom Colors está desactivado inicialmente. Actívalo antes de modificar Surface, Border, Blob Color, Typography Active / Inactive o Progress Color / Track. Los valores personalizados guardados no sustituyen al estilo mientras este interruptor esté desactivado.
| Control | Valor inicial | Rango / comportamiento |
|---|---|---|
| Glass | Activado | Habilita transparencia y desenfoque del fondo. |
| Surface | #F5F3ED | Se usa con Custom Colors. |
| Opacity | 0.84 | 0–1; disponible con Glass activado. |
| Blur | 20 px | 0–40 px; disponible con Glass activado. |
| Border | rgba(26,25,23,0.12) | Se usa con Custom Colors. |
| Border Width | 1 px | 0–4 px. |
| Radius | 999 px | 0–999 px; valores altos producen una píldora. |
| Shadow | Sombra exterior suave y brillo interior claro | Control nativo de sombra. |
Desactivar Glass produce una superficie opaca. El desenfoque depende del contenido detrás de la barra y del navegador. Revisa el contraste del texto después de cambiar colores u opacidad.
Indicador y movimiento
Un único indicador activo se desplaza y cambia de tamaño entre etiquetas. Motion ofrece Soft, Balanced (inicial), Snappy y Custom. Liquid Stretch comienza en 0.45 (0–1) y añade una deformación limitada al movimiento; cero elimina ese estiramiento.
| Control | Valor inicial | Rango / comportamiento |
|---|---|---|
| Color | #FF684A | Se usa con Custom Colors. |
| Opacity | 1 | 0–1. |
| Radius | 999 px | 0–999 px. |
| Shadow | Sombra exterior sutil | Control nativo de sombra. |
| Glow | 0 px | 0–24 px. |
| Border / Border Width | Transparente / 0 px | Ancho de borde de 0–4 px. |
| Stiffness | 420 | 50–900; solo con Motion Custom. |
| Damping | 38 | 12–80; solo con Motion Custom. |
| Mass | 0.85 | 0.2–3; solo con Motion Custom. |
Más Stiffness acelera la respuesta; Damping reduce la oscilación; Mass cambia la sensación de peso. Empieza con una opción de movimiento predefinida y usa Custom cuando necesites ajustes finos.
Tipografía
Font es el control tipográfico ampliado de Framer. Los valores iniciales son una fuente sans-serif de 14 px, peso Medium, espaciado -0.02em y altura de línea de 20 px. Inactive y Active comienzan en #1A1917 y se aplican con Custom Colors activado. El indicador se adapta al tamaño de las etiquetas. Los textos largos y las fuentes grandes necesitan más espacio; configura Mobile Label cuando resulte útil.
Navegación y progreso
| Control | Opciones / rango | Valor inicial |
|---|---|---|
| Scroll Behavior | Smooth, Instant | Smooth |
| Section Offset | 0–200 px | 0 px |
| Auto Hide | Activado, desactivado | Desactivado |
| Hide Threshold | 6–60 px | 12 px |
| Scroll Compression | Activado, desactivado | Desactivado |
| Compression | 2–10 | 6 |
| Update Hash | Activado, desactivado | Activado |
| Progress → Type | None, Line, Ring | None |
| Progress → Thickness | 1–6 px | 2 px |
| Progress → Ring Size | 16–40 px | 24 px |
Section Offset se aplica tanto al destino de los clics como a la detección de la sección activa. Auto Hide oculta la barra al bajar y la muestra al subir. Hide Threshold evita cambios por movimientos mínimos. El puntero encima, el foco del teclado, el menú móvil abierto y la navegación protegen el acceso a la barra. Scroll Compression añade una compresión temporal pequeña durante el desplazamiento.
Update Hash sustituye el fragmento de la URL después de navegar sin añadir una entrada de historial por cada clic. Desactívalo si tu página utiliza ese fragmento para otra función.
Progress mide el desplazamiento disponible en todo el documento, no en la sección actual. Line muestra una línea fina en la barra; Ring añade un indicador circular. El estilo controla Color y Track salvo que actives Custom Colors. Sus valores personalizados iniciales son #FF684A y rgba(26,25,23,0.12).
Móvil
Compact Mode está activado inicialmente por debajo de Breakpoint 768 px (ajustable de 480 a 1024). Muestra la sección actual y un botón que despliega la lista. Close on Select está activado. Expanded Style ofrece Rounded (inicial) o Compact. Escape, una interacción exterior o salir del menú con el foco del teclado pueden cerrarlo. El botón de despliegue precede a los enlaces en el orden del teclado.
Accesibilidad
Los enlaces admiten Enter y Space, muestran el foco e identifican el destino activo con aria-current. Accessibility → Nav Label comienza en Page sections; tradúcelo para tu público. El botón del menú compacto utiliza etiquetas integradas de apertura y cierre en inglés. Los objetivos táctiles tienen una altura mínima de 44 px.
Reduced Motion está activado inicialmente. Cuando el dispositivo solicita movimiento reducido, el componente elimina el movimiento líquido y de resorte, desactiva la compresión, usa desplazamiento instantáneo y reduce la animación de ocultación. Mantén esta opción activada para respetar esa preferencia. Revisa tus colores, etiquetas y composición como parte de la evaluación de accesibilidad del sitio.
Demo y entrega
La demo pública incluye un portafolio de ejemplo, una barra de ajustes y Progress Line configurado. El componente independiente comprado comienza con Progress None. El contenido del portafolio y los ajustes de la demo no se incluyen dentro del componente.
La compra incluye acceso mediante Add to Framer y una descarga bilingüe de configuración. No requiere servicios externos, claves de API ni paquetes adicionales de animación. Prueba el desplazamiento y la interacción en Preview o en un sitio publicado; Canvas es una vista en línea para el editor.
Solución de problemas
No aparece el navegador o falta una entrada
Confirma que la sección existe en la página actual, que su ID real coincide con Anchor, que Enabled está activado y que Label tiene contenido. Revisa IDs o entradas duplicadas. El nombre visible de una capa no equivale necesariamente a su ID HTML. Prueba en Preview después de configurar las secciones de desplazamiento.
Un encabezado cubre el destino
Ajusta Section Offset a la altura del encabezado fijo. Mantén las secciones en el orden de la página y evita otros scripts que controlen el desplazamiento de esos mismos enlaces.
No cambian los colores
Activa Appearance → Custom Colors. Mientras esté desactivado, el estilo elegido controla la superficie, el texto, el indicador y el progreso.
Los enlaces móviles están ocultos
Compact Mode muestra inicialmente solo la sección actual. Abre el menú o desactiva Compact Mode. Acorta Mobile Label si la lista horizontal queda apretada; las listas horizontales con exceso de contenido permiten desplazarse.
La barra se superpone a otro elemento fijo
Ajusta Position, Edge Offset y Horizontal Inset. Cambia Layer solo cuando sea adecuado para el orden de superposición de tu página. Revisa escritorio y teléfono.
Canvas se comporta distinto al sitio
Canvas permanece en línea y evita controlar el desplazamiento de la página. Usa Preview para revisar la posición fija, la detección de destinos, el menú móvil y la ocultación automática.
Preguntas frecuentes
¿Crea las secciones de mi página?
No. Añade y nombra los destinos en Framer; después conéctalos mediante Sections.
¿Navega entre páginas o dentro de un marco con desplazamiento propio?
No. Esta versión sigue el desplazamiento del documento y los IDs de la página actual. No sigue contenedores con desplazamiento independiente, rutas entre páginas ni jerarquías de menús anidados.
¿Puedo usar diez secciones?
Sí, hasta diez entradas activadas, válidas y únicas. Usa etiquetas breves y revisa el exceso de contenido en pantallas estrechas. La lista se configura manualmente; no genera la navegación desde una colección CMS.
¿Por qué la última entrada se activa antes de que su título llegue arriba?
Al llegar al final del documento, se activa el último destino válido aunque su sección sea demasiado corta para alcanzar el borde superior. Así las secciones finales breves permanecen accesibles y representadas.
Limitaciones
Esta versión admite hasta diez destinos configurados manualmente en el documento actual. No crea secciones, no navega entre rutas, no genera menús desde CMS ni sigue contenedores con desplazamiento independiente. Las etiquetas largas pueden requerir desplazamiento horizontal. El efecto Glass varía según el contenido detrás de la barra y el navegador. El botón del menú compacto utiliza etiquetas integradas en inglés.
Registro de cambios
v1.0
Lanzamiento inicial.
- Indicador líquido con tres estilos visuales y movimiento de resorte ajustable.
- Seguimiento de secciones, desplazamiento compensado y progreso opcional del documento.
- Seis posiciones fijas, distribución horizontal o vertical y navegación móvil compacta.
- Acceso con teclado, movimiento reducido y documentación en inglés y español.
arforgelabs.support@proton.me