Bạn có muốn làm hiệu ứng ảnh xuất hiện như này ?
Rất đơn giản , bạn dùng đoạn css sau vào chỗ Flatsome – Advanced – Custom Css
.image-container { width: 100%; overflow: hidden; position: relative; animation: revealImage 1.5s ease-in-out forwards; /* Thời gian animation giảm xuống */ } .image-container img { width: 100%; } @keyframes revealImage { 0% { clip-path: inset(0 100% 0 0); /* Ẩn toàn bộ hình ảnh */ } 100% { clip-path: inset(0 0 0 0); /* Hiện toàn bộ hình ảnh */ } }
Sau đó chèn ảnh vào chỗ cần chèn bằng html sau: Với Ux builder thì các bạn chỉ cần đặt tên class cho column chứa ảnh là : image-container
<div class="image-container"> <img src="Link ảnh cần chèn.jpg" alt="Image"> </div>
Để ảnh luôn lặp lại hiệu ứng sau mỗi lần scroll lên xuống, bạn thêm đoạn script sau vào Flatsome – Advanced- Global setting – Footer:
<script> const container = document.querySelector('.image-container'); let hasScrolledOutOfView = false; function isElementInViewport(el) { const rect = el.getBoundingClientRect(); return ( rect.bottom >= 0 && // Phần tử chạm vào hoặc nằm trên cạnh dưới của khung nhìn rect.top <= (window.innerHeight || document.documentElement.clientHeight) // Phần tử chạm vào hoặc nằm dưới cạnh trên của khung nhìn ); } window.addEventListener('scroll', () => { if (!isElementInViewport(container)) { hasScrolledOutOfView = true; } if (hasScrolledOutOfView && isElementInViewport(container)) { container.style.animation = 'none'; container.offsetHeight; /* Kích hoạt reflow */ container.style.animation = 'revealImage 1.5s ease-in-out forwards'; /* Chạy lại animation */ hasScrolledOutOfView = false; // Reset lại khi animation chạy } }); </script>