Advertisement
  1. Web Design
  2. Motion

Cách nhanh chóng để thêm Tương tác Vi mô vào Trang web của bạn

by
Read Time:2 minsLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong mẹo nhanh ngày hôm nay, tôi sẽ hướng dẫn cho bạn cách thêm tương tác vi mô hay còn gọi là micro-interaction vào trang web của bạn bằng cách sử dụng thư viện JavaScript có tên là micron.js. Với micron.js, bạn có thể thêm các hiệu ứng tinh tế vào các phần tử trên trang web của bạn mà không cần phải tự viết các style - mọi thứ được thực hiện bằng cách sử dụng thuộc tính data trong markup của bạn. Nào hãy cùng theo dõi nhé!

Xem Video hướng dẫn về Micron.js

1. Tải về micron.js

Hãy truy cập trang chủ micron.js và bạn sẽ thấy, cùng với một số bản demo, một liên kết đến repo. Để bắt đầu, bạn sẽ cần tập tin CSS và  JavaScript, các liên kết CDN cho nó sẽ như sau:

Thêm các liên kết này vào trang của bạn như bình thường hoặc nếu bạn đang sử dụng CodePen, hãy thêm các liên kết vào tab CSS và JavaScript trong cài đặt của pen.

2. Thêm một Tương tác Vi mô

Hãy sử dụng phần tử liên kết làm ví dụ. Thực hiện như sau:

Nhấp vào một liên kết như thế này sẽ không có gì xảy ra cả. Tuy nhiên, bằng cách thêm một thuộc tính data với tên là data-micron, chúng ta có thể thêm một số hiệu ứng tinh tế vào phần tử liên kết của chúng ta.

Ở đây bạn sẽ thấy chúng ta đã thêm giá trị shake vào thuộc tính của chúng ta. Đây chỉ là một trong một số các giá trị có thể có, tất cả đều cho chúng ta một tương tác khác nhau:

  • shake
  • fade
  • jelly
  • bounce
  • tada
  • groove
  • swing
  • squeeze
  • flicker
  • jerk
  • blink
  • pop

Bây giờ, khi bạn nhấp vào liên kết, bạn sẽ thấy một số phản hồi trực quan dưới dạng tương tác vi mô của chúng ta.

3. Điều chỉnh thời lượng của hiệu ứng

Thêm một thuộc tính data khác sẽ cho phép chúng ta thay đổi thời lượng của hiệu ứng:

Giá trị được tính bằng giây, do đó thuộc tính ở trên sẽ làm chậm lại hiệu ứng mặc định trong một giây.

4. Tinh chỉnh Easing Function

Bạn đã nắm được cách làm rồi, phải không? Hãy thêm một thuộc tính khác để tinh chỉnh easing function của hiệu ứng.

Một lần nữa, một số giá trị quen thuộc được hỗ trợ ở đây:

  • linear
  • ease-in
  • ease-out
  • ease-in-out

5. Liên kết với một phần tử khác

Chúng ta có thể sử dụng micron.js để tạo hiệu ứng cho các phần tử khác thay vì phần tử được nhấp vào, lần này với hai thuộc tính data:

Trong trường hợp này, chúng ta sẽ cho bind là true và chúng ta muốn hiệu ứng áp dụng trên một phần tử có id là target.

Hãy xem bản demo của tất cả các ví dụ này ở dưới đây, bao gồm cả ràng buộc (nhấp vào nút bound và xem hiệu ứng trên div màu đỏ):

Phần kết luận

Micron.js vẫn còn nhiều các tương tác vi mô so với những gì đã trình bày trong hướng dẫn này, hãy truy cập trang web, tìm hiểu và tự mình khám phá!

Tìm hiểu thêm

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.