Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
15 Hiệu Ứng Horizontal Scroll CSS Javascript

15 Hiệu Ứng Horizontal Scroll CSS Javascript


Ngày 23 Tháng 10 Năm 2021

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

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

 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

 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

 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

horizontal scrolling với fullpagejs

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

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

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

 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

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

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

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

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

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

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

  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

 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.

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ẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.