Áp dụng thực tế

Example 1

app\welcome\welcome.tsx

import { useEffect } from 'react';
const Welcome = () => {
  useEffect(() => {
    const boxes = document.querySelectorAll('.box');
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          const el = entry.target;
          if (entry.isIntersecting) {
            el.classList.add('show');
          } else {
            el.classList.remove('show');
          }
        });
      },
      {
        threshold: Array.from({ length: 11 }, (_, i) => i / 10), // 0, 0.1, 0.2,...1
      }
    );
    boxes.forEach(box => observer.observe(box));
    return () => boxes.forEach(box => observer.unobserve(box));
  }, []);
  return (
    <main className="items-center pt-16 pb-4">
      <div className="spacer"></div>
      <div className="container flex">
        <div className="box box-red reveal-text">
          <p>Khởi nguồn từ một Sài Gòn không ngủ, đêm hoa lệ, những dãy nhà kinh doanh thịnh vượng phố Bùi Viện, chúng tôi kiến tạo một Sài Gòn thu nhỏ trong lòng thị trấn Tân Trụ. Sài Gòn Town – Phố thương mại không ngủ đầu tiên và sầm uất bậc nhất trong khu vực sẽ là nơi kinh doanh, buôn bán kết hợp các loại hình dịch vụ, giải trí phụ vụ cho 80.000 người dân thuộc huyện Tân Trụ và các khu vực lân cận.</p>
        </div>
        <div className="box box-blue reveal-text">
          <p>Khởi nguồn từ một Sài Gòn không ngủ, đêm hoa lệ, những dãy nhà kinh doanh thịnh vượng phố Bùi Viện, chúng tôi kiến tạo một Sài Gòn thu nhỏ trong lòng thị trấn Tân Trụ. Sài Gòn Town – Phố thương mại không ngủ đầu tiên và sầm uất bậc nhất trong khu vực sẽ là nơi kinh doanh, buôn bán kết hợp các loại hình dịch vụ, giải trí phụ vụ cho 80.000 người dân thuộc huyện Tân Trụ và các khu vực lân cận.</p>
        </div>
        <div className="box box-green reveal-text">
          <p>Khởi nguồn từ một Sài Gòn không ngủ, đêm hoa lệ, những dãy nhà kinh doanh thịnh vượng phố Bùi Viện, chúng tôi kiến tạo một Sài Gòn thu nhỏ trong lòng thị trấn Tân Trụ. Sài Gòn Town – Phố thương mại không ngủ đầu tiên và sầm uất bậc nhất trong khu vực sẽ là nơi kinh doanh, buôn bán kết hợp các loại hình dịch vụ, giải trí phụ vụ cho 80.000 người dân thuộc huyện Tân Trụ và các khu vực lân cận.</p>
        </div>
        <div className="box box-purple reveal-text">
          <p><p>Khởi nguồn từ một Sài Gòn không ngủ, đêm hoa lệ, những dãy nhà kinh doanh thịnh vượng phố Bùi Viện, chúng tôi kiến tạo một Sài Gòn thu nhỏ trong lòng thị trấn Tân Trụ. Sài Gòn Town – Phố thương mại không ngủ đầu tiên và sầm uất bậc nhất trong khu vực sẽ là nơi kinh doanh, buôn bán kết hợp các loại hình dịch vụ, giải trí phụ vụ cho 80.000 người dân thuộc huyện Tân Trụ và các khu vực lân cận.</p></p>
        </div>
      </div>
    </main>
  );
};
export default Welcome;

app\app.css

Example 2 Tuyệt! Hãy mở rộng code của bạn để có hiệu ứng staggered animation – tức là các phần tử xuất hiện dần dần theo thứ tự, giống như slide trong hero hoặc gallery đẹp mắt. (xem thêm 🔝)

app\welcome\welcome.tsx

app\app.css

PreviousỨng dụngNextCSS-only infinite scrolling carousel animation (ok)

Last updated

Was this helpful?