readonly9005
Junior Member
thề mấy cái animation như này dễ lắm lắm luôn ấy, dùng kiểu gì cũng ra được, như cái demo này là xấu òm xấu đau xấu mù, nói nhẹ nhàng là chẳng ra cái thể loại gì cả.View attachment 2477222
mấy thím cho e hỏi cái kiểu animation như cái hình em post nó có trong cái link. E dùng framer motion thì nó là cái nào v nhỉ ? scroll nhưng mà nó k theo chiều từ phải sang trái. Có thím nào biết mấy cái animation như trong cái app kiểu em scroll xuống thì ảnh nó hiện ra nhỉ. E cảm ơn
View attachment 2477225
như này e kéo xuống đúng khung thì nó hiện k thì nó đóng. Dùng useScroll inView của framer motion đúng k nhỉ
nguyên lý để giải quyết đơn giản là như này:
- bằng bất cứ kỹ thuật gì cũng được, bạn phải xác định được là cái khung cần animation nó có nằm trong màn hình hiển thị hay không? cách căn bản chuẩn chỉ nhất là dùng "IntersectionObserver", nếu nó ngoài viewport thì xử lý tương ứng cho case ngoài viewport, như là ẩn đi, giảm opacity, scale nhỏ, hay trượt hẳn sang trái/phải 100% chẳng hạn
- tiếp theo, bạn phải xác định được 2 khoản, tạm gọi là minTrigger và maxTrigger, dựa vào các thông tin trả về từ "IntersectionObserver" ở trên rồi tính ra min/max, min/max này cũng vô chừng lắm, không là một con số cụ thể, về ý nghĩa, thì nó sẽ biểu thị cho giá trị cái khung đó của bạn cách cạnh trên (hoặc dưới, tuỳ) màn hình của bạn là bao nhiêu? có thể là con số px, có thể quy đổi ra tỷ lệ %
- sau khi tính được min/max Trigger rồi, thì đoạn animation sẽ diễn ra trong khoảng min/max này, bạn remap nó về miền giá trị từ 0 đến 1. Giá trị 0 tương ứng với trạng thái lúc bạn ẩn đi, như là opacity 0, scale 0, translate -100% chẳng hạn. Giá trị 1 tương ứng với trạng thái lúc cái khung của bạn xuất hiện hoàn toàn, như là opacity 1, scale 1, translate 0 chẳng hạn.
- đấy, xử lý được như trên là sẽ ra được animation, việc gì phải phụ thuộc vào giải pháp sẵn có?
đấy, dễ vl, cứ làm y chang vậy là ani đẹp bao chê.
