Code Snippets

Code tạo hiệu ứng chuyển động Slider mượt mà cho Website bằng HTML/CSS/JavaScript

Tháng 4 26, 2026
Cách tạo hiệu ứng chuyển động Slider cực kỳ chuyên nghiệp và mượt mà. Đây là một mẫu slider được thiết kế theo phong cách hiện đại với hiệu ứng layer chồng lớp, hình nền thay đổi động và các card chuyển động linh hoạt. Mẫu slider này rất phù hợp cho các trang web giới thiệu sản phẩm, du lịch hoặc các dự án sáng tạo cần sự tinh tế trong UI/UX.

Các tính năng nổi bật trong hiệu ứng chuyển động slider

  • Hiệu ứng Smooth Transition: Chuyển cảnh cực mượt với CSS Transform và Transition.
  • Dynamic Background: Hình nền mờ (blur) thay đổi theo slide hiện tại tạo chiều sâu.
  • Responsive Design: Hiển thị tốt trên nhiều kích thước màn hình khác nhau.
  • Code sạch & dễ tùy biến: Dễ dàng thay đổi hình ảnh và nội dung thông qua mảng JavaScript.
tạo hiệu ứng chuyển động Slider cực kỳ chuyên nghiệp và mượt mà
tạo hiệu ứng chuyển động Slider cực kỳ chuyên nghiệp và mượt mà

Các bước tạo hiệu ứng chuyển động Slider

Bước 1: Cấu trúc HTML khi tạo hiệu ứng chuyển động Slider

Dưới đây là phần khung xương để tạo hiệu ứng chuyển động Slider. Chúng ta sẽ chia làm 3 phần chính: Background layer, Content thông tin và phần Thumbs chứa các thẻ nhỏ bên phải.

HTML
</div>
<div><!-- index.html --></div>
<div><!DOCTYPE html></div>
<div><html lang=”en”></div>
<div><head></div>
<div><meta charset=”UTF-8″></div>
<div><meta name=”viewport” content=”width=device-width,initial-scale=1.0″></div>
<div><title>Bird Slider</title></div>
<div><link rel=”stylesheet” href=”style.css”></div>
<div></head></div>
<div><body></div>
<div></div>
<div><div class=”slider-wrapper”></div>
<div></div>
<div>  <div class=”bg-layer” id=”bgLayer”></div></div>
<div></div>
<div>  <div class=”content” id=”slideContent”></div>
<div></div>
<div>    <div class=”info”></div>
<div>      <h1 id=”birdName”></h1></div>
<div>      <p id=”birdDesc”></p></div>
<div>      <button class=”btn-see”>See More</button></div>
<div>    </div></div>
<div></div>
<div>    <div class=”thumbs” id=”thumbs”></div></div>
<div></div>
<div>  </div></div>
<div></div>
<div>  <div class=”nav-btns”></div>
<div>    <button class=”nav-btn” id=”btnPrev”>←</button></div>
<div>    <button class=”nav-btn” id=”btnNext”>→</button></div>
<div>  </div></div>
<div></div>
<div></div></div>
<div></div>
<div><script src=”script.js”></script></div>
<div></body></div>
<div></html></div>
<div>

Bước 2: Định dạng CSS

Phần CSS này sẽ xử lý giao diện và quan trọng nhất là các lớp để tạo hiệu ứng chuyển động Slider khi thay đổi trạng thái.
CSS
</div>
<div>/* style.css */</div>
<div></div>
<div>*{</div>
<div>  margin:0;</div>
<div>  padding:0;</div>
<div>  box-sizing:border-box;</div>
<div>}</div>
<div></div>
<div>body{</div>
<div>  font-family:’Segoe UI’,sans-serif;</div>
<div>  background:#1a1a1a;</div>
<div>  display:flex;</div>
<div>  justify-content:center;</div>
<div>  align-items:center;</div>
<div>  min-height:100vh;</div>
<div>}</div>
<div></div>
<div>.slider-wrapper{</div>
<div>  width:100%;</div>
<div>  max-width:1440px;</div>
<div>  height:628px;</div>
<div>  position:relative;</div>
<div>  overflow:hidden;</div>
<div>}</div>
<div></div>
<div>/* BACKGROUND */</div>
<div></div>
<div>.bg-layer{</div>
<div>  position:absolute;</div>
<div>  inset:0;</div>
<div>}</div>
<div></div>
<div>.bg-slide{</div>
<div>  position:absolute;</div>
<div>  inset:0;</div>
<div>  background-size:cover;</div>
<div>  background-position:center;</div>
<div>  opacity:0;</div>
<div>  transform:scale(1.04);</div>
<div>  transition:opacity .8s ease, transform .8s ease;</div>
<div>}</div>
<div></div>
<div>.bg-slide.active{</div>
<div>  opacity:1;</div>
<div>  transform:scale(1);</div>
<div>}</div>
<div></div>
<div>.bg-slide::after{</div>
<div>  content:”;</div>
<div>  position:absolute;</div>
<div>  inset:0;</div>
<div>  background:linear-gradient(</div>
<div>    90deg,</div>
<div>    rgba(0,0,0,.48),</div>
<div>    rgba(0,0,0,.18) 45%,</div>
<div>    rgba(0,0,0,.05)</div>
<div>  );</div>
<div>}</div>
<div></div>
<div>/* CONTENT */</div>
<div></div>
<div>.content{</div>
<div>  position:relative;</div>
<div>  z-index:2;</div>
<div>  height:100%;</div>
<div>  padding:0 56px;</div>
<div>}</div>
<div></div>
<div>/* LEFT TEXT */</div>
<div></div>
<div>.info{</div>
<div>  position:absolute;</div>
<div>  left:56px;</div>
<div>  top:50%;</div>
<div>  transform:translateY(-50%);</div>
<div>  width:42%;</div>
<div>  color:#fff;</div>
<div>}</div>
<div></div>
<div>.info h1{</div>
<div>  font-size:52px;</div>
<div>  font-weight:800;</div>
<div>  line-height:1.08;</div>
<div>  text-transform:uppercase;</div>
<div>  min-height:116px; /* khóa chiều cao */</div>
<div>  opacity:0;</div>
<div>  transform:translateY(26px);</div>
<div>  transition:.55s ease;</div>
<div>}</div>
<div></div>
<div>.info p{</div>
<div>  margin-top:18px;</div>
<div>  line-height:1.6;</div>
<div>  max-width:340px;</div>
<div>  min-height:78px; /* khóa chiều cao */</div>
<div>  opacity:0;</div>
<div>  transform:translateY(22px);</div>
<div>  transition:.55s ease .12s;</div>
<div>}</div>
<div></div>
<div>.btn-see{</div>
<div>  margin-top:28px;</div>
<div>  padding:11px 28px;</div>
<div>  border:none;</div>
<div>  background:#fff;</div>
<div>  color:#111;</div>
<div>  font-weight:700;</div>
<div>  cursor:pointer;</div>
<div>  min-width:140px;</div>
<div>  opacity:0;</div>
<div>  transform:translateY(18px);</div>
<div>  transition:.55s ease .22s;</div>
<div>}</div>
<div></div>
<div>.slide-active .info h1,</div>
<div>.slide-active .info p,</div>
<div>.slide-active .btn-see{</div>
<div>  opacity:1;</div>
<div>  transform:translateY(0);</div>
<div>}</div>
<div></div>
<div>/* RIGHT CARDS */</div>
<div>/* FIX chuẩn: lề phải luôn đồng nhất */</div>
<div></div>
<div>.thumbs{</div>
<div>  position:absolute;</div>
<div>  right:18px;              /* cố định lề phải */</div>
<div>  top:50%;</div>
<div>  transform:translateY(-46%);</div>
<div>  display:flex;</div>
<div>  gap:18px;                /* khoảng cách card */</div>
<div>  align-items:flex-start;</div>
<div>  width:636px;             /* 200×3 + 18×2 = 636 */</div>
<div>}</div>
<div></div>
<div>/* CARD */</div>
<div></div>
<div>.thumb-card{</div>
<div>  position:relative;</div>
<div>  width:200px;</div>
<div>  height:320px;</div>
<div>  border-radius:22px;</div>
<div>  overflow:hidden;</div>
<div>  box-shadow:0 10px 34px rgba(0,0,0,.35);</div>
<div>  cursor:pointer;</div>
<div>  opacity:0;</div>
<div>  transform:translateX(42px);</div>
<div>  transition:</div>
<div>    transform .35s ease,</div>
<div>    opacity .45s ease,</div>
<div>    box-shadow .35s ease,</div>
<div>    filter .35s ease;</div>
<div>}</div>
<div></div>
<div>.slide-active .thumb-card{</div>
<div>  opacity:1;</div>
<div>  transform:translateX(0);</div>
<div>}</div>
<div></div>
<div>.thumb-card img{</div>
<div>  width:100%;</div>
<div>  height:100%;</div>
<div>  object-fit:cover;</div>
<div>  display:block;</div>
<div>  transition:transform .4s ease;</div>
<div>}</div>
<div></div>
<div>/* Hover sáng */</div>
<div></div>
<div>.thumb-card:hover{</div>
<div>  transform:translateY(-8px) scale(1.03);</div>
<div>  box-shadow:</div>
<div>    0 0 18px rgba(255,255,255,.35),</div>
<div>    0 0 40px rgba(255,255,255,.18),</div>
<div>    0 14px 34px rgba(0,0,0,.45);</div>
<div>  filter:brightness(1.12);</div>
<div>}</div>
<div></div>
<div>.thumb-card:hover img{</div>
<div>  transform:scale(1.06);</div>
<div>}</div>
<div></div>
<div>/* phủ nhẹ card sau */</div>
<div></div>
<div>.thumb-card:not(:first-child)::after{</div>
<div>  content:”;</div>
<div>  position:absolute;</div>
<div>  inset:0;</div>
<div>  background:rgba(0,0,0,.12);</div>
<div>}</div>
<div></div>
<div>/* NAV */</div>
<div></div>
<div>.nav-btns{</div>
<div>  position:absolute;</div>
<div>  left:50%;</div>
<div>  bottom:36px;</div>
<div>  transform:translateX(-50%);</div>
<div>  display:flex;</div>
<div>  gap:14px;</div>
<div>  z-index:10;</div>
<div>}</div>
<div></div>
<div>.nav-btn{</div>
<div>  width:48px;</div>
<div>  height:48px;</div>
<div>  border:none;</div>
<div>  border-radius:12px;</div>
<div>  background:rgba(255,255,255,.22);</div>
<div>  color:#fff;</div>
<div>  font-size:22px;</div>
<div>  cursor:pointer;</div>
<div>  transition:.25s ease;</div>
<div>}</div>
<div></div>
<div>.nav-btn:hover{</div>
<div>  background:rgba(255,255,255,.42);</div>
<div>  transform:scale(1.06);</div>
<div>}</div>
<div>

Bước 3: Xử lý JavaScript trong quá trình tạo hiệu ứng chuyển động Slider

Cuối cùng là logic điều khiển. Đoạn script này sẽ quản lý mảng dữ liệu và xử lý sự kiện click để chuyển đổi các slide một cách tuần tự.
JAVASCRIPT
</div>
<div>// script.js</div>
<div>// Custom URL thumbnail riêng từng card</div>
<div>// Thumbnail có thể dùng bất kỳ link ảnh nào</div>
<div></div>
<div>const U = [</div>
<div>‘https://images.unsplash.com/photo-1444464666168-49d633b86797’,</div>
<div>‘https://images.unsplash.com/photo-1486365227551-f3f90034a57c’,</div>
<div>‘https://images.unsplash.com/photo-1520808663317-647b476a81b9’</div>
<div>];</div>
<div></div>
<div>const bg = url => `${url}?w=1600&auto=format&fit=crop&q=80`;</div>
<div></div>
<div>/* custom thumbnail full url */</div>
<div>const birds = [</div>
<div></div>
<div>{</div>
<div>name:”Golden-Browed\nChlorophonia”,</div>
<div>desc:”Beautiful tropical bird with vibrant green feathers.”,</div>
<div>bg:bg(U[0]),</div>
<div>url:”https://example.com/chlorophonia”,</div>
<div></div>
<div>thumbs:[</div>
<div> {</div>
<div>   img:”https://images.unsplash.com/photo-1486365227551-f3f90034a57c?w=600&q=80″,</div>
<div>   target:1</div>
<div> },</div>
<div> {</div>
<div>   img:”https://images.unsplash.com/photo-1520808663317-647b476a81b9?w=600&q=80″,</div>
<div>   target:2</div>
<div> },</div>
<div> {</div>
<div>   img:”https://images.unsplash.com/photo-1444464666168-49d633b86797?w=600&q=80″,</div>
<div>   target:0</div>
<div> }</div>
<div>]</div>
<div>},</div>
<div></div>
<div>{</div>
<div>name:”Pale Blue\nFlycatcher”,</div>
<div>desc:”Elegant small bird with soft blue colors.”,</div>
<div>bg:bg(U[1]),</div>
<div>url:”https://example.com/flycatcher”,</div>
<div></div>
<div>thumbs:[</div>
<div> {</div>
<div>   img:”https://images.unsplash.com/photo-1520808663317-647b476a81b9?w=600&q=80″,</div>
<div>   target:2</div>
<div> },</div>
<div> {</div>
<div>   img:”https://images.unsplash.com/photo-1444464666168-49d633b86797?w=600&q=80″,</div>
<div>   target:0</div>
<div> },</div>
<div> {</div>
<div>   img:”https://images.unsplash.com/photo-1486365227551-f3f90034a57c?w=600&q=80″,</div>
<div>   target:1</div>
<div> }</div>
<div>]</div>
<div>},</div>
<div></div>
<div>{</div>
<div>name:”Blue Jay\nBird”,</div>
<div>desc:”Smart colorful bird found in North America.”,</div>
<div>bg:bg(U[2]),</div>
<div>url:”https://example.com/bluejay”,</div>
<div></div>
<div>thumbs:[</div>
<div> {</div>
<div>   img:”https://images.unsplash.com/photo-1444464666168-49d633b86797?w=600&q=80″,</div>
<div>   target:0</div>
<div> },</div>
<div> {</div>
<div>   img:”https://images.unsplash.com/photo-1486365227551-f3f90034a57c?w=600&q=80″,</div>
<div>   target:1</div>
<div> },</div>
<div> {</div>
<div>   img:”https://images.unsplash.com/photo-1520808663317-647b476a81b9?w=600&q=80″,</div>
<div>   target:2</div>
<div> }</div>
<div>]</div>
<div>}</div>
<div></div>
<div>];</div>
<div></div>
<div>let current = 0;</div>
<div>let lock = false;</div>
<div></div>
<div>const bgLayer = document.getElementById(“bgLayer”);</div>
<div>const birdName = document.getElementById(“birdName”);</div>
<div>const birdDesc = document.getElementById(“birdDesc”);</div>
<div>const thumbs = document.getElementById(“thumbs”);</div>
<div>const slideContent = document.getElementById(“slideContent”);</div>
<div>const btnSee = document.querySelector(“.btn-see”);</div>
<div></div>
<div>/* background */</div>
<div>birds.forEach((item,i)=>{</div>
<div>  const div = document.createElement(“div”);</div>
<div>  div.className = “bg-slide”;</div>
<div>  if(i===0) div.classList.add(“active”);</div>
<div>  div.style.backgroundImage = `url(${item.bg})`;</div>
<div>  bgLayer.appendChild(div);</div>
<div>});</div>
<div></div>
<div>function render(index){</div>
<div></div>
<div>  const slides = document.querySelectorAll(“.bg-slide”);</div>
<div></div>
<div>  slideContent.classList.remove(“slide-active”);</div>
<div></div>
<div>  setTimeout(()=>{</div>
<div></div>
<div>    slides.forEach(s=>s.classList.remove(“active”));</div>
<div>    slides[index].classList.add(“active”);</div>
<div></div>
<div>    birdName.innerHTML = birds[index].name.replace(/\n/g,”<br>”);</div>
<div>    birdDesc.textContent = birds[index].desc;</div>
<div></div>
<div>    btnSee.onclick = ()=>{</div>
<div>      window.location.href = birds[index].url;</div>
<div>    };</div>
<div></div>
<div>    thumbs.innerHTML = “”;</div>
<div></div>
<div>    birds[index].thumbs.forEach(item=>{</div>
<div></div>
<div>      const card = document.createElement(“div”);</div>
<div>      card.className = “thumb-card”;</div>
<div></div>
<div>      card.onclick = ()=>{</div>
<div>        goTo(item.target);</div>
<div>      };</div>
<div></div>
<div>      const img = document.createElement(“img”);</div>
<div>      img.src = item.img;</div>
<div></div>
<div>      card.appendChild(img);</div>
<div>      thumbs.appendChild(card);</div>
<div></div>
<div>    });</div>
<div></div>
<div>    requestAnimationFrame(()=>{</div>
<div>      slideContent.classList.add(“slide-active”);</div>
<div>    });</div>
<div></div>
<div>    lock = false;</div>
<div></div>
<div>  },320);</div>
<div>}</div>
<div></div>
<div>function goTo(index){</div>
<div></div>
<div>  if(lock) return;</div>
<div>  lock = true;</div>
<div></div>
<div>  if(index >= birds.length) index = 0;</div>
<div>  if(index < 0) index = birds.length – 1;</div>
<div></div>
<div>  current = index;</div>
<div>  render(current);</div>
<div>}</div>
<div></div>
<div>function next(){ goTo(current + 1); }</div>
<div>function prev(){ goTo(current – 1); }</div>
<div></div>
<div>document.getElementById(“btnNext”).onclick = next;</div>
<div>document.getElementById(“btnPrev”).onclick = prev;</div>
<div></div>
<div>render(0);</div>
<div>
Tạo hiệu ứng chuyển động Slider thủ công bằng mã nguồn thuần không chỉ giúp website của bạn nhẹ hơn mà còn giúp bạn nâng cao kỹ năng tư duy logic. Bạn có thể dễ dàng thay đổi danh sách hình ảnh trong mảng birds ở file JS để áp dụng cho các chủ đề khác nhau như đồng hồ, xe hơi hay thời trang.
Theo dõi thêm tại đây!