Trên theme flatsome, các hiệu ứng chỉ xuất hiện 1 lần khi lăn chuột xuống, sau đó thì khi lăn lên xuống các lần sau hiệu ứng sẽ không hoạt động nữa. Để hiệu ứng luôn hoạt động sau mỗi lần lăn chuột lên xuống, thì các bạn thêm đoạn code này vào footer của theme nhé. Ở Flatsome, các bạn có thể thêm vào FLatsome- advanced – global setting – Footer :
<script> jQuery(document).ready(function($) { var animatedElements = $('[data-animate]'); // Chọn tất cả các phần tử có thuộc tính data-animate function resetAnimation() { animatedElements.each(function() { var element = $(this); var elementOffset = element.offset().top; var scrollTop = $(window).scrollTop(); var windowHeight = $(window).height(); var elementHeight = element.outerHeight(); // Kiểm tra nếu phần tử hoàn toàn ra khỏi màn hình if ((scrollTop + windowHeight < elementOffset) || (scrollTop > elementOffset + elementHeight)) { element.attr('data-animated', 'false'); element.removeClass('animated'); } // Kiểm tra nếu phần tử hoàn toàn vào lại trong màn hình if ((scrollTop + windowHeight > elementOffset) && (scrollTop < elementOffset + elementHeight)) { if (element.attr('data-animated') === 'false') { setTimeout(function() { element.attr('data-animated', 'true'); element.addClass('animated'); }, 100); // Đặt thời gian delay ngắn để kích hoạt lại hiệu ứng } } }); } // Gọi lại hàm resetAnimation mỗi khi người dùng cuộn chuột $(window).on('scroll', resetAnimation); }); </script>