Tạo chỉ dẫn cho Website (Demo Tour) bằng Intro.js

nhuy101
18/5/2024 7:17Phản hồi: 3
Tạo chỉ dẫn cho Website (Demo Tour) bằng Intro.js
Bạn muốn hướng dẫn người dùng hoặc giới thiệu Website của bạn một cách trực quan nhất nhưng chưa biết làm thế nào? Intro.js sẽ giúp bạn tạo các bước hướng dẫn một cách dễ dàng, linh hoạt và sinh động.



Lý do nên sử dụng Intro.js

Khi người dùng mới truy cập vào trang web hoặc sản phẩm của bạn, bạn nên chứng minh các tính năng của sản phẩm bằng cách sử dụng hướng dẫn từng bước. Ngay cả khi bạn phát triển và thêm một tính năng mới cho sản phẩm của mình, bạn có thể đại diện cho người dùng của bạn bằng cách sử dụng giải pháp thân thiện. Intro.js được phát triển để cho phép các nhà phát triển web và thiết bị di động tạo ra một giới thiệu từng bước một cách dễ dàng.

Vậy Intro.js là gì ?

Intro.js là mã nguồn mở và tự do sử dụng. Ưu điểm của nó là không phụ thuộc, nhanh và nhỏ chỉ 10KB với Javascript và 2,5KB với CSS, thân thiện với người dùng bằng bàn phím hoặc chuột. Dễ dàng thay đổi chủ đề cho trang Web của bạn. Tương thích với nhiều loại trình duyệt.

Sử dụng như thế nào ?

Intro.js có thể được thêm vào trang web của bạn theo ba bước đơn giản:
  1. Bao gồm intro.jsintrojs.css (hoặc phiên bản đã được minified rút gọn) trong trang của bạn. Sử dụng introjs-rtl.min.css cho hỗ trợ ngôn ngữ từ phải sang trái.
    Tệp lưu trữ trên CDN hiện có tại jsDelivr & cdnjs. Tham khảo tại website.
  2. Thêm data-intro và data-step các phần tử HTML của bạn. Để thêm các gợi ý bạn nên sử dụng data-hint thuộc tính.
    Ví dụ: < a href = ' http://google.com/ ' data-intro = ' Xin chào bước đầu tiên! ' > </ a >
    Google
    google.com

    Bạn có thểm xem tất cả các thuộc tính ở document Intro.js hoặc tham khảo bài viết tại đây.
  3. Gọi hàm JavaScript này: introJs().start();
Xem video hướng dẫn chi tiết hơn tại đây.

Tùy chọn, vượt qua một tham số để introJs chức năng để giới hạn phần trình bày.
Ví dụ: introJs(".introduction-farm").start(); chạy phần giới thiệu cho các phần tử class='introduction-farm'.

Có thể xem trước Intro.js hoạt động thế nào tại source-platform IntroJS.com.

Cảm ơn vì đã xem đến đây, chúc bạn một ngày thật tuyệt vời.

3 bình luận
Chia sẻ

Xu hướng

@khanhtd21 Team mình sử dụng frameworks Next.js là chính để xây dựng website đó nha

Xu hướng

Bài mới









  • Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
  • © 2024 Công ty Cổ phần MXH Tinh Tế
  • Địa chỉ: Số 70 Bà Huyện Thanh Quan, P. Võ Thị Sáu, Quận 3, TPHCM
  • Số điện thoại: 02822460095
  • MST: 0313255119
  • Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019