Sửa ảnh động JavaScript phụ thuộc vào phương tiện cho các trang web phản hồi

Hiểu vấn đề về hoạt ảnh JavaScript có điều kiện

Thường cần phải kết hợp các hành vi riêng biệt cho các loại thiết bị hoặc kích thước màn hình khác nhau khi sử dụng thiết kế web đáp ứng. Việc sử dụng JavaScript trong tình huống này để kiểm soát hoạt ảnh dựa trên truy vấn phương tiện có thể là một thách thức. Khi hai hoạt ảnh—một hoạt ảnh cho mỗi thiết bị—không hoạt động đồng thời như dự kiến, đó là sự cố thường gặp.

Hai hoạt ảnh JavaScript được sử dụng trong trường hợp này: một cho "cuộn điều hướng" (phù hợp với màn hình lớn hơn) và một cho "cuộn cta" (gọi hành động) dành cho các thiết bị nhỏ hơn. Khó khăn nằm ở việc đảm bảo rằng mọi hoạt ảnh diễn ra riêng biệt theo chiều rộng màn hình trong khi tránh va chạm.

Khi hai hoạt ảnh được đặt trong các thẻ tập lệnh khác nhau và chỉ một trong số chúng hoạt động bình thường thì sẽ xảy ra sự cố. Nếu được thực hiện bất cẩn, việc hợp nhất chúng theo một điều kiện duy nhất hoặc kết hợp các thẻ tập lệnh có thể dẫn đến các vấn đề khác, đặc biệt là khi sử dụng các truy vấn phương tiện như `window.matchMedia()`.

Bài đăng này sẽ trình bày cách sử dụng các điều kiện phương tiện để sắp xếp JavaScript của bạn để mọi hoạt ảnh đều hoạt động như dự định. Để cung cấp sự chuyển tiếp liền mạch giữa thiết bị di động và màn hình lớn hơn, nó sẽ nhấn mạnh vào các câu lệnh có điều kiện và truy vấn phương tiện thích hợp.

Yêu cầu	Ví dụ về sử dụng
window.matchMedia()	JavaScript sử dụng kỹ thuật này để áp dụng các truy vấn phương tiện. Dựa trên kích thước màn hình, nó xác định xem tài liệu có đáp ứng truy vấn phương tiện CSS nhất định hay không và bắt đầu các hoạt động JavaScript có liên quan. Tập lệnh này giúp phân biệt hoạt ảnh trên màn hình lớn hơn với màn hình di động dễ dàng hơn.
addEventListener("change", callback)	Lệnh này theo dõi các sửa đổi đối với trạng thái của truy vấn phương tiện. Chức năng được cung cấp khi gọi lại được thực hiện khi chiều rộng màn hình vượt quá ngưỡng xác định trước (chẳng hạn như 450 pixel). Nó cho phép phản hồi động mà không yêu cầu làm mới trang.
removeEventListener("scroll", callback)	Bằng cách loại bỏ việc xử lý sự kiện vô nghĩa trên kích thước màn hình không chính xác, lệnh này sẽ tối ưu hóa tốc độ bằng cách loại bỏ trình xử lý sự kiện cuộn khi không còn cần thiết. Khi xen kẽ giữa các câu hỏi của phương tiện truyền thông, điều đó là bắt buộc.
window.pageYOffset	Số lượng pixel đã được cuộn lên xuống trong tài liệu được trả về bởi thuộc tính này. Nó được sử dụng để phát hiện xem người dùng đang cuộn lên hay xuống và theo dõi vị trí cuộn.
element.style.top	Lệnh này điều chỉnh thuộc tính CSS hàng đầu của phần tử, thuộc tính này kiểm soát vị trí dọc của phần tử trên trang. Ở đây, nó được sử dụng để xác định vị trí thanh điều hướng sẽ được hiển thị hoặc ẩn trong cuộn của người dùng.
element.style.left	Lệnh này di chuyển các phần tử theo chiều ngang bằng cách điều chỉnh thuộc tính CSS bên trái, giống như element.style.top. Trên thiết bị di động, nó được sử dụng để trượt nút kêu gọi hành động vào và ra khỏi chế độ xem.
mediaQuery.matches	Thuộc tính này xác minh xem truy vấn phương tiện và tài liệu hiện có khớp hay không. Để đảm bảo áp dụng hoạt ảnh thích hợp trên thiết bị di động thay vì máy tính để bàn, điều cần thiết là phải chạy có điều kiện các hoạt ảnh thích hợp dựa trên chiều rộng màn hình.
prevScrollpos >prevScrollpos > currentScrollPos	Để xác định hướng cuộn (lên hoặc xuống), điều kiện này sẽ kiểm tra vị trí cuộn từ lần lặp trước đó và lần lặp hiện tại. Việc xác định cách các mục sẽ phản ứng với thao tác cuộn—ví dụ: bằng cách hiển thị hoặc ẩn các nút hoặc thanh điều hướng—là rất quan trọng.
onscroll	Trình xử lý sự kiện tích hợp được kích hoạt bằng cách cuộn của người dùng. Bằng cách so sánh vị trí cuộn trước đó và hiện tại, nó thực hiện các hoạt ảnh dựa trên cuộn.

Quản lý hoạt ảnh JavaScript dựa trên kích thước màn hình

Các ví dụ trước đây về tập lệnh JavaScript được tạo ra để giải quyết vấn đề có hai hoạt ảnh khác nhau—một cho máy tính để bàn và một cho thiết bị di động. Thách thức chính là đảm bảo rằng mỗi hoạt ảnh chỉ bắt đầu khi cần thiết, tùy thuộc vào độ rộng màn hình của thiết bị. các kỹ thuật được sử dụng để thực hiện điều này, cho phép mã xác định các trường hợp trong đó các điều kiện truy vấn phương tiện cụ thể được đáp ứng. Các tập lệnh đảm bảo rằng mỗi hoạt ảnh hoạt động riêng biệt dựa trên kích thước màn hình bằng cách sử dụng các điều kiện khác nhau cho máy tính để bàn (chiều rộng tối thiểu: 450px) và thiết bị di động (chiều rộng tối đa: 450px).

Hành vi cuộn màn hình lớn hơn cho thanh điều hướng được xử lý trong tập lệnh đầu tiên. Tùy thuộc vào hướng cuộn, thanh vẫn hiển thị hoặc biến mất khi người dùng cuộn lên hoặc xuống. Sử dụng Và các biến, điều này được quản lý bằng cách so sánh vị trí cuộn trước đó và hiện tại. Cuộn lên khiến thanh điều hướng xuất hiện lại bằng cách đặt vị trí trên cùng của nó thành 0 và cuộn xuống khiến thanh điều hướng biến mất bằng cách chuyển nó ra khỏi chế độ xem với giá trị trên cùng âm.

Tập lệnh thứ hai xử lý nút "kêu gọi hành động" (CTA) trên thiết bị di động. Tất cả các kích thước màn hình đều hiển thị nút CTA nhưng nó chỉ hoạt hình khi chiều rộng màn hình nhỏ hơn 450 pixel. Khi người dùng cuộn lên, nút sẽ trượt vào từ bên trái màn hình; khi họ cuộn xuống, nút này sẽ biến mất khỏi chế độ xem. Với logic so sánh vị trí cuộn giống như thanh điều hướng, hành vi này có thể so sánh được. Tuy nhiên, thay vì thay đổi giá trị trên cùng, nó sửa đổi vị trí bên trái của nút, khiến nút này xuất hiện hoặc biến mất tùy theo hướng cuộn.

Hai tập lệnh này có nghĩa là hoạt động riêng biệt với nhau. Tuy nhiên, chúng được gói gọn trong các biểu thức có điều kiện để xác minh độ rộng màn hình nhằm ngăn ngừa xung đột. Với , truy vấn phương tiện có thể được sử dụng trực tiếp trong JavaScript, cho phép các tập lệnh chuyển đổi động giữa hai hoạt ảnh mà không can thiệp lẫn nhau. Bằng cách giữ các hoạt ảnh không liên quan trong phạm vi độ rộng màn hình được chỉ định, phương pháp mô-đun này nâng cao hiệu quả và đảm bảo hoạt động liền mạch trên máy tính để bàn và thiết bị di động.

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

window.onscroll = function() { scrollFunction(); };

function scrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQueryNav.matches) {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  if (mediaQueryCta.matches) {
    // CTA scroll for mobile screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  }
  prevScrollpos = currentScrollPos;
}

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

mediaQueryNav.addEventListener("change", handleNavScroll);
mediaQueryCta.addEventListener("change", handleCtaScroll);

function handleNavScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", navScrollFunction);
  } else {
    window.removeEventListener("scroll", navScrollFunction);
  }
}

function handleCtaScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", ctaScrollFunction);
  } else {
    window.removeEventListener("scroll", ctaScrollFunction);
  }
}

function navScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navigation").style.top = "0";
  } else {
    document.getElementById("navigation").style.top = "-90px";
  }
  prevScrollpos = currentScrollPos;
}

function ctaScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header-button").style.left = "0.25in";
  } else {
    document.getElementById("header-button").style.left = "-10in";
  }
  prevScrollpos = currentScrollPos;
}

// Initial call to apply the correct event listeners
handleNavScroll(mediaQueryNav);
handleCtaScroll(mediaQueryCta);

var prevScrollpos = window.pageYOffset;
var mediaQuery = window.matchMedia("(max-width: 450px)");

window.onscroll = function() { scrollHandler(); };

function scrollHandler() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQuery.matches) {
    // CTA scroll for mobile
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  } else {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  prevScrollpos = currentScrollPos;
}

Tối ưu hóa JavaScript cho hoạt ảnh phản hồi

Một thành phần quan trọng trong việc phát triển các trang web có tính phản hồi cao là đảm bảo rằng các hiệu ứng chuyển tiếp và hoạt ảnh phản hồi khác nhau trên các thiết bị có kích thước khác nhau. Quản lý điều kiện hiệu quả là rất quan trọng khi làm việc với truy vấn phương tiện và JavaScript, đặc biệt khi hoạt ảnh chỉ nhằm mục đích khởi chạy trên các kích thước màn hình cụ thể. Đây là nơi người nghe sự kiện năng động và đi vào chơi. Với sự trợ giúp của các công cụ này, các nhà phát triển có thể đảm bảo rằng hoạt ảnh chỉ khởi chạy khi đáp ứng một số tiêu chí nhất định, cải thiện trải nghiệm và hiệu suất của người dùng trên nền tảng máy tính để bàn cũng như thiết bị di động.

Việc xử lý nhiều hoạt ảnh chạy cùng lúc gây ra một khó khăn khác đối với các hoạt ảnh JavaScript phụ thuộc vào phương tiện. Việc phân chia chức năng thành các trình xử lý sự kiện theo mô-đun, dễ quản lý hơn có thể mang lại hiệu quả kỳ diệu trong tình huống này. Sẽ hiệu quả hơn nếu tách các chức năng khác nhau và kích hoạt chúng dựa trên các truy vấn phương tiện cụ thể thay vì thực thi tất cả các tập lệnh cùng một lúc. Điều này đảm bảo rằng mỗi tập lệnh hoạt động như dự định trên thiết bị phù hợp và giúp tiết kiệm tải trình duyệt không cần thiết.

Tối ưu hóa hiệu suất cho thiết bị di động đặc biệt quan trọng khi làm việc với hoạt ảnh phản hồi. Vì thiết bị di động thường có sức mạnh xử lý thấp hơn máy tính để bàn nên hiệu suất trên thiết bị di động có thể được cải thiện bằng cách giảm độ phức tạp của tập lệnh. Trường hợp sử dụng này trình xử lý sự kiện đảm bảo hiệu quả hoạt động trơn tru của các hoạt ảnh dành riêng cho thiết bị di động chẳng hạn như "cuộn cta" mà không đánh thuế tài nguyên của thiết bị. Hơn nữa, nó đảm bảo rằng các thiết bị lớn hơn chỉ tải hình ảnh động tương ứng với kích thước màn hình.

1. Làm cách nào để sử dụng truy vấn phương tiện trong JavaScript?
2. JavaScript cho phép bạn áp dụng các truy vấn phương tiện với . Bạn có thể sử dụng cách này để chạy các tập lệnh khác nhau dựa trên độ rộng của màn hình.
3. Làm cách nào để kiểm soát hoạt ảnh dựa trên kích thước màn hình?
4. Sử dụng để xác định độ rộng màn hình nhằm điều khiển hoạt ảnh. Sau đó, thêm hoặc xóa trình xử lý sự kiện nếu cần. Điều này đảm bảo rằng, tùy thuộc vào kích thước màn hình, chỉ hoạt ảnh có liên quan sẽ phát.
5. Cách tốt nhất để tối ưu hóa hoạt ảnh cuộn là gì?
6. Bằng cách giảm số lượng thao tác được thực hiện bên trong sự kiện cuộn, có thể được sử dụng hiệu quả hơn trong việc tối ưu hóa hoạt ảnh cuộn. Khi một cuộn được phát hiện, chỉ khi đó logic hoạt ảnh được yêu cầu mới thực thi.
7. Làm cách nào để xử lý nhiều hoạt ảnh trong JavaScript?
8. Nhiều hoạt ảnh có thể được quản lý bằng cách chia chúng thành các điều kiện và trình xử lý sự kiện khác nhau. Điều này làm giảm khả năng xung đột vì mỗi hoạt ảnh hoạt động riêng biệt.
9. làm gì Và làm gì trong một hình ảnh động cuộn?
10. Các biến này giám sát nơi người dùng đang cuộn. Vị trí cuộn trước đó được lưu trữ trong và vị trí cuộn hiện tại được lưu trong . Có thể biết người dùng đang cuộn lên hay cuộn xuống bằng cách so sánh chúng.

Tóm lại, việc tạo ra một trang web đáp ứng yêu cầu quản lý hoạt ảnh JavaScript cho nhiều thiết bị khác nhau. Nhà phát triển có thể cung cấp trải nghiệm người dùng tối ưu bằng cách kích hoạt các hoạt ảnh cụ thể dựa trên chiều rộng màn hình thông qua việc sử dụng các công cụ như .

Khi được triển khai chính xác, các trang web có thể nâng cao hoạt động và hiệu suất trực quan trên nhiều thiết bị khác nhau. Một cách để làm điều này là áp dụng hoạt ảnh cuộn có chọn lọc và tách biệt chúng. Phương pháp này đảm bảo chuyển tiếp liền mạch giữa hoạt ảnh trên máy tính để bàn và thiết bị di động, đồng thời giúp ngăn ngừa xung đột tập lệnh.