Á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

@import "tailwindcss";
.spacer {
  height: 100vh;
}
@theme {
  --animate-reveal-text: reveal-text 1.5s ease-in-out forwards 0.5s;
  @keyframes reveal-text {
    0% {
      transform: translateX(17%);
      clip-path: inset(0px 50% 0px 50%);
      -webkit-clip-path: inset(0px 50% 0px 50%);
    }
    100% {
      clip-path: inset(0px 0px 0px 0px);
      -webkit-clip-path: inset(0px 0px 0px 0px);
      transform: translateX(0%);
      opacity: 1;
    }
  }
}
.reveal-text {
  @apply opacity-0 transform translate-x-0;
}
.reveal-text.show {
  @apply animate-reveal-text;
}
.box-red {
  background-color: #e74c3c;
}
.box-blue {
  background-color: #3498db;
}
.box-green {
  background-color: #2ecc71;
}
.box-purple {
  background-color: #9b59b6;
}

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

import { useEffect } from 'react';
const Welcome = () => {
  useEffect(() => {
    const boxes = document.querySelectorAll('.box');
    const timeoutMap = new Map();
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          const el = entry.target;
          if (entry.isIntersecting) {
            clearTimeout(timeoutMap.get(el)); // Hủy bỏ nếu có timeout đang chờ xóa
            el.classList.add('show');
          } else {
            // Trì hoãn việc xóa class
            const timeoutId = setTimeout(() => {
              el.classList.remove('show');
            }, 300); // ví dụ 300ms sau mới xóa
            timeoutMap.set(el, timeoutId);
          }
        });
      },
      {
        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));
      timeoutMap.forEach(timeoutId => clearTimeout(timeoutId));
    };
  }, []);
  return (
    <main className="items-center pt-16 pb-4">
      <div className="spacer"></div>
      <div className="container">
        <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">
          <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="container flex">
          <div className="box box-purple fade-in-up-medium">
            <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 fade-in-up-medium delay-750">
            <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>
        <footer className='h-[1500px]'>Footer</footer>
      </div>
    </main>
  );
};
export default Welcome;

app\app.css

@import "tailwindcss";
.spacer {
  height: 100vh;
}
@theme {
  --animate-reveal-text: reveal-text 1.5s ease-in-out forwards 0.5s;
  @keyframes reveal-text {
    0% {
      transform: translateX(17%);
      clip-path: inset(0px 50% 0px 50%);
      -webkit-clip-path: inset(0px 50% 0px 50%);
    }
    100% {
      clip-path: inset(0px 0px 0px 0px);
      -webkit-clip-path: inset(0px 0px 0px 0px);
      transform: translateX(0%);
      opacity: 1;
    }
  }
  --animate-fade-in-up-medium: fade-in-up-medium 1.5s ease-in-out both 0.5s;
  @keyframes fade-in-up-medium {
    0% {
      opacity: 0;
      transform: translateY(200px);
    }
    50% {
      opacity: 0.3;
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
.reveal-text {
  @apply opacity-0 transform translate-x-0;
}
.reveal-text.show {
  @apply animate-reveal-text;
}
.fade-in-up-medium {
  @apply opacity-0 transform translate-y-[200px] transform-3d relative;
}
.fade-in-up-medium.show {
  @apply animate-fade-in-up-medium;
}
.delay-750 {
  animation-delay: 0.75s !important;
}
.box-red {
  background-color: #e74c3c;
}
.box-blue {
  background-color: #3498db;
}
.box-green {
  background-color: #2ecc71;
}
.box-purple {
  background-color: #9b59b6;
}