Tạo hiệu ứng trượt mượt mà bằng JavaScript khi thiết kế Landing Page
  1. Home
  2. Phần mềm
  3. Tạo hiệu ứng trượt mượt mà bằng JavaScript khi thiết kế Landing Page
Nguyễn Văn Luyến Nguyễn Văn Luyến 5 năm trước

Tạo hiệu ứng trượt mượt mà bằng JavaScript khi thiết kế Landing Page

Chào các bạn, hôm trước mình làm một Landing Page đơn giản về Bất động sản. Mày mò một hồi lâu mới tìm được đoạn JS tạo hiệu ứng trượt mượt mà trong trang. Thấy hay quá nên viết bài chia sẻ mọi người luôn nhé!

Để hiểu rõ hơn về những thứ mình sắp trình bày, chắc bạn cần ôn qua một chút kiến thức về thẻ liên kếtvà đặc biệt là thẻ liên kết neo (liên kết nội bộ).

Thẻ liên kết neo (Anchor Link)

Thẻ liên kết neo (liên kết nội bộ) hay còn gọi là (Anchor Link) nghĩa là liên kết trong siêu văn bản (HTML) sẽ dẫn đến một vị trí bất kỳ bên trong tài liệu HTML đó mà không phải tải lại hoặc không phải mở tài liệu mới!

Để thẻ liên kết neo hoạt động, chúng ta phải khai báo đủ 2 thành phần:

Xem ví dụ cụ thể ở demo website sau: //bds4.ninhbinhweb.net

Ta có thể thấy, bấm vào các liên kết trên thanh menu nó sẽ nhảy xuống các khu vực được gán thuộc tính ID tương ứng.

Và nếu các bạn tinh ý sẽ thấy khi bấm các liên kết trên thanh menu thì trang web nó sẽ tự động trượt nhẹ nhàng lên hoặc xuống phải không?

Hiệu ứng đó không phải mặc định có sẵn, mà phải có mã JavaScript tác động vào đấy! Hiệu ứng đẹp phải không? Theo dõi tiếp nhé!

Tạo hiệu ứng trượt mượt mà bằng JavaSript khi thiết kế Landing Page

Khi thiết kế Landing Page, chắc hẳn các bạn sẽ cần dùng đến các thẻ liên kết neo (Anchor Link) và cách chèn thẻ liên kết neo như nào thì mình vừa nói qua rồi.

Bước này chúng ta sẽ thao tác gắn JavaScript vào website để nó áp dụng hiệu ứng trượt mượt mà lên xuống nhé!

Bước 1: Copy code Smooth Scrolling

Các bạn copy đoạn code JS trên nhé! Nhớ đừng copy thiếu kẻo nó không hoạt động được nhé!

Bước 2: Dán code JS vào header.php trong theme

Dán đoạn code vào bên trong cặp thẻ trong file header.php của theme nhé!

Đoạn code trên hoạt động với các thẻ liên kết neo và khi bạn ấn liên kết nó sẽ trượt mượt mà tới vị trí được neo.

Giuseart.com-Chèn-hiệu-ứng-trượt-mượt-mà-cho-website
Chèn đoạn code JS tạo hiệu ứng trượt mượt mà cho website vào bên trong cặp thẻ

Để biết file header.php nằm chỗ nào, các bạn vàoQuản trị > Giao diện > Sửa > Header.php.

Riêng các bạn dùng theme FlatsomeChild-theme thì hơi khác chút. Cụ thể là:Quản trị – Giao diện – Sửa – Chọn theme Flatsome – Header.php.

Bước 3: Lưu lại và hưởng thành quả

Các bạn quay trở lại trang chủ và xem thử đã Ok chưa nhé!

Một số trường hợp có thể không được vì lí do dùng các plugin nén Cache hoặc chặn JS. Do đó, khi gặp lỗi, nếu muốn chắc chắn hơn thì các bạn thử tắt các plugin đó để kiểm tra nhé!

Lời kết

Cám ơn các bạn đã quan tâm theo dõi và ủng hộ blog GiuseArt.com thường xuyên. Chúc các bạn thực hiện thành công nhé! Có thắc mắc hoặc sự cố gì trong quá trình thực hiện cứ bình luận để anh em tìm cách khắc phục nhé!

16 lượt xem | 0 bình luận
Luôn luôn lắng nghe, lâu lâu mới hiểu

Bình luận gần đây

//rongcon.net
Nguyễn Văn Luyến 7 tháng trước
Ưng dụng này rất hay cho người hay thực hiện các biểu mâu, thư mời,...
//rongcon.net
Nguyễn Văn Luyến 7 tháng trước
Chuẩn bị lại lên giá
//rongcon.net
Chuyển Đổi Số 1 năm trước
Có trang nguồn mình tải á, bạn qua trang đó xem thử. Mình cài được bình thường á
//rongcon.net
Chuyển Đổi Số 1 năm trước
Mỉnh cũng thấy cái gì hay hay lưu lại trên trang cá nhân khi nào cần lấy ra dùng thôi à. Cảm ơn bạn nhiều!
//rongcon.net
quang tuấn 1 năm trước
ok cám ơn add
//rongcon.net
Đàm kiên 1 năm trước
sao không thấy hướng dẫn khắc phục lỗi the macro vậy
//rongcon.net
Đàm kiên 1 năm trước
file tải về chỉ có 3 file hướng dẫn chứ không có file cài đặt nhé
//rongcon.net
Nguyễn Văn Luyến 2 năm trước
Bài viết hay
ZaloMessengerEmail
Đồng ý Cookie
Trang web này sử dụng Cookie để nâng cao trải nghiệm duyệt web của bạn và cung cấp các đề xuất được cá nhân hóa. Bằng cách chấp nhận để sử dụng trang web của chúng tôi