Cuộn xuống hoạt hình CSS

Các ví dụ được nêu dưới đây thường được áp dụng trong các thiết kế trang web trực tuyến. Mã có sẵn cho bạn và cung cấp cho bạn khả năng chỉnh sửa nó thành sáng tạo của riêng bạn

Tìm hiểu cách tạo hoạt ảnh cuộn xuống của riêng bạn

Video dưới đây được chọn lọc cẩn thận và giải thích rõ ràng về cách bạn có thể tự xây dựng mô-đun này

Css Scroll Indicator Animation - Hiệu ứng hoạt hình Css3 thuần túy. Mũi Tên Rơi 1 - Hướng Dẫn Trực Tuyến

Hoạt hình cuộn xuống css - Hướng dẫn CSS thuần túy - Chỉ báo cuộn xuống tùy chỉnh - Hướng dẫn trực tuyến

Cách tạo hoạt ảnh cho nút cuộn xuống. Hướng dẫn HTML và CSS - Mã Julio

Hôm nay chúng ta sẽ tạo hoạt ảnh chỉ báo cuộn xuống bằng cách sử dụng khung hình chính css. Điều này có thể dễ dàng được tích hợp vào trang web của bạn để mang lại nhiều tương tác hơn

Thêm scroll-behavior: smooth vào phần tử để cho phép cuộn trơn tru cho toàn bộ trang (lưu ý. cũng có thể thêm nó vào một phần tử/thùng chứa cuộn cụ thể)

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính scroll-behavior

propertyscroll-behavior61. 079. 036. 014. 048. 0

Giải pháp đa trình duyệt

Đối với các trình duyệt không hỗ trợ thuộc tính scroll-behavior, bạn có thể sử dụng JavaScript hoặc thư viện JavaScript, chẳng hạn như jQuery, để tạo một giải pháp phù hợp với tất cả các trình duyệt

Thí dụ

Mẹo. Đọc thêm về thuộc tính hành vi cuộn trong Tài liệu tham khảo CSS của chúng tôi. Thuộc tính hành vi cuộn CSS

Mã theo. Tom Miller Nếu bạn gặp sự cố với bút, hãy thử bản sao được lưu trữ trên GitHub. cuộn
Đọc thêm

Mã theo. Saranya Mohan Nếu bạn gặp sự cố với bút, hãy thử bản sao được lưu trữ trên GitHub
Đọc thêm

Mã theo. Ryan Mulligan Nếu bạn gặp sự cố với bút, hãy thử bản sao được lưu trữ trên GitHub
Đọc thêm

Nhóm CodeMyUI đã tổng hợp danh sách 15 bộ UI/UX miễn phí mà chúng tôi nghĩ sẽ không chỉ truyền cảm hứng
Đọc thêm

Đây là hướng dẫn từng bước về cách tạo hoạt ảnh CSS và kích hoạt nó khi cuộn bằng API Trình quan sát Giao lộ. Nếu bạn chưa quen với Intersection Observer, đừng để nó làm bạn sợ. nó giống như một trình lắng nghe sự kiện ưa thích và nó kết hợp với nhau trong một vài dòng mã

Kích hoạt hoạt ảnh CSS khi cuộn là một loại hoạt ảnh được kích hoạt bằng cuộn. Khi mọi người nói "khi cuộn", ý của họ thường là "khi phần tử được cuộn vào chế độ xem". Hướng dẫn này sẽ đề cập đến việc tạo hoạt ảnh CSS từ đầu và áp dụng nó khi phần tử đã được cuộn vào chế độ xem

Xác định hoạt ảnh CSS bằng cách sử dụng khung hình chính

Hãy bắt đầu bằng cách tạo hoạt ảnh CSS. Hoạt ảnh CSS được xác định bởi khung hình chính

@keyframes wipe-enter {
	0% {
		transform: scale(0, .025);
	}
	50% {
		transform: scale(1, .025);
	}
}

Bạn có thể đặt tên cho hoạt ảnh của mình bất cứ thứ gì bạn muốn. Tôi đã xác định một hoạt ảnh trong đó phần tử sẽ phát triển rộng rồi cao

Khi các khung hình chính của bạn được xác định, bạn có thể sử dụng hoạt ảnh trên một phần tử bằng cách đặt thuộc tính

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation-name: wipe-enter;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation-name: wipe-enter;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation-name: wipe-enter;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation-name: wipe-enter;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

Tôi đã bọc lớp trong truy vấn phương tiện

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation-name: wipe-enter;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

Đối với bản trình diễn này, tôi đã tạo một phần tử hình vuông sẽ được làm động. Đây là những gì nó trông giống như

Tạm dừng hoạt ảnh

Bạn cũng có thể thiết lập hoạt hình CSS của mình bằng một thuộc tính tốc ký duy nhất

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation-name: wipe-enter;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation: wipe-enter 1s infinite;
  }
}

Kiểm soát hoạt ảnh CSS bằng một lớp

Chúng tôi không muốn hoạt hình phát ngay lập tức. Chúng ta có thể kiểm soát thời điểm hoạt ảnh được phát bằng cách thêm các thuộc tính hoạt ảnh vào một lớp riêng biệt với lớp được sử dụng để tạo kiểu cho phần tử

Khi chúng ta thêm lớp hoạt ảnh vào ô vuông, hoạt ảnh sẽ phát. Thử nó

chuyển đổi lớp học

Bạn sẽ nhận thấy rằng hoạt hình không phát mỗi khi bạn nhấp vào nút. Đó là bởi vì hoạt hình CSS sẽ chỉ kích hoạt khi lớp

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation-name: wipe-enter;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

Mặc dù hoạt ảnh hiển thị phần tử đang nhập, phần tử vẫn hiển thị trước khi lớp hoạt ảnh được thêm vào. Khi trang tải lần đầu tiên, chúng tôi muốn phần tử hiển thị cho người dùng ngay cả khi JavaScript bị chặn hoặc lỗi

Thêm lớp khi phần tử được cuộn vào chế độ xem

Chúng tôi đã tạo một hoạt ảnh CSS và có thể kích hoạt nó bằng cách thêm lớp vào phần tử của chúng tôi. Thay vì thêm và xóa lớp khi nhấp vào nút, chúng ta có thể thêm lớp đó khi phần tử được cuộn vào chế độ xem

Có ba cách để xác định thời điểm phần tử được cuộn vào chế độ xem

1. Sử dụng API quan sát giao lộ
2. Đo phần bù của phần tử khi người dùng cuộn
3. Sử dụng thư viện JavaScript của bên thứ ba triển khai #1 hoặc #2

Đối với hoạt ảnh cơ bản được kích hoạt bằng cuộn giống như hoạt ảnh chúng tôi đang tạo, tôi khuyên bạn nên sử dụng API Trình quan sát Giao lộ vì hoạt ảnh này yêu cầu ít mã hơn và hiệu suất tốt hơn

API Trình quan sát Giao lộ cho phép bạn theo dõi thời điểm một phần tử giao nhau với phần tử khác và cho bạn biết khi điều đó xảy ra. Điều đó thật hoàn hảo để kích hoạt hoạt hình CSS khi cuộn. Chúng tôi muốn biết khi nào hình vuông của chúng tôi giao nhau với chế độ xem. Nếu nó giao nhau, điều đó có nghĩa là hình vuông đang được xem và chúng ta nên kích hoạt hoạt ảnh của mình

Nếu bạn đã quen thuộc với các trình xử lý sự kiện trong JavaScript, bạn có thể coi Intersection Observer là một trình xử lý sự kiện ưa thích với một số tùy chọn bổ sung. Thay vì đính kèm một trình xử lý sự kiện vào một phần tử, chúng tôi yêu cầu người quan sát theo dõi phần tử đó và vị trí của nó trên trang

Hãy bắt đầu bằng cách tạo một người quan sát và để nó theo dõi hình vuông của chúng ta

// Create the observer
const observer = new IntersectionObserver(entries => {
  // We will fill in the callback later...
});

// Tell the observer which elements to track
observer.observe(document.querySelector('.square'));

Theo mặc định, phần tử gốc sẽ được kiểm tra giao điểm là chế độ xem của trình duyệt, vì vậy chúng tôi chỉ cần thông báo cho người quan sát về hình vuông của chúng tôi

Khi chức năng gọi lại chạy, nó cung cấp cho chúng tôi một mảng

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation-name: wipe-enter;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

Trong cuộc gọi lại, chúng ta có thể lặp qua mảng các mục để chỉ định những gì chúng ta muốn làm. Mỗi mục nhập có một thuộc tính

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation-name: wipe-enter;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation: wipe-enter 1s infinite;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation: wipe-enter 1s infinite;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation: wipe-enter 1s infinite;
  }
}

entries.forEach(entry => {
  if (entry.isIntersecting) {
    // It's visible. Add the animation class here!
  }
});

Hãy tập hợp tất cả lại với nhau. Lưu ý rằng

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation: wipe-enter 1s infinite;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation: wipe-enter 1s infinite;
  }
}

const observer = new IntersectionObserver(entries => {
  // Loop over the entries
  entries.forEach(entry => {
    // If the element is visible
    if (entry.isIntersecting) {
      // Add the animation class
      entry.target.classList.add('square-animation');
    }
  });
});

observer.observe(document.querySelector('.square'));

Bây giờ khi hình vuông giao nhau với khung nhìn, lớp hoạt hình sẽ được thêm vào, lớp này sẽ phát hoạt ảnh

Hoạt hình trong bản demo này chỉ phát một lần. Làm mới nếu bạn bỏ lỡ nó

Nếu bạn muốn hoạt ảnh phát mỗi khi phần tử vào chế độ xem, bạn cần xóa lớp hoạt ảnh khi phần tử không còn giao nhau

Nếu phần tử bạn đang tạo hiệu ứng thay đổi kích thước hoặc vị trí, trình duyệt có thể gặp khó khăn trong việc quyết định xem phần tử đó hiện đang ở trong hay ngoài chế độ xem. Tốt nhất là bọc phần tử bạn muốn tạo hiệu ứng trong một phần tử không thay đổi kích thước hoặc vị trí và sử dụng phần tử đó cho người quan sát của bạn thay vì phần tử bạn đang tạo hiệu ứng

<div class="square-wrapper">
  <div class="square"></div>
</div>

Sau đó, chúng tôi quan sát phần tử

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation: wipe-enter 1s infinite;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation: wipe-enter 1s infinite;
  }
}

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const square = entry.target.querySelector('.square');

    if (entry.isIntersecting) {
      square.classList.add('square-animation');
	  return; // if we added the class, exit the function
    }

    // We're not intersecting, so remove the class!
    square.classList.remove('square-animation');
  });
});

observer.observe(document.querySelector('.square-wrapper'));

Bây giờ hình vuông sẽ hoạt hình mỗi khi phần tử trình bao bọc đi vào chế độ xem. Tôi đã hiển thị phần tử bao bọc bằng cách tạo cho nó một đường viền nét đứt. Hãy thử cuộn lên và xuống bản demo bên dưới

Sự thành công. Bằng cách thêm và xóa một lớp CSS khi phần tử đi vào và rời khỏi chế độ xem, chúng ta đã kích hoạt thành công hoạt ảnh CSS khi cuộn

Kích hoạt quá trình chuyển đổi CSS khi cuộn

Nếu hoạt ảnh của bạn chỉ có một bước, chẳng hạn như giảm độ mờ của phần tử từ 0 xuống 1, thì bạn có thể sử dụng chuyển đổi CSS thay vì hoạt ảnh CSS

Phương pháp về cơ bản là giống nhau. Thay vì xác định các khung hình chính cho lớp hoạt hình của chúng tôi, chúng tôi xác định các thuộc tính mà chúng tôi muốn chuyển đổi

.square {
    width: 200px;
    height: 200px;
    background: teal;
    border-radius: 8px;
    opacity: 0;
    transform: scale(1.2);
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    transition: opacity 1.5s ease, transform 1.5s ease;
  }
}

.square-transition {
    opacity: 1;
    transform: none;
}

Hãy lấy một hình vuông khác và làm cho nó mờ dần khi nó đi vào chế độ xem. Bạn có thể thấy tôi đã thêm lớp

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation: wipe-enter 1s infinite;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation-name: wipe-enter;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

Điều này đặc biệt quan trọng vì chúng ta đang bắt đầu từ

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation: wipe-enter 1s infinite;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation: wipe-enter 1s infinite;
  }
}

Khi JavaScript chạy lần đầu tiên, chúng tôi có thể xóa lớp để có thể thêm lại khi chúng tôi thực sự muốn quá trình chuyển đổi diễn ra. Điều này nên được thực hiện bên ngoài trình quan sát, tốt nhất là khi bắt đầu JavaScript của bạn. Đây là mã đầy đủ

@media (prefers-reduced-motion: no-preference) {
  .square {
    animation-name: wipe-enter;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

Và đây là bản demo đã hoàn thành. Quá trình chuyển đổi CSS được kích hoạt khi phần tử trình bao được cuộn vào và ra khỏi chế độ xem. Nếu JS bị lỗi, phần tử sẽ vẫn hiển thị

Như bạn có thể thấy, kỹ thuật này có thể được mở rộng theo nhiều cách để tạo ra một loạt các hoạt ảnh thú vị. Hãy nhớ rằng hoạt ảnh của bạn phải nhanh, thường dưới nửa giây. Tôi đã làm chậm hoạt ảnh trong bài đăng này để chúng dễ nhìn hơn cho mục đích học tập. Nếu bạn sao chép bất kỳ mã nào trong số này, hãy đảm bảo làm cho hoạt ảnh nhanh hơn

Làm cách nào để tạo hoạt ảnh cuộn trong CSS?

Làm cách nào để kích hoạt hoạt ảnh CSS khi cuộn mà không cần JavaScript?