Locomotive Scroll: Thư viện cuộn mượt và hiệu ứng Parallax

🚀 Phát hành Locomotive Scroll v5 Beta

Hãy thử phiên bản beta của Locomotive Scroll v5!

🔗 Click here to try Locomotive Scroll v5 Beta

Phản hồi của bạn rất quý báu trong giai đoạn thử nghiệm beta này. Nếu bạn gặp bất kỳ vấn đề nào hoặc có gợi ý, vui lòng open an issue.

Chúc bạn có những khoảnh khắc cuộn mượt mà! 😄

 Locomotive Scroll

Phát hiện các phần tử trong khung nhìn & cuộn mượt với hiệu ứng parallax.

Cài Đặt

⚠️ Scroll-hijacking (chiếm quyền cuộn) là một thực hành gây tranh cãi có thể gây ra vấn đề về khả năng sử dụng, truy cập và hiệu suất. Vui lòng sử dụng một cách có trách nhiệm.

npm install locomotive-scroll

Sử Dụng

Cơ Bản

Với phát hiện đơn giản.

HTML

<h1 data-scroll>Hey</h1>
<p data-scroll>👋</p>

CSS

Thêm các kiểu cơ bản vào tệp CSS của bạn.

locomotive-scroll.css

JS

Với trình bundler

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();

Hoặc không cần trình bundler

<script src="locomotive-scroll.min.js"></script>
<script>
    (function () {
        var scroll = new LocomotiveScroll();
    })();
</script>

Tải về JS file .

Mượt Mà

Với cuộn mượt mà và hiệu ứng parallax.

<div data-scroll-container>
    <div data-scroll-section>
        <h1 data-scroll>Hey</h1>
        <p data-scroll>👋</p>
    </div>
    <div data-scroll-section>
        <h2 data-scroll data-scroll-speed="1">What's up?</h2>
        <p data-scroll data-scroll-speed="2">😬</p>
    </div>
</div>


import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
});

Lưu ý: scroll-sections là tùy chọn nhưng được khuyến nghị để cải thiện hiệu suất, đặc biệt là trên các trang dài.

Nâng Cao

Làm cho nó hoạt động theo ý bạn.

Với phương thức

<section id="js-target">Come here please.</section>


import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();
const target = document.querySelector('#js-target');

scroll.scrollTo(target);

Với sự kiện

<!-- Using modularJS -->
<div data-scroll data-scroll-call="function, module">Trigger</div>
<!-- Using jQuery events -->
<div data-scroll data-scroll-call="EVENT_NAME">Trigger</div>
<!-- Or do it your own way 😎 -->
<div data-scroll data-scroll-call="{y,o,l,o}">Trigger</div>


import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();

scroll.on('call', func => {
    // Using modularJS
    this.call(...func);
    // Using jQuery events
    $(document).trigger(func);
    // Or do it your own way 😎
});

Tùy chọn thể hiện

![Chỉ mượt][mượt-chỉ]
Xác định hướng cử chỉ cuộn trong phiên bản của bạn. Bạn có thể sử dụng:

• vertical (đứng)
• horizontal (ngang)
• both (cả hai)

tablet & smartphone| object| |

Đối tượng cho phép ghi đè một số tùy chọn cho một ngữ cảnh cụ thể. Bạn có thể chỉ định:

• smooth
• direction
• horizontalGesture

Đối với ngữ cảnh tablet, bạn cũng có thể xác định breakpoint ( số nguyên , mặc định là 1024) để đặt điểm ngắt tối đa cho máy tính bảng.

reloadOnContextChange| boolean| false| Cho phép tải lại trang khi chuyển đổi giữa các ngữ cảnh desktop, tablet và smartphone. Điều này có thể hữu ích nếu trang của bạn thay đổi nhiều giữa các ngữ cảnh và bạn muốn đặt lại tất cả mọi thứ.
resetNativeScroll| boolean| true| Đặt history.scrollRestoration = 'manual' và gọi window.scrollTo(0, 0) trong quá trình khởi tạo của locomotive-scroll trong Lớp Native. Hữu ích nếu bạn sử dụng chuyển tiếp với cuộn tự nhiên, nếu không, chúng tôi khuyến nghị đặt nó thành false nếu bạn không muốn làm hỏng tính năng khôi phục cuộn của API Lịch sử.

Thuộc tính phần tử

Phương thức thể hiện

target: Xác định nơi bạn muốn cuộn. Các giá trị có sẵn là :

• node : một phần tử dom
• string : bạn có thể nhập lựa chọn của riêng bạn, hoặc sử dụng các giá trị "top" và "bottom" để đạt tới ranh giới cuộn
• int : Một tọa độ cuộn tuyệt đối theo pixel

options (tùy chọn, object ) : Đối tượng thiết lập. Các giá trị có sẵn là:

• offset ( số nguyên ) : Xác định một khoảng cách từ mục tiêu của bạn. Ví dụ. -100 nếu bạn muốn cuộn lên 100 pixel so với mục tiêu của bạn
• callback ( function ) : Được gọi khi cuộn đến mục tiêu hoàn thành (lưu ý rằng nó sẽ không chờ lerp ổn định)
• duration ( số nguyên ) : Xác định thời gian của hoạt ảnh cuộn trong mili giây. Mặc định là 1000
  ![Chỉ mượt][mượt-chỉ]
• easing ( array ) : Một array gồm 4 số thực nằm giữa 0 và 1 xác định đường cong bezier cho hoạt ảnh điều hòa.
  Mặc định là [0.25, 0.00, 0.35, 1.00]
  Xem https://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation
  Hãy nhớ rằng điều này cũng sẽ bị ảnh hưởng bởi lerp trừ khi bạn đặt _disableLerp_ thành_true_.
  ![Chỉ mượt][mượt-chỉ]
• disableLerp ( boolean ) : Hiệu ứng lerp sẽ không được áp dụng nếu đặt thành true
  ![Chỉ mượt][mượt-chỉ]

Sự kiện thể hiện

Ví dụ về chơi các hoạt ảnh ngày càng phát triển (giống như gsap)

Tất cả các phần tử data-scroll có một giá trị tiến trình. Trong sự kiện cuộn, bạn có thể lấy tất cả các phần tử hiện tại trong khung nhìn.

HTML

<h1 data-scroll data-scroll-id="hey">Hey</h1>

JS

scroll.on('scroll', (args) => {
    // Get all current elements : args.currentElements
    if(typeof args.currentElements['hey'] === 'object') {
        let progress = args.currentElements['hey'].progress;
        console.log(progress);
        // ouput log example: 0.34
        // gsap example : myGsapAnimation.progress(progress);
    }
});

Phụ thuộc

Hỗ trợ trình duyệt

Hoạt động trên hầu hết các trình duyệt hiện đại. Chrome, Firefox, Safari, Edge…

Để có hỗ trợ cho IE 11, bạn cần polyfills. Bạn có thể sử dụng riêng của bạn hoặc bao gồm chúng trước tập lệnh của chúng tôi.

<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
<script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script>

Ai đang sử dụng Locomotive Scroll?

• thierrychopain.com
• clmt.paris
• miragefestival.com/2020
• mazellier.design
• ccccontemple.com
• abhishekjha.me/muteza
• normal.studio
• mixlegno.com
• nfq.group
• works.studio
• beangels.eu
• izakaya-caen.fr
• white-elephant.fr
• henge07.com
• loirevalleylodges.com

Liên quan

• Locomotive Boilerplate 🚂

Chi tiết Tải xuống:

Tác giả: locomotivemtl
Mã nguồn: https://github.com/locomotivemtl/locomotive-scroll
Giấy phép: MIT license