10 个仓库
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.
This JavaScript smooth scrolling library is a frontend utility and viewport motion controller designed to animate transitions to anchor links. It intercepts standard link clicks to replace instant jumps with fluid movement toward target elements. The library provides configurable motion easing patterns and speed controls to manage acceleration and deceleration. It includes a mechanism to cancel active animations immediately and supports programmatic scroll triggering via direct function calls. The tool handles positioning offsets to prevent target content from being hidden behind fixed heade
Enables programmatic viewport movement to specific DOM elements via JavaScript function calls.
Swup 是一个页面转换库和 AJAX 页面加载器,旨在为服务端渲染的网站创建无缝的动画页面转换。它作为一个 DOM 内容编排器和浏览器历史记录管理器,拦截导航以动态替换页面内容并模拟单页应用程序体验。 该项目的独特之处在于基于 Hook 的生命周期系统和插件架构,允许注入自定义逻辑和动画效果。它支持先进的视觉方法,包括 DOM 内容变形、用于重叠动画的并行 DOM 渲染,以及与原生浏览器 View Transitions API 的集成。 该库涵盖了广泛的功能,包括客户端导航管理、基于内存的页面缓存以及后台页面预加载以优化性能。它还提供了全面的滚动位置恢复、针对屏幕阅读器的无障碍优化,以及在转换过程中同步文档 Head 元数据和脚本执行的工具。
Applies custom attributes to target elements to enable CSS styling when they are scrolled into view.
Simpl 是一个 HTML、CSS 和 JavaScript 示例库,提供了一系列核心 Web 技术和原生浏览器 API 的最小功能演示。它作为前端开发的参考实现和模式库,提供了如何实现常见 Web 功能的实用示例。 该项目展示了广泛的浏览器功能,包括通过 WebSockets 和 WebRTC 进行的实时 Web 通信、用于自适应布局的响应式 Web 设计技术,以及使用 Service Workers 实现离线工作流。它还提供了使用 IndexedDB 和基于浏览器的键值存储进行客户端存储的演示。 该库涵盖了广泛的 Web 功能,包括与设备传感器和地理位置的硬件集成、用于音频和视频的高级媒体捕获和播放,以及使用 Canvas 进行二维和三维图形渲染。其他领域包括数据操作、异步编程以及使用浏览器 API 监控性能和网络连接。
Scroll the page until a specific element becomes visible within the current viewport.
这是一个 React 动画库,提供了一系列组件,用于创建编排运动、复杂过渡和 SVG 形态变换。它作为一个运动设计规范和 UI 组件动画封装系统,用于将 3D 变换、贝塞尔曲线和进入-退出过渡应用于界面元素。 该项目包括一个滚动驱动的动画套件,用于将 UI 运动和视差效果与视口位置同步;以及一个 SVG 运动框架,用于动画化路径、增量绘制线条以及插值坐标以进行形状变换。 其功能涵盖了广泛的视觉运动,包括旋转轮播图等 3D 视觉效果、用于数值插值的数据可视化运动,以及交互式落地页组件。它还管理表格和列表的复杂组件动画,并提供用于对多个元素进行排序和链接动画的工具。
Programmatically scrolls the viewport smoothly to target elements while managing active visibility states.
react-scroll 是一个用于在 React 应用中管理页面元素之间平滑和即时滚动行为的库。它作为一个 DOM 滚动控制器,提供了一个声明式 API 和一组组件,用于将视口动画化到特定的目标元素。 该库通过允许视口通过即时跳转或动画过渡移动到目标元素来实现自定义滚动。它提供了一个系统,通过使用 Mixin 定义特定的移动触发器和目标,将此滚动逻辑集成到自定义组件中。 该项目涵盖了单页应用布局内的视口导航和焦点过渡,将 React 组件中的用户操作链接到页面内的特定位置。
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.