Cách tạo băng chuyền image danh mục đầu tư với các thanh trượt được đồng bộ hóa trên trang web
Khi tạo một trang web chuyên nghiệp, việc sử dụng băng chuyền hình ảnh để giới thiệu danh mục đầu tư của bạn sẽ hiển thị trải nghiệm của bạn với phát triển giao diện user một cách thú vị và sáng tạo. Hướng dẫn này sẽ hướng dẫn bạn các bước thiết yếu để tạo và tạo kiểu cho thành phần trang web này. Bạn sẽ viết HTML, tạo kiểu bằng CSS và sử dụng JavaScript để làm cho trang động. Bạn cũng sẽ sử dụng thư viện MomentumSlider để tạo hiệu ứng thanh trượt của bạn .Ví dụ về loại hiệu ứng băng chuyền mà ta đang tìm kiếm như sau:
Lưu ý: Thiết kế root này thuộc về Francesco Zagami, và được xuất bản trên tạp chí Dribbble .
Lập kế hoạch
Trước khi bắt tay vào phát triển thiết kế, ta phải suy nghĩ về cách ta sẽ thực hiện nó, có tính đến công nghệ mà ta có sẵn.
Trong trường hợp này, quan sát kỹ thiết kế, ta có thể thấy rằng Portfolio Carousel bao gồm bốn thanh trượt độc lập (hình ảnh, số, tiêu đề và liên kết) đều được đồng bộ hóa.
Với điều này, ta có thể sử dụng thư viện MomentumSlider mà không gặp vấn đề gì, vì nó cho phép đồng bộ hóa một hoặc một số thanh trượt với thanh trượt chính. Hình ảnh có thể được lấy làm thanh trượt chính, cho phép bạn đồng bộ hóa những hình ảnh khác (số, tiêu đề và liên kết).
Bước 1 - Tạo cấu trúc HTML
Mã HTML của ta sẽ tối thiểu, vì tất cả các thanh trượt sẽ được tạo từ JavaScript với sự trợ giúp của thư viện MomentumSlider. Do đó, đánh dấu của ta sẽ như sau:
<!-- Container for all sliders and pagination --> <main class="sliders-container"> <!-- Here sliders will be injected for images, numbers, titles, and links --> </main> Xin lưu ý ta chưa bao gồm phần còn lại của các yếu tố trang trí mà bạn sẽ thấy trong bản trình diễn cuối cùng , để tập trung vào mã Danh mục đầu tư. Theo cách tương tự, ta sẽ không bao gồm mã CSS tương ứng với các yếu tố trang trí này, điều này chắc chắn sẽ làm cho hướng dẫn này dễ hiểu và dễ làm theo hơn.
Trong mọi trường hợp, bạn luôn có thể kiểm tra mã hoàn chỉnh trong kho lưu trữ Github .
Bước 2 - Thêm kiểu bằng MomentumSlider Mixin
Ngay cả trước khi ta có các thanh trượt trong HTML (vì chúng sẽ được tạo động bằng JavaScript), ta đã có thể xác định một số kiểu cho chúng. Để thực hiện việc này, ta sẽ sử dụng kết hợp SCSS mới do thư viện MomentumSlider cung cấp.
Bạn có thể tìm thấy hỗn hợp SCSS để tạo các kiểu CSS cơ bản của bất kỳ thanh trượt nào được tạo bằng MomentumSlider trong đường dẫn scss/_ms-mixin.scss và có thể nhận các tham số sau:
-
$cssClass: Lớp CSS để trùng với containers thanh trượt. -
$slider-length: Chiều dài (chiều rộng hoặc chiều cao) của containers thanh trượt. -
$slider-center: Nếu thanh trượt phải được căn giữa. -
$slide-width: Chiều rộng cố định cho mỗi slide . -
$slide-height: Chiều cao cố định cho mỗi slide . -
$vertical: Nếu thanh trượt phải là chiều dọc (đúng) hoặc nằm ngang (sai). -
$reverse: If slider nên có các slide đã đảo ngược (các mục đầu tiên ở cuối). -
$debug: Hiển thị màu nền hữu ích để giúp gỡ lỗi.
Ví dụ, sử dụng các giá trị mặc định, sẽ như sau:
@import "ms-mixin"; @include ms( $cssClass: 'ms-container', $slider-length: 400px, $slider-center: false, $slide-width: 90px, $slide-height: 90px, $vertical: false, $reverse: false, $debug: false ); Tất cả các tham số là tùy chọn, sử dụng các giá trị trước đó theo mặc định.
Mixin này tạo phong cách cho các thanh trượt của ta . Hãy xem mã SCSS cho thanh trượt chính của ta (hình ảnh) sẽ trông như thế nào:
@import "ms-mixin"; // Images $ms-images-slide-width: 700px; $ms-images-slide-height: 400px; // Using SCSS mixin to generate the final CSS code for the slider @include ms( $cssClass: 'ms--images', // CSS class to match the slider container $slider-length: 100%, // The slider container will have full width $slider-center: false, // Don't need to center it, as it is full width $slide-width: $ms-images-slide-width, // Fixed width for each slide $slide-height: $ms-images-slide-height, // Fixed height for each slide $vertical: false, // The slider should be horizontal $reverse: false, // Normal order $debug: false // No debug backgrounds in production ); Có thể bạn đã nhận thấy rằng có một số tham số không cần thiết, vì chúng bằng giá trị mặc định. Tuy nhiên, nên viết tất cả các tham số để tránh tham khảo mã mixin.
Cũng nên nhớ rằng ngay từ đầu, để xác định vị trí và kích thước của thanh trượt, bạn nên xác định tham số $debug: true , vì điều này sẽ tạo ra các màu nền hữu ích cho từng phần tử của thanh trượt.
Bước 3 - Khởi tạo Slider bằng JavaScript
Với tất cả các kiểu cơ bản được xác định, ta có thể khởi tạo thanh trượt chính (cho các hình ảnh) như sau:
// Initializing the images slider var msImages = new MomentumSlider({ // Element to append the slider el: '.sliders-container', // CSS class to reference the slider cssClass: 'ms--images', // Generate the 4 slides required range: [0, 3], rangeContent: function () { return '<div class="ms-slide__image-container"><div class="ms-slide__image"></div></div>'; }, // Synchronize the other sliders sync: [msNumbers, msTitles, msLinks], // Styles to interpolate as we move the slider style: { '.ms-slide__image': { transform: [{scale: [1.5, 1]}] } } }); Như trong đoạn mã này, tham số sync nhận được một Array với các thể hiện của các thanh trượt khác mà ta muốn đồng bộ hóa với thanh trượt mới mà ta đang tạo. Trước đó bạn phải khởi tạo các thanh trượt đó.
Bước 4 - Tùy chỉnh kiểu
Để thanh trượt hình ảnh hoạt động bình thường, ta có thể thêm các kiểu khác cần thiết để làm cho băng chuyền danh mục đầu tư của ta trông giống như thiết kế ban đầu:
// Custom styles for images slider .ms--images { left: calc(50% - #{$ms-images-slide-width / 2 - 70px}); &.ms-container--horizontal .ms-track { left: -70px; } // Slides images .ms-slide { &:nth-child(1) .ms-slide__image { background-image: url('../portfolio-carousel/img/harvey-gibson-498362-unsplash.jpg'); } &:nth-child(2) .ms-slide__image { background-image: url('../portfolio-carousel/img/andre-hunter-461305-unsplash.jpg'); } &:nth-child(3) .ms-slide__image { background-image: url('../portfolio-carousel/img/joanna-nix-389128-unsplash.jpg'); } &:nth-child(4) .ms-slide__image { background-image: url('../portfolio-carousel/img/jurica-koletic-321003-unsplash.jpg'); } } .ms-slide__image-container { width: 80%; height: 80%; background-color: rgba(0, 0, 0, 0.3); overflow: hidden; } .ms-slide__image { width: 100%; height: 100%; background-size: cover; } } Một trong những ưu điểm chính của MomentumSlider là nó cho phép ta sửa đổi các kiểu CSS của thanh trượt theo nhu cầu của ta mà không ảnh hưởng đến các chức năng của nó. Ta có thể thêm các kiểu, miễn là ta cẩn thận không overrides kích thước của các slide .
Bước 5 - Thêm phân trang
Thư viện cung cấp một số chức năng sẵn có, nhưng nếu ta muốn có một thành phần phân trang, ta phải tự triển khai nó.
Đây sẽ là mã HTML mà ta sẽ sử dụng, với một phần tử cho mỗi trang trình bày:
<!-- Pagination for the slider --> <ul class="pagination"> <li class="pagination__item"><a class="pagination__button"></a></li> <li class="pagination__item"><a class="pagination__button"></a></li> <li class="pagination__item"><a class="pagination__button"></a></li> <li class="pagination__item"><a class="pagination__button"></a></li> </ul> Trong trường hợp này, ta sẽ không nêu chi tiết mã CSS cần thiết để làm cho thành phần phân trang của ta trông giống như thiết kế. Thay vào đó, hãy xem mã JavaScript để làm cho nó hoạt động bình thường:
// Get pagination items var pagination = document.querySelector('.pagination'); var paginationItems = [].slice.call(pagination.children); // Update initialization for images slider var msImages = new MomentumSlider({ // MORE OPTIONS // Update pagination if slider change change: function(newIndex, oldIndex) { if (typeof oldIndex !== 'undefined') { paginationItems[oldIndex].classList.remove('pagination__item--active'); } paginationItems[newIndex].classList.add('pagination__item--active'); } }); // Select corresponding slider item when a pagination button is clicked pagination.addEventListener('click', function(e) { if (e.target.matches('.pagination__button')) { var index = paginationItems.indexOf(e.target.parentNode); msImages.select(index); } }); Bước 6 - Làm cho nó phản hồi
Để làm cho băng chuyền danh mục đầu tư của ta trông tuyệt vời trên màn hình nhỏ, hãy sửa một số vị trí và giải quyết một số vấn đề nhỏ:
// Responsive styles @media screen and (max-width: 860px) { .ms--numbers { left: calc(50% - #{$ms-numbers-slide-width / 2}); } .ms--titles { left: calc(50% - #{$ms-titles-slide-width / 2}); top: calc(50% - #{$ms-titles-slide-height / 2 + 50px}); text-align: center; } .ms--links { left: calc(50% - #{$ms-links-slide-width / 2}); top: calc(50% + #{$ms-links-slide-height / 2 + 50px}); } .pagination { left: 50%; top: calc(100% - 50px); transform: translateX(-50%); } } @media screen and (max-width: 600px) { .ms--images { overflow: visible; } } @media screen and (max-width: 400px) { .ms--titles { .ms-slide { transform: scale(0.8); } } } Như vậy, băng chuyền danh mục đầu tư của ta trông tuyệt vời trên các màn hình có kích thước bất kỳ.
Kết luận
Trong hướng dẫn này, ta đã thấy các yếu tố cần thiết để tạo ra một băng chuyền danh mục đầu tư trang nhã.
Bạn có thể xem kết quả cuối cùng , cũng như bản demo CodePen .
Các tin liên quan
Cách tạo ứng dụng chuyển văn bản thành giọng nói với API giọng nói trên web2019-12-12
Cách tạo thông báo trên web bằng kênh Laravel và Pusher
2019-12-12
Khả năng truy cập web cho người mới bắt đầu
2019-12-12
Cách cài đặt web server OpenLiteSpeed trên Ubuntu 18.04
2019-12-02
Sử dụng Phông chữ Google trong các Trang web của bạn
2019-08-22
Cách triển khai ứng dụng web Go bằng Nginx trên Ubuntu 18.04
2019-07-24
Biến Gatsby thành PWA: Service Worker và Web App Manifest
2019-07-18
Giới thiệu về Kiểm tra trực quan cho Ứng dụng Web
2019-06-11
Cách cài đặt ứng dụng web bằng Cloudron trên Ubuntu 18.04
2019-05-29
Cách triển khai ứng dụng web Go với Docker và Nginx trên Ubuntu 18.04
2019-04-23
