10 Hiệu ứng thường dùng (fx-*)

Mỗi block tự chứa keyframes riêng, prefix fx-, không phụ thuộc theme. Nhãn CSS = thuần CSS · JS = cần thêm đoạn script.

Cách thêm vào Elementor — đọc 1 lần

Pattern A · Hiệu ứng CSS (4,5,6,7,8): ① Dán CSS vào Appearance → Customize → Additional CSS (một lần cho cả site). ② Chọn widget cần áp → Advanced → CSS Classes → gõ tên class (không dấu chấm), vd fx-pulse.

Pattern B · Cần JS hoặc markup riêng (1,2,3,9,10): Kéo một HTML widget vào chỗ cần → dán nguyên block (<style> + markup + <script>).

💡 Sau khi dán, luôn Update → Purge LiteSpeed → xem tab ẩn danh. CSS/JS của Elementor (Custom CSS, Site Settings) là tính năng Pro — nên Customizer + HTML widget là cách miễn phí chắc ăn.

1 · Scroll Reveal

Phần tử mờ + trồi lên khi cuộn tới (dùng cho mọi section bên dưới màn hình đầu).

Elementor: Pattern A cho CSS + đặt 1 HTML widget chứa <script> (1 lần/trang). Áp fx-reveal vào section/widget bất kỳ qua CSS Classes.

↑ Tôi hiện ra khi bạn cuộn tới

<style>
.fx-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.fx-reveal.fx-seen{opacity:1;transform:none}
</style>
<script>
(function(){var els=document.querySelectorAll('.fx-reveal');
 if(!('IntersectionObserver'in window)){els.forEach(e=>e.classList.add('fx-seen'));return;}
 var io=new IntersectionObserver(function(en){en.forEach(function(e){
   if(e.isIntersecting){e.target.classList.add('fx-seen');io.unobserve(e.target);}});},{threshold:.15});
 els.forEach(function(e){io.observe(e);});})();
</script>

2 · Count-Up Stats

Số đếm từ 0 lên đích khi cuộn tới — cho mục "127 reviews", "5.000+ khách".

Elementor: Pattern B. Đổi đích bằng thuộc tính data-to.

<style>.fx-count{font-weight:800;font-size:44px;color:#7d7c4f}</style>
<span class="fx-count" data-to="127">0</span>
<script>
(function(){function run(el){var to=+el.dataset.to||0,dur=1500,t0=null;
  function step(t){if(!t0)t0=t;var p=Math.min((t-t0)/dur,1);
    el.textContent=Math.floor(p*to).toLocaleString();if(p<1)requestAnimationFrame(step);}
  requestAnimationFrame(step);}
 var io=new IntersectionObserver(function(en){en.forEach(function(e){
   if(e.isIntersecting){run(e.target);io.unobserve(e.target);}});},{threshold:.5});
 document.querySelectorAll('.fx-count').forEach(function(e){io.observe(e);});})();
</script>

3 · Typewriter

Gõ rồi xoá lần lượt nhiều cụm từ — hợp cho hero ("We serve ___").

Elementor: Pattern B. Liệt kê cụm từ trong data-words, ngăn bằng dấu phẩy.

We serve

<span class="fx-type" data-words="Coffee, Bubble Tea, Chè"></span>
<style>.fx-type{border-right:2px solid currentColor;animation:fxCaret .7s step-end infinite}
@keyframes fxCaret{50%{border-color:transparent}}</style>
<script>
(function(){document.querySelectorAll('.fx-type').forEach(function(el){
 var w=(el.dataset.words||'').split(',').map(s=>s.trim()).filter(Boolean);if(!w.length)return;
 var i=0,c=0,del=false;(function t(){var x=w[i];el.textContent=x.slice(0,c);
  if(!del&&c<x.length){c++;setTimeout(t,90);}
  else if(del&&c>0){c--;setTimeout(t,45);}
  else{del=!del;if(!del)i=(i+1)%w.length;setTimeout(t,del?1100:300);}})();});})();
</script>

4 · Pulse CTA

CSS

Nút "đập nhịp" + vòng sáng lan ra — hút mắt vào nút quan trọng.

Elementor: Pattern A → thêm fx-pulse vào widget Button.

.fx-pulse{animation:fxPulse 1.8s ease-in-out infinite}
@keyframes fxPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(232,162,58,.5)}
  50%{transform:scale(1.05);box-shadow:0 0 0 14px rgba(232,162,58,0)}}

5 · Animated Gradient BG

CSS

Nền gradient chuyển màu chậm cho section/hero. Nhớ để chữ màu sáng cho dễ đọc.

Elementor: Pattern A → thêm fx-gradbg vào Section/Container.

Animated gradient background

.fx-gradbg{background:linear-gradient(120deg,#7d7c4f,#e8a23a,#1fc3b3,#e9943a);
  background-size:300% 300%;animation:fxGrad 12s ease infinite}
@keyframes fxGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

6 · Underline Slide

CSS

Gạch chân trượt từ trái sang khi hover link/menu.

Elementor: Pattern A → thêm fx-underline vào link (hoặc mục menu: Menu → CSS Classes).

Hover this link

.fx-underline{position:relative;text-decoration:none}
.fx-underline::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.fx-underline:hover::after{transform:scaleX(1)}

7 · Image Zoom

CSS

Ảnh phóng to nhẹ bên trong khung (khung giữ nguyên) khi hover — cho card/gallery.

Elementor: Pattern A → thêm fx-zoom vào widget Image (ảnh nằm trong nó).

.fx-zoom{overflow:hidden;border-radius:16px;display:block}
.fx-zoom img{display:block;width:100%;transition:transform .5s ease}
.fx-zoom:hover img{transform:scale(1.08)}

8 · 3D Tilt

CSS

Nghiêng 3D nhẹ khi hover — cho card dịch vụ/ảnh.

Elementor: Pattern A → thêm fx-tilt vào Container/Image/Card.

Hover me

.fx-tilt{transition:transform .3s ease}
.fx-tilt:hover{transform:perspective(800px) rotateX(6deg) rotateY(-6deg) translateY(-4px)}

9 · Flip Card

CSS

Lật mặt trước/sau khi hover — cho card "tên dịch vụ ↔ mô tả".

Elementor: Pattern B (cần markup front/back) → dán cả khối vào HTML widget. Phải đặt chiều cao cho .fx-flip.

Cà Phê Sữa

Phin filter + sữa đặc

<div class="fx-flip" style="width:220px;height:140px">
  <div class="fx-flip-inner">
    <div class="fx-flip-front" style="background:#7d7c4f;color:#fff">Front</div>
    <div class="fx-flip-back"  style="background:#e8a23a;color:#fff">Back</div>
  </div>
</div>
<style>
.fx-flip{perspective:1000px}
.fx-flip-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.fx-flip:hover .fx-flip-inner{transform:rotateY(180deg)}
.fx-flip-front,.fx-flip-back{position:absolute;inset:0;backface-visibility:hidden;
  border-radius:16px;display:flex;align-items:center;justify-content:center}
.fx-flip-back{transform:rotateY(180deg)}
</style>

10 · Infinite Marquee

CSS

Băng chạy vô hạn cho logo đối tác / món nổi bật. Hover để tạm dừng.

Elementor: Pattern B → HTML widget. Nhân đôi bộ item trong track để vòng lặp liền mạch.

☕ Coffee🧋 Boba🍜 Phở🥖 Bánh Mì🍧 Chè ☕ Coffee🧋 Boba🍜 Phở🥖 Bánh Mì🍧 Chè

<div class="fx-marquee"><div class="fx-marquee-track">
  <span>Logo A</span><span>Logo B</span><span>Logo C</span>
  <span>Logo A</span><span>Logo B</span><span>Logo C</span>  <!-- nhân đôi -->
</div></div>
<style>
.fx-marquee{overflow:hidden;width:100%}
.fx-marquee-track{display:flex;gap:48px;width:max-content;animation:fxMarquee 16s linear infinite}
.fx-marquee:hover .fx-marquee-track{animation-play-state:paused}
@keyframes fxMarquee{to{transform:translateX(-50%)}}
</style>

Interactive HTML Blocks