GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 12/12/2019 | 00:00 GMT+7

Cách tạo hoạt ảnh cho các phần tử dọc theo đường dẫn SVG với Thư viện PathSlider

Phần tử path của SVG được dùng để tạo hoạt ảnh sáng tạo cho giao diện user của trang web hoặc ứng dụng web của bạn. Trong hướng dẫn này, ta sẽ chỉ cho bạn cách cài đặt HTML, CSS và JavaScript để di chuyển các phần tử dọc theo path SVG bằng cách sử dụng thư viện PathSlider . Theo toàn bộ hướng dẫn, bạn sẽ phát triển các thanh trượt di chuyển từ vị trí này sang vị trí khác bằng cách sử dụng thư viện này.

Bản trình diễn cơ bản của Path Slider

Bước 1 - Cài đặt Thư viện PathSlider

Trước khi đi vào mã để thanh trượt hoạt động, hãy xem cách ta có thể sử dụng thư viện PathSlider , cũng như khám phá một số tùy chọn của nó.

Đầu tiên, thư viện của ta phụ thuộc vào anime.js , vì vậy ta cần đưa nó vào dự án của bạn trước khi bắt đầu sử dụng PathSlider . Ngoài ra, có một số yêu cầu nhỏ khác phải được tính đến trong mã HTML và CSS để mọi thứ hoạt động chính xác, nhưng ta sẽ thấy chúng khi ta phát triển thanh trượt của bạn .

Để hiểu rõ hơn một số tùy chọn do thư viện cung cấp, hãy xem sơ đồ sau, biểu đồ này hiển thị các phần của đường dẫn SVG và tên của các tham số được minh họa:

Tùy chọn PathSlider

Sơ đồ này mô tả:

  • startLength (float hoặc 'center'): Chiều dài của đường dẫn để bắt đầu định vị các phần tử. Đây sẽ luôn là vị trí của mục đang hoạt động. Một mục đã chọn sẽ di chuyển đến đây, cũng như di chuyển tất cả các mục khác theo đó.
  • activeSeparation (float): activeSeparation cách giữa mục hiện hoạt và các mục liền kề.
  • paddingSeparation (float): paddingSeparation cách đệm ở đầu và cuối đường dẫn.
  • items : Sau khi mục đã chọn được định vị, tất cả các mục khác sẽ được đặt ở cùng một khoảng cách với nhau, với khoảng trống còn lại.

Ngoại trừ items , tất cả các thuộc tính được mô tả ở đây có thể được cung cấp dưới dạng options khi khởi tạo thanh trượt của ta , do đó cung cấp hoàn toàn tự do để tùy chỉnh thanh trượt theo nhu cầu của ta . Ngoài các options , có sẵn các options khác mà bạn có thể tham khảo trong kho lưu trữ PathSlider Github .

Tiếp theo, hãy viết mã HTML của ta .

Bước 2 - Tạo cấu trúc HTML

Mã HTML của ta sẽ là một containers ( .path-slider ), path SVG để trượt các mục qua nó và các mục. Điều quan trọng cần lưu ý là path SVG và các mục phải nằm trong cùng một containers , vì vậy ta có thể tránh các vấn đề với vị trí.

<!-- Path Slider Container --> <div class="path-slider">     <!-- SVG path to slide the items -->     <svg width="460px" height="310px" viewBox="0 0 460 310">         <path d="M 230 5 c -300 0 -300 300 0 300 c 300 0 300 -300 0 -300 Z" class="path-slider__path"></path>     </svg>     <!-- Slider items -->     <a href="#chat" class="path-slider__item">         <div class="item__circle"><svg class="item__icon"><use xlink:href="#chat"/></svg></div>         <div class="item__title"><h2>Chat</h2></div>     </a>     <a href="#alarmclock" class="path-slider__item">         <div class="item__circle"><svg class="item__icon"><use xlink:href="#alarmclock"/></svg></div>         <div class="item__title"><h2>Alarm clock</h2></div>     </a>     <a href="#camera" class="path-slider__item">         <div class="item__circle"><svg class="item__icon"><use xlink:href="#camera"/></svg></div>         <div class="item__title"><h2>Camera</h2></div>     </a>     <a href="#envelope" class="path-slider__item">         <div class="item__circle"><svg class="item__icon"><use xlink:href="#envelope"/></svg></div>         <div class="item__title"><h2>Envelope</h2></div>     </a>     <a href="#lightbulb" class="path-slider__item">         <div class="item__circle"><svg class="item__icon"><use xlink:href="#lightbulb"/></svg></div>         <div class="item__title"><h2>Light bulb</h2></div>     </a> </div>

Bây giờ ta đã có cấu trúc cơ bản, hãy tạo kiểu với CSS.

Bước 3 - Thêm kiểu bằng CSS

Ta không cần bất kỳ phong cách để có được những hoạt động trượt, nhưng ta thường muốn xác định vị trí các mục trong trung tâm của path đột quỵ. Ta cũng sẽ thêm một số phong cách khác để tạo ra một giao diện hiện đại.

Ở đây ta sẽ chỉ tập trung vào các phần chính:

// Circle width and height $circle-width: 74px; $circle-height: 74px;  // Styles for slider items, positioning them absolutely, in the top left corner of the container // Also centering them (see negative values for `left` and `top`) // They will be positioned along the SVG path later with Javascript .path-slider__item {   position: absolute;        // Get items out of the flow, and let the library set the correct position   left: - $circle-width / 2; // Half of the width, for centering purpose   top: - $circle-height / 2; // Half of the height, for centering purpose }  // Styles for the item circle (icon container) .item__circle {   width: $circle-width;    // Desired width   height: $circle-height;  // Desired height }  // Styles for the selected item .path-slider__current-item {    .item__circle {     background-color: #4DA169; // Change circle background-color for selected item     transform: scale(1.5);     // Scale up circle for selected item   } }

Như mọi khi, bạn có thể kiểm tra mã đầy đủ trong kho lưu trữ Github .

Phong cách bây giờ đã hoàn thành. Tiếp theo, hãy khởi tạo thanh trượt bằng JavaScript.

Bước 4 - Khởi tạo Slider bằng JavaScript

Để khởi tạo thanh trượt, ta chỉ cần path và các items . Theo tùy chọn, ta có thể chuyển một đối tượng với options để tùy chỉnh. Do đó, ta có thể làm cho thanh trượt của bạn hoạt động khi cần thiết với một đoạn mã như sau:

// Setting up the options var options = {     startLength: 0, // start positioning the slider items at the beginning of the SVG path     duration: 3000, // animation duration (used by anime.js)     stagger: 15, // incrementally delays between items, producing a staggering effect     easing: 'easeOutElastic', // easing function (used by anime.js)     elasticity: 600, // elasticity factor (used by anime.js)     rotate: true // This indicates that items should be rotated properly to match the SVG path curve };  // Initialize the slider using our SVG path, items, and options new PathSlider('.path-slider__path', '.path-slider__item', options);

Trong đoạn mã này, ta đã comment tất cả các options được sử dụng, để bạn có thể hiểu ý nghĩa của từng options .

Thư viện sẽ khởi tạo các sự kiện click cho từng mục trong thanh trượt, vì vậy nếu ta nhấp vào bất kỳ mục nào trong số chúng, nó sẽ được chọn (hoạt ảnh đến vị trí chính). Nếu ta muốn thêm nhiều điều khiển hơn vào thanh trượt (ví dụ: một số loại phân trang hoặc các node trước và sau), ta có một số chức năng hữu ích mà ta có thể gọi để chọn bất kỳ mục nào:

  • selectPrevItem() : Chọn mục trước đó.
  • selectNextItem() : Chọn mục tiếp theo.
  • selectItem(index) : Chọn bất kỳ mục nào bằng index tương ứng.

Điều này sẽ cung cấp cho bạn một thanh trượt như sau, nơi các phần tử được di chuyển dọc theo path SVG:

Bản trình diễn cơ bản của Path Slider

Kết luận

Trong hướng dẫn này, ta đã phát triển một thanh trượt cơ bản, sử dụng path SVG đóng và một số options được cung cấp bởi thư viện PathSlider . Bạn có thể kiểm tra bản demo trực tiếp , chơi với mã trên Codepen hoặc nhận mã đầy đủ trên Github .

Tags:

Các tin liên quan