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.
Cách Tạo Scroll horizontally
Đầ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.
Các Ví Dụ Khác Về Horizontal Scroll
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.
Bootstrap 4 Horizontal Scrolling

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.
Purely CSS horizontal scroll

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.
CSS Horizontal Scrolling

Còn dưới đây là kết quả trên Codepen nha.
See the Pen CSS Horizontal Scrolling by lemmin (@lemmin) on CodePen.
Horizontal scroll section

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.
Horizontal Scrolling Với fullpage.js

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.
Horizontal Scrolling with Scroll Out

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.
Horizontal scrolling cards

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.
Horizontal Portfolio Layout

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.
Horizontal Scroll with GSAP and ScrollMagic

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.
CSS-Only Horizontal Parallax Gallery

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.
Horizontal Scroll Sections

Còn dưới đây là kết quả trên Codepen nha.
See the Pen Horizontal Scroll Sections by Ellis (@ellisclicky) on CodePen.
Horizontal Scroll Layout

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.
ScrollMagic horizontal scroll

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.
CSS only horizontal scrolling

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.
horizontal scrolling

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.
Fixed Navigation & Horizontal Scrolling

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.
Nếu bạn muốn tham khảo cách tạo hiệu ứng scroll bằng aos thì truy cập đường dẫn bên dưới nha.
Tạo hiệu ứng scroll bằng AOS
Nếu bạn muốn tham khảo các hiệu ứng scroll indicator thì truy cập đường dẫn bên dưới nha.
Scroll Indicator
Nếu bạn muốn tham khảo các hiệu ứng scroll javascript css thì truy cập đường dẫn bên dưới nha.
Scroll Javascript CSS
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ẻ!