15 Hiệu Ứng Horizontal Scroll CSS Javascript

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo scroll horizontally effect dành cho phát triển và thiết kế website nha.

Đầu tiên chúng ta sẽ đi vào thiết lập cấu trúc html cho hiệu ứng này nhé.

HTML

<div class="container">
  <section>
    <h3>Niem</h3>
  </section>
  <section>
    <h3>Vui</h3>
  </section>
  <section>
    <h3>Lap</h3>
  </section>
   <section>
    <h3>Trinh</h3>
  </section>
</div>

Tiếp theo mình sẽ đi vào thiết lập style cho hiệu ứng scroll horizontal thông qua các thuộc tính CSS cơ bản sau nha:

CSS

html, body {
margin: 0;
pađing: 0;
font-family: sans-serif;
}
.container {
overflow-x: hidden;
display: flex;
}
h1 {
margin: 0;
padding: 0;
}
section {
min-width: 50vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 4ch;
}
section:nth-child(even) {
background-color: #1b2a49;
color: white;
}

Bước cuối cùng chúng ta sẽ đi vào tạo hiệu ứng scroll horizontal thông qua sự kiện wheel trong javascript thông qua đoạn mã sau nha:

Javascript

const scrollContainer = document.querySelector("div.container");
scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
});

Và kết quả cuối cùng bạn xem dưới đây nha:

Còn dưới đây là dự án trên Codepen nha.

See the Pen Horizontal scroll by haycuoilennao19 (@haycuoilennao19) on CodePen.

Trong phần này chúng ta sẽ tìm hiểu các hiệu ứng horizontal scroll khác cho website nha.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Bootstrap 4 horizontal scroll (HTML only) by Artem (@Temmio) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Purely CSS horizontal scroll (experimental) by Nicolás J Engler (@nicolasjengler) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen CSS Horizontal Scrolling by lemmin (@lemmin) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Horizontal scroll section with GSAP ScrollTrigger & Locomotive Scroll by Cameron Knight (@cameronknight) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen fullPage.js by Joe Watkins (@joe-watkins) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Horizontal Scrolling with Scroll Out by Christopher Wallis (@notoriousb1t) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Horizontal scrolling cards by Ryan Parag (@ryanparag) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Horizontal Portfolio Layout with CSS3 Animations and jQuery by Sara Soueidan (@SaraSoueidan) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Horizontal Scroll with GSAP and ScrollMagic by Alexandre Buffet 😎 (@alexandrebuffet) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen CSS-Only Horizontal Parallax Gallery by Paulina Hetman (@pehaa) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Horizontal Scroll Sections by Ellis (@ellisclicky) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Case – Horizontal Scroll Layout by Aeon Yuon Miller (@aeonyuonmiller) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen ScrollMagic horizontal scroll by Noah Delagardelle (@NoahDelagardelle) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen CSS only horizontal scrolling by carpe numidium (@carpenumidium) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen horizontal scrolling with position: sticky by Inès (@inescodes) on CodePen.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Fixed Navigation & Horizontal Scrolling by Joni Trythall (@jonitrythall) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những hiệu ứng scrolling horizontal hữu ích cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!