Cách tạo trang chủ hấp dẫn trực quan: Phần II


Đặng Bách Du
3 năm trước
Hữu ích 1 Chia sẻ Viết bình luận 0
Đã xem 1303

Cách thêm hiệu ứng và hiệu ứng cụ thể vào thanh Tìm kiếm

Như tôi đã hứa trong bài viết đầu tiên về việc tạo trang chủ với Bootstrap và jQuery, lần này tôi sẽ nói thêm về thanh tìm kiếm trên trang web của chúng tôi và các hiệu ứng của nó. Nói tóm lại, thanh tìm kiếm của chúng tôi sẽ mở ra một cách linh hoạt và hiển thị một cửa sổ phương thức với một chút hiệu ứng nitty-gritty. Vì vậy, hãy lặn xuống!

Về cơ bản, thanh tìm kiếm trên trang web của chúng tôi hoạt động ở hai trạng thái: hoạt động (hình ảnh 1) và không hoạt động (hình ảnh 2).

Hình 1

Hình 2

Hiệu ứng được áp dụng cần phải như sau: khi người dùng nhấp vào nút tìm kiếm, trường tìm kiếm sẽ mở ra một cách trơn tru - từ trung tâm của trang đến viền.

Để sử dụng hiệu ứng đó trên trang web của chúng tôi, tôi cần sử dụng các kiểu hoạt hình cụ thể chịu trách nhiệm mở và đóng các trường tìm kiếm. Tôi đã phải dựa vào như một tập lệnh đặc biệt chịu trách nhiệm cho việc tìm kiếm nhấp và đóng thanh tìm kiếm. Kịch bản tương tự đã được sử dụng khi người dùng nhấp vào bất kỳ khu vực nào không nằm trong trường tìm kiếm hoặc nút tìm kiếm (nó cũng đóng thanh tìm kiếm).

Đây là cách nó hoạt động: khi người dùng nhấn nút tìm kiếm, tập lệnh đặc biệt của chúng tôi sẽ thêm một kiểu lớp với các hiệu ứng hoạt hình cho trường đầu vào. Nhưng, khi người dùng nhấp để đóng trường tìm kiếm, kiểu lớp sẽ bị xóa.

Dưới đây là mã được đặt khi thanh tìm kiếm của chúng tôi không được sử dụng:

color: transparent;

cursor: pointer;

padding: 0;

margin: -12px auto 0 auto;

transition: width 0.5s;

border: 6px solid rgba(255, 255, 255, 0.3);

height: 66px;

width: 69px;

border-radius: 50px !important;

font-size: 36px;

position: absolute;

left: 0;

right: 0;

top:7px;

Đây là mã được thêm vào các trường tìm kiếm khi người dùng nhấp vào tìm kiếm (hoạt động):

width: 100% !important;

height: 60px!important;

margin: -8px auto 0 !important;

padding-left: 25px!important; ;

color: #fff!important;

cursor: auto!important;

top:7px !important;

transition: height 0.2s linear,margin 0.2s linear, width 0.3s linear!important;

z-index: 999;

Điều quan trọng nhất về mã ở trên là Transition. Thuộc tính này được sử dụng khi thanh tìm kiếm của chúng tôi đang hoạt động hoặc không hoạt động. Và, như bạn có thể thấy từ mã, tôi đã chuyển một vài tham số cho nó, chẳng hạn như chiều cao, chiều rộng, lề. Các thuộc tính của yếu tố này rất quan trọng đối với các hiệu ứng hoạt hình đặc biệt của chúng tôi. Vì vậy, nếu bạn so sánh hai trạng thái này, sự khác biệt chính được tạo ra bởi các tính chất này.

Dưới đây, tôi muốn trình bày mã của mình để làm cho trường tìm kiếm của chúng tôi hoạt động trước và chúng không hoạt động trở lại:

$(".form-control").on('click',function() {

      $("#search").addClass("search-focus");

      $(".btn-block-search").find('.btn-search').show();

      $(".btn-block-search").fadeIn(500, 'swing');

      $(".navbar-collapse").removeClass("in");

      $(".close-search").on("click", function () {

          $(".btn-block-search").fadeOut(500, 'swing');

          $(".btn-block-search").find('.btn-search').hide();

          $("#search").removeClass("search-focus");

      })

  }

);

Dưới đây là mã chịu trách nhiệm cho các hành động, chẳng hạn như khi người dùng nhấp vào bất kỳ khu vực nào không thuộc về trường tìm kiếm. Nó cũng cho phép chúng ta chuyển trường tìm kiếm từ trạng thái hoạt động sang trạng thái không hoạt động.

$(window).on('click', function (event) {

  var element = $(event.target);

  if(element.closest('#search').length === 0 && element.closest('.btn-block-search').length === 0) {

      $('.btn-block-search').fadeOut(500, 'swing');

      $(".btn-block-search").find('.btn-search').hide();

      $("#search").removeClass("search-focus");

  }

});

Cách triển khai cuộn thông minh giữa màn hình đầu tiên và nội dung chính của trang web

Bây giờ, tôi muốn nói một chút về một plugin có tên jQuery scrollify. Nhiệm vụ của chúng tôi là như sau: khi người dùng cuộn bằng chuột hoặc nhấp vào thanh cuộn, 'màn hình chính' của trang web sẽ di chuyển đến khu vực nội dung chính của trang web. Như bạn có thể mong đợi, jQuery scrollify sẽ giúp chúng tôi ở đây.

Tôi đã chọn plugin này vì một lý do. Nó khác rất nhiều với các plugin khác, có thể so sánh theo nghĩa là nó rất nhanh và hiệu quả, cộng với có tất cả các tính năng cần thiết của các thư viện lớn hơn. Nó rất dễ dàng để cài đặt và thiết lập là tốt. Bạn có thể tìm thấy rất nhiều tài liệu về plugin này trên Web.

Nhưng lý do chính khiến tôi chọn jQuery scrollify là vì nó cung cấp một cấu trúc hoàn hảo cho HTML. Theo quy định, các plugin tương tự có xu hướng thêm mã không cần thiết vào các tệp và, như bạn có thể đoán, nó dẫn đến nhiều vấn đề trong giai đoạn bố trí của quá trình phát triển. Một nhà phát triển thấy rằng mã này khá gọn gàng và rõ ràng và không mong đợi tìm ra một số yếu tố bổ sung được thêm vào bởi plugin.

Nhưng jQuery scrollify hoàn toàn là một câu chuyện khác. Đây là lý do tại sao:

<div class="example-classname"></div>
<div class="example-classname"></div>

<script>

$.scrollify({

  section : ".example-classname",

  });

</script>

Về cơ bản, bạn có thể tạo bất kỳ số lượng phần tử nào với bất kỳ lớp nào bạn muốn (ví dụ: tên lớp-ví dụ). Sau đó, bạn chỉ cần sử dụng jQuery scrollify để khai báo tên cho các lớp được sử dụng như một cuộn 'không thể phá vỡ'. Như bạn thấy, quá trình này khá đơn giản.

Cách phóng to một khối bằng Hover và mở một khối ẩn

Nhiệm vụ trong tay là như sau: khi người dùng di chuyển qua bất kỳ khối nào, nó sẽ có kích thước lớn hơn và mở ra một khối ẩn có văn bản bên trong. Dưới đây, bạn có thể thấy hình ảnh 3 mô tả ý chính của vấn đề khá tốt.

Hình 3

Trên hình ảnh trên, bạn có thể thấy rõ những gì xảy ra với một yếu tố hoạt động khi người dùng di chuột qua nó.

Nhưng đây là vấn đề: nếu chúng ta cố gắng xây dựng khối của mình theo cách thông thường (một yếu tố trên mỗi dòng), nó sẽ mất chiều cao khi người dùng di chuyển qua nó. Về cơ bản, nó sẽ đến theo quy tắc định vị tuyệt đối. Nhưng chúng ta cần yếu tố đó được định vị trên tất cả những người khác khi ai đó đi qua nó. Dưới đây là mã kích hoạt vấn đề được mô tả ở trên.

<div class=”block”>

<div class=”1”></div>

<div class=”2”></div>

<div class=”3”></div>

<div class=”4”></div>

</div>

<div class=”show-more”></div>

Nói tóm lại, nếu chúng ta sẽ sử dụng mã ở trên, khi ai đó di chuyển qua phần tử bốn lớp, một phần tử có lớp hiển thị nhiều hơn sẽ được đặt ở trên nó. Và lý do cho điều đó khá đơn giản: phần tử mất thuộc tính chiều cao của nó.

Chúng ta hãy xem làm thế nào tôi quản lý để giải quyết vấn đề đó. Tôi chia nhỏ các phần tử với các lớp 1-4 trên mỗi dòng. Sau đó, tôi đánh giá chiều cao của phần tử theo hàng và chiều cao của khối nơi lưu trữ tất cả các phần tử. Sau đó, tôi thực hiện chiều cao. Do đó, tôi nhận được một khối có chiều cao tương tự với chiều cao của phần tử được chọn. Vì vậy, khi ai đó di chuyển qua bất kỳ khối thông tin nào trên trang (và nếu đó là một khối duy nhất trên mỗi dòng), phần tử với lớp hiển thị nhiều hơn sẽ không chạy quanh trang, chặn các phần tử khác.

Đây là một phần của mã HTML mà tôi đã sử dụng để giải quyết vấn đề:

<div class=”block”>

        <div class=”help-block”>

<div class=”1”></div>

<div class=”2”></div>

<div class=”3”></div>

</div>

<div class=”help-block”>

<div class=”4”></div>

</div>

</div>

<div class=”show-more”></div>



Hình 4

Như được thấy từ hình ảnh trên, phần tử 2 sẽ được định vị ở trên phần tử một nếu chúng ta không có khối sao lưu đặc biệt để khắc phục điều đó. Đây là mã được sử dụng để phóng to một khối khi di chuột:

.your-class:hover{

  -webkit-transform: scale(1.1);

  -moz-transform: scale(1.1);

  -o-transform: scale(1.1);

  box-shadow: 2px 2px 10px rgba(0,0,0, 0.5);

  transition: 0.5s;

  position: absolute;

  z-index: 222;

}

.block-that-you-want-show{

    display:none;

}

.your-class:hover .block-that-you-want-show{

  display:block;

}

Bây giờ, tôi muốn chia sẻ một phần mã cho phép thực hiện chiều cao của khối thông tin cho khối sao lưu của chúng tôi. Đây là cách nó trông như thế nào:

$(".relevant-publications-items .row-relevant").each(function(){

  var mh = 0;

  $(this).find(".item").each(function () {

      var h_block = parseInt($(this).outerHeight());

      if(h_block > mh) {

          mh = h_block;

      }

  });

  $(this).css("min-height", mh + 20);

Như bạn thấy, đoạn mã đó không lớn nhưng rất quan trọng. Đây là những gì đằng sau nó. Về cơ bản, tôi lấy một dòng và so sánh chiều cao cho mọi phần tử vật phẩm với chiều cao tối đa có sẵn. Nhưng, vì tất cả các yếu tố nên có cùng chiều cao, bạn chỉ có thể đo một chỉ số chiều cao duy nhất để di chuyển về phía trước.

Dòng dưới cùng

Khi bạn bắt đầu thực hiện bất kỳ nhiệm vụ phát triển nào, trước hết bạn nên tập trung vào việc chọn chồng công nghệ bạn sẽ phải sử dụng. Trong trường hợp của tôi, đây là bootstrap, jQuery, FontAwgie, v.v. vì chúng sử dụng khá thuận tiện.

Tuy nhiên, lý do chính tại sao tôi chọn ngăn xếp đó là đa nhiệm. Chẳng hạn, ưu điểm chính của lưới Bootstrap là bạn không nên suy nghĩ nhiều về phần phản hồi của trang web hoặc suy ngẫm về các kiểu bảng, nút, biểu mẫu, v.v.

Về cơ bản, bạn chỉ có thể chỉnh sửa mã một chút để tạo ra kết quả cần thiết. Vì vậy, nếu bạn chưa từng thử ngăn xếp mà tôi đã sử dụng, hãy dùng thử. Nó sẽ cho phép bạn làm việc với các yếu tố trực quan nhanh hơn nhiều và có kết quả tốt hơn nhiều.

Ngoài ra, tôi muốn chú ý đến một tính năng khác của Khung đó: bạn có thể chắc chắn rằng cấu trúc HTML là hợp lệ (điều này rất quan trọng). Cấu trúc HTML của bạn càng tốt, hiệu suất SEO tốt hơn bạn có thể mong đợi từ trang web của mình.

Tôi hy vọng rằng bài viết này sẽ giúp bạn phát triển trang chủ mát mẻ và ấn tượng. Cảm ơn vì đã dành thời gian cho tôi!

Hữu ích 1 Chia sẻ Viết bình luận 0
Đã xem 1303