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.

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

[codebox lang=”HTML”]

[/codebox] [codebox lang=”CSS”] /* style.css */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:’Segoe UI’,sans-serif;
background:#1a1a1a;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}

.slider-wrapper{
width:100%;
max-width:1440px;
height:628px;
position:relative;
overflow:hidden;
}

/* BACKGROUND */

.bg-layer{
position:absolute;
inset:0;
}

.bg-slide{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:0;
transform:scale(1.04);
transition:opacity .8s ease, transform .8s ease;
}

.bg-slide.active{
opacity:1;
transform:scale(1);
}

.bg-slide::after{
content:”;
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(0,0,0,.48),
rgba(0,0,0,.18) 45%,
rgba(0,0,0,.05)
);
}

/* CONTENT */

.content{
position:relative;
z-index:2;
height:100%;
padding:0 56px;
}

/* LEFT TEXT */

.info{
position:absolute;
left:56px;
top:50%;
transform:translateY(-50%);
width:42%;
color:#fff;
}

.info h1{
font-size:52px;
font-weight:800;
line-height:1.08;
text-transform:uppercase;
min-height:116px; /* khóa chiều cao */
opacity:0;
transform:translateY(26px);
transition:.55s ease;
}

.info p{
margin-top:18px;
line-height:1.6;
max-width:340px;
min-height:78px; /* khóa chiều cao */
opacity:0;
transform:translateY(22px);
transition:.55s ease .12s;
}

.btn-see{
margin-top:28px;
padding:11px 28px;
border:none;
background:#fff;
color:#111;
font-weight:700;
cursor:pointer;
min-width:140px;
opacity:0;
transform:translateY(18px);
transition:.55s ease .22s;
}

.slide-active .info h1,
.slide-active .info p,
.slide-active .btn-see{
opacity:1;
transform:translateY(0);
}

/* RIGHT CARDS */
/* FIX chuẩn: lề phải luôn đồng nhất */

.thumbs{
position:absolute;
right:18px; /* cố định lề phải */
top:50%;
transform:translateY(-46%);
display:flex;
gap:18px; /* khoảng cách card */
align-items:flex-start;
width:636px; /* 200×3 + 18×2 = 636 */
}

/* CARD */

.thumb-card{
position:relative;
width:200px;
height:320px;
border-radius:22px;
overflow:hidden;
box-shadow:0 10px 34px rgba(0,0,0,.35);
cursor:pointer;
opacity:0;
transform:translateX(42px);
transition:
transform .35s ease,
opacity .45s ease,
box-shadow .35s ease,
filter .35s ease;
}

.slide-active .thumb-card{
opacity:1;
transform:translateX(0);
}

.thumb-card img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .4s ease;
}

/* Hover sáng */

.thumb-card:hover{
transform:translateY(-8px) scale(1.03);
box-shadow:
0 0 18px rgba(255,255,255,.35),
0 0 40px rgba(255,255,255,.18),
0 14px 34px rgba(0,0,0,.45);
filter:brightness(1.12);
}

.thumb-card:hover img{
transform:scale(1.06);
}

/* phủ nhẹ card sau */

.thumb-card:not(:first-child)::after{
content:”;
position:absolute;
inset:0;
background:rgba(0,0,0,.12);
}

/* NAV */

.nav-btns{
position:absolute;
left:50%;
bottom:36px;
transform:translateX(-50%);
display:flex;
gap:14px;
z-index:10;
}

.nav-btn{
width:48px;
height:48px;
border:none;
border-radius:12px;
background:rgba(255,255,255,.22);
color:#fff;
font-size:22px;
cursor:pointer;
transition:.25s ease;
}

.nav-btn:hover{
background:rgba(255,255,255,.42);
transform:scale(1.06);
}
[/codebox] [codebox lang=”JAVASCRIP”] // script.js
// Custom URL thumbnail riêng từng card
// Thumbnail có thể dùng bất kỳ link ảnh nào

const U = [
‘https://images.unsplash.com/photo-1444464666168-49d633b86797’,
‘https://images.unsplash.com/photo-1486365227551-f3f90034a57c’,
‘https://images.unsplash.com/photo-1520808663317-647b476a81b9’
];

const bg = url => `${url}?w=1600&auto=format&fit=crop&q=80`;

/* custom thumbnail full url */
const birds = [

{
name:”Golden-Browed\nChlorophonia”,
desc:”Beautiful tropical bird with vibrant green feathers.”,
bg:bg(U[0]),
url:”https://example.com/chlorophonia”,

thumbs:[
{
img:”https://images.unsplash.com/photo-1486365227551-f3f90034a57c?w=600&q=80″,
target:1
},
{
img:”https://images.unsplash.com/photo-1520808663317-647b476a81b9?w=600&q=80″,
target:2
},
{
img:”https://images.unsplash.com/photo-1444464666168-49d633b86797?w=600&q=80″,
target:0
}
] },

{
name:”Pale Blue\nFlycatcher”,
desc:”Elegant small bird with soft blue colors.”,
bg:bg(U[1]),
url:”https://example.com/flycatcher”,

thumbs:[
{
img:”https://images.unsplash.com/photo-1520808663317-647b476a81b9?w=600&q=80″,
target:2
},
{
img:”https://images.unsplash.com/photo-1444464666168-49d633b86797?w=600&q=80″,
target:0
},
{
img:”https://images.unsplash.com/photo-1486365227551-f3f90034a57c?w=600&q=80″,
target:1
}
] },

{
name:”Blue Jay\nBird”,
desc:”Smart colorful bird found in North America.”,
bg:bg(U[2]),
url:”https://example.com/bluejay”,

thumbs:[
{
img:”https://images.unsplash.com/photo-1444464666168-49d633b86797?w=600&q=80″,
target:0
},
{
img:”https://images.unsplash.com/photo-1486365227551-f3f90034a57c?w=600&q=80″,
target:1
},
{
img:”https://images.unsplash.com/photo-1520808663317-647b476a81b9?w=600&q=80″,
target:2
}
] }

];

let current = 0;
let lock = false;

const bgLayer = document.getElementById(“bgLayer”);
const birdName = document.getElementById(“birdName”);
const birdDesc = document.getElementById(“birdDesc”);
const thumbs = document.getElementById(“thumbs”);
const slideContent = document.getElementById(“slideContent”);
const btnSee = document.querySelector(“.btn-see”);

/* background */
birds.forEach((item,i)=>{
const div = document.createElement(“div”);
div.className = “bg-slide”;
if(i===0) div.classList.add(“active”);
div.style.backgroundImage = `url(${item.bg})`;
bgLayer.appendChild(div);
});

function render(index){

const slides = document.querySelectorAll(“.bg-slide”);

slideContent.classList.remove(“slide-active”);

setTimeout(()=>{

slides.forEach(s=>s.classList.remove(“active”));
slides[index].classList.add(“active”);

birdName.innerHTML = birds[index].name.replace(/\n/g,”
“);
birdDesc.textContent = birds[index].desc;

btnSee.onclick = ()=>{
window.location.href = birds[index].url;
};

thumbs.innerHTML = “”;

birds[index].thumbs.forEach(item=>{

const card = document.createElement(“div”);
card.className = “thumb-card”;

card.onclick = ()=>{
goTo(item.target);
};

const img = document.createElement(“img”);
img.src = item.img;

card.appendChild(img);
thumbs.appendChild(card);

});

requestAnimationFrame(()=>{
slideContent.classList.add(“slide-active”);
});

lock = false;

},320);
}

function goTo(index){

if(lock) return;
lock = true;

if(index >= birds.length) index = 0;
if(index < 0) index = birds.length – 1;

current = index;
render(current);
}

function next(){ goTo(current + 1); }
function prev(){ goTo(current – 1); }

document.getElementById(“btnNext”).onclick = next;
document.getElementById(“btnPrev”).onclick = prev;

render(0);
[/codebox] [live_preview_button]