Hình ảnh biểu trưng của mục cho Scroll-Driven Animations Debugger

Scroll-Driven Animations Debugger

Nổi bật
5,0(

5 lượt xếp hạng

)
Tiện íchCông cụ nhà phát triển2.000 người dùng
Hình thu nhỏ video về mặt hàng

Tổng quan

A DevTools extension to visualize and debug Scroll-Driven Animations

Use this DevTools extension to debug and visualize Scroll-Driven Animations. - Visualize the Scroll-Driven Animations’s scroller, element, and subject. - Suppports both ScrollTimeline and ViewTimeline. - Works with both CSS-based and WAAPI-based Scroll-Driven Animations. - Plays nice with `position: sticky`. - Visualize the `animation-range-start` and `animation-range-end`. - Edit the `animation-range-start` and `animation-range-end` values. Once installed, a new pane “Scroll-Driven Animations” gets added to Chrome DevTools’s Elements Panel. To use it, inspect an Element using Chrome DevTools as you’d normally do. Select the “Scroll-Driven Animations” panel to see a visualization of Scroll-Driven Animations that were added to that element. The visualization is a live representation of the scroller, animated element, and – in case of a ViewTimeline – tracked subject: as you scroll in the document, the visualization also updates. Use the top toolbar to switch between multiple animations _(if more than one)_ or to set the visualization’s scale factor. Typically you don’t need to set the scale factor, as the visualization automatically adapts itself to the available space. Also included in the top toolbar are an indicator telling you which type of scroll timeline you are dealing with, and some progress numbers: total scroll progress, effect progress, actual scroll offset _(in pixels)_. Use the “Edit Values” toggle at the bottom to bring up a range editor. Once the editor is shown, the visualization also shows indicators for the start and end range. In case of a ScrollTimeline these are two lines on the scroller’s contents. In case of a ViewTimeline these are two boxes representing the areas for the set `animation-range-*` values. Change the values using the dropdown and/or the inputs. Note that the inputs do not live-update _(for now)_; after changing click somewhere outside the field to update the value.

5/55 lượt xếp hạng

Google không xác minh các bài đánh giá. Tìm hiểu thêm về kết quả và bài đánh giá.

Chi tiết

  • Phiên bản
    1.0.2
  • Đã cập nhật
    2 tháng 5, 2024
  • Nhà cung cấp
    Bramus Van Damme
  • Kích thước
    85.12KiB
  • Ngôn ngữ
    English
  • Nhà phát triển
    Email
    bramus@bram.us
  • Người bán phi thương mại
    Nhà phát triển này không tự nhận mình là người bán. Đối với người tiêu dùng ở Liên minh Châu Âu, xin lưu ý rằng các quyền của người tiêu dùng không được áp dụng trong hợp đồng giữa bạn và nhà phát triển này.

Quyền riêng tư

Nhà phát triển đã công bố rằng sản phẩm này sẽ không thu thập hoặc sử dụng dữ liệu của bạn

Nhà phát triển này tuyên bố rằng dữ liệu của bạn

  • Không được bán cho bên thứ ba, ngoài những trường hợp sử dụng đã được phê duyệt
  • Không được sử dụng hoặc chuyển nhượng cho các mục đích không liên quan đến chức năng chính của mặt hàng
  • Không được sử dụng hoặc chuyển nhượng để xác định khả năng thanh toán nợ hoặc phục vụ mục đích cho vay

Hỗ trợ

Nếu bạn có câu hỏi, ý kiến đề xuất hoặc gặp vấn đề, hãy truy cập trang web hỗ trợ của nhà phát triển để được trợ giúp

Các ứng dụng của Google