Cách vẽ khi cuộn

Vẽ đồ họa khi cuộn

Sử dụng SVG và JavaScript để vẽ hình tam giác khi cuộn - Lưu ý rằng nó phải là <path> Thành phần:}

Mô hình

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// Lấy phần tử <path> có ID là "triangle"
var triangle = document.getElementById("triangle");
// Lấy độ dài của phần tử <path>
var length = triangle.getTotalLength();
// Vị trí bắt đầu của việc vẽ (đặt chế độ đường viền). Ở đây đặt bằng độ dài của đường dẫn, thực tế là coi toàn bộ đường dẫn là một "đường viền lớn".
triangle.style.strokeDasharray = length;
/* Đặt độ偏移 của đường viền. Ban đầu đặt bằng độ dài của đường dẫn, để toàn bộ đường dẫn bị dịch ra khỏi khung nhìn, từ đó ẩn tam giác.
Với sự cuộn, giá trị này sẽ dần giảm đi, từ đó dần hiển thị tam giác.
Xóa dòng mã này có thể hiển thị tam giác trước khi vẽ cuộn.
triangle.style.strokeDashoffset = length;
// Lắng nghe sự kiện cuộn của cửa sổ và gọi hàm myFunction khi cuộn.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // Tính toán tỷ lệ cuộn = (độ cao cuộn hiện tại) / (độ cao cuộn tổng thể)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Tính toán độ dài cần vẽ = tổng độ dài * tỷ lệ cuộn
  var draw = length * scrollpercent;
  // Khi cuộn lên, thực tế là vẽ ngược lại (từ hoàn chỉnh đến không hoàn chỉnh), vì vậy ở đây sử dụng tổng độ dài trừ đi độ dài cần vẽ.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

Thử ngay

Trang liên quan

Hướng dẫn:Hướng dẫn SVG