10 repositorios
Programmatic movement of the viewport to align with a specific target element.
Distinct from Programmatic Scrolling: Focuses on jumping to a specific element, whereas Programmatic Scrolling typically refers to coordinates.
Explore 10 awesome GitHub repositories matching user interface & experience · Element-Targeted Scrolling. Refine with filters or upvote what's useful.
This project is a collection of official plugin packages and a native integration library designed to provide a consistent interface for accessing hardware and software functionality across different mobile and desktop platforms. It serves as a native platform bridge, enabling cross-platform applications to invoke native code and manage operating system dependencies. The project utilizes a federated plugin architecture, splitting plugins into common interfaces and separate platform implementations to allow for independent development and extension. It further supports native integration throu
Programmatically moves the viewport to align with specific widgets to ensure they are reachable in the UI.
iscroll is a JavaScript smooth scrolling library and web interaction framework. It provides a 2D web panning controller and a CSS transform zoom engine to manage inertial scrolling, panning, and zooming for web elements across different devices. The project enables the implementation of custom scrollbar interfaces and navigation maps that track the current viewport position. It supports the creation of interactive web carousels with element snapping, web parallax effects, and content scaling via pinch-to-zoom or mouse-wheel inputs. The library covers a broad range of interaction capabilities
Allows jumping the scroll position to a specific target element using programmatic calls.
elevator.js is a lightweight JavaScript library that adds a playful, elevator-themed scroll-to-top button to a webpage. When clicked, it smoothly animates the page back to the top while playing a looping elevator music track in the background, masking the transition and adding a whimsical touch to the user experience. The library goes beyond a simple scroll-to-top button by offering configurable scroll duration, the ability to scroll to any specified DOM element with optional vertical padding, and callback hooks that fire user-defined functions at the start and end of the animation. This allo
Ships configurable vertical offset when scrolling to any specified DOM element for precise positioning.
Scrollama is a JavaScript library for scroll-driven storytelling that uses the browser's native IntersectionObserver API to trigger step-based callbacks and animations as the user scrolls through a page. It pins graphic elements using CSS sticky positioning while scrolling through associated text steps, enabling side-by-side narrative experiences without JavaScript-driven layout calculations. The library provides a configurable offset threshold system that accepts a single global offset or per-element data-attribute offsets to define the viewport position that triggers step events. It reports
Allows setting unique viewport offsets for individual step elements via data attributes.
Esta biblioteca de scroll suave para JavaScript es una utilidad frontend y controlador de movimiento del viewport diseñada para animar transiciones hacia enlaces de anclaje. Intercepta los clics estándar en enlaces para reemplazar los saltos instantáneos con un movimiento fluido hacia los elementos de destino. La biblioteca proporciona patrones de suavizado de movimiento configurables y controles de velocidad para gestionar la aceleración y desaceleración. Incluye un mecanismo para cancelar animaciones activas inmediatamente y admite el disparo programático de scroll mediante llamadas directas a funciones. La herramienta maneja offsets de posicionamiento para evitar que el contenido de destino quede oculto detrás de cabeceras fijas y sincroniza la barra de direcciones del navegador durante las transiciones. También cuenta con un sistema de callbacks basado en eventos que dispara efectos secundarios cuando las animaciones de scroll comienzan, concluyen o son interrumpidas.
Enables programmatic viewport movement to specific DOM elements via JavaScript function calls.
Swup es una librería de transición de página y cargador de páginas AJAX diseñado para crear transiciones animadas y fluidas entre páginas en sitios web renderizados por el servidor. Funciona como un orquestador de contenido DOM y gestor de historial del navegador, interceptando la navegación para reemplazar el contenido de la página dinámicamente y simular una experiencia de aplicación de una sola página. El proyecto se diferencia mediante un sistema de ciclo de vida basado en hooks y una arquitectura de plugins que permite la inyección de lógica personalizada y efectos de animación. Soporta métodos visuales avanzados incluyendo el morphing de contenido DOM, renderizado DOM paralelo para animaciones superpuestas e integración con la API nativa de View Transitions del navegador. La librería cubre una amplia gama de capacidades, incluyendo la gestión de navegación del lado del cliente, caché de páginas basada en memoria y precarga de páginas en segundo plano para optimizar el rendimiento. También proporciona una restauración completa de la posición de desplazamiento, optimizaciones de accesibilidad para lectores de pantalla y herramientas para sincronizar metadatos de cabecera de documento y ejecución de scripts a través de transiciones.
Applies custom attributes to target elements to enable CSS styling when they are scrolled into view.
Simpl es una librería de ejemplos de HTML, CSS y JavaScript que proporciona una colección de demostraciones funcionales mínimas de tecnologías web centrales y APIs nativas del navegador. Sirve como implementación de referencia y galería de patrones para el desarrollo frontend, ofreciendo ejemplos prácticos de cómo implementar funciones web comunes. El proyecto muestra una amplia gama de capacidades del navegador, incluyendo comunicación web en tiempo real vía WebSockets y WebRTC, técnicas de diseño web responsivo para diseños adaptativos y la implementación de flujos de trabajo offline utilizando service workers. También proporciona demostraciones para almacenamiento del lado del cliente utilizando IndexedDB y almacenes de clave-valor basados en el navegador. La librería cubre una amplia superficie de capacidades web, incluyendo integración de hardware con sensores de dispositivos y geolocalización, captura y reproducción avanzada de medios para audio y video, y el uso de canvas para renderizado de gráficos en dos y tres dimensiones. Áreas adicionales incluyen manipulación de datos, programación asíncrona y el uso de APIs del navegador para monitorizar el rendimiento y la conectividad de red.
Scroll the page until a specific element becomes visible within the current viewport.
This is a React animation library providing a collection of components for creating choreographed motion, complex transitions, and SVG morphing. It functions as a motion design specification and a UI component animation wrapper system used to apply 3D transforms, Bezier curves, and entry-exit transitions to interface elements. The project includes a scroll-driven animation suite for synchronizing UI movements and parallax effects with the viewport position, as well as an SVG motion framework for animating paths, drawing lines incrementally, and interpolating coordinates for shape morphing. I
Programmatically scrolls the viewport smoothly to target elements while managing active visibility states.
react-scroll es una biblioteca para gestionar el comportamiento de desplazamiento suave e inmediato entre elementos de página en aplicaciones React. Funciona como un controlador de scroll del DOM, proporcionando una API declarativa y un conjunto de componentes para animar el viewport hacia elementos objetivo específicos. La biblioteca permite un desplazamiento personalizado al permitir que el viewport se mueva a los elementos objetivo mediante saltos instantáneos o transiciones animadas. Proporciona un sistema para integrar esta lógica de desplazamiento en componentes personalizados utilizando mixins para definir disparadores y objetivos de movimiento específicos. El proyecto cubre la navegación del viewport y las transiciones de enfoque dentro de diseños de aplicaciones de una sola página (SPA), vinculando las acciones del usuario en los componentes de React a posiciones específicas dentro de la página.
Acts as a declarative controller for programmatically moving the viewport to specific target elements.
Hyperscript is a DOM manipulation library and HTML scripting language that functions as a logic engine and reactive UI framework. It allows for the definition of interactive behavior and client-side logic directly within HTML attributes. The system distinguishes itself through declarative web scripting and in-HTML interactive behavior, which removes the requirement for separate JavaScript files to manage element states. It utilizes a specialized syntax for data processing, employing pipe operators to filter, sort, and convert data collections within the browser. The framework provides capabi
Provides programmatic movement of the viewport to align with specific target elements.