Trang chủ Lập trình Javascript - HTML Tạo hiệu ứng Parallax đơn giản cho trang web bằng CSS

Tạo hiệu ứng Parallax đơn giản cho trang web bằng CSS

Hiệu ứng Parallax theo mình thấy nó không mang nhiều ý nghĩa lắm nhưng nó tạo cảm giác… mượt mà cho trang web. Nhiều trang web dùng hiệu ứng này làm cho trang web trở nên có thiện cảm cho khách truy cập.

Theo tìm hiểu thì mình thấy có nhiều cách để tạo ra hiệu ứng này cho trang web. Trong đó sử dụng thư viện jQuery với vài thư viện chuyên dụng. Tuy nhiên bạn có thể dễ dàng tạo hiệu ứng này dễ dàng với CSS.

Mời các bạn xem trang web demo: http://mangbinhdinh.vn/demo/parallax/

Mã CSS

Và đây là mã HTML

Tùy theo mục đích sử dụng mà bạn có thể tùy biến thêm cho phù hợp

Các bạn có thể tải trang web mẫu tại:

Box: http://tinyurl.com/nonw3rt
Mediafire: http://tinyurl.com/ok9obav

Chúc các bạn thành công

Huỳnh Mai Anh Kiệt

- Advertisement -
Huỳnh Mai Anh Kiệthttps://anhkiet.biz
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên cho Hura Apps - một startup nhỏ về công nghệ tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

BÀI VIẾT MỚI

Nhận quà từ đối tác công nghệ Recharge

Recharge là một trong những công ty chuyên cung cấp giải pháp bán hàng đăng ký định kỳ (subscription payments) cho các nền tảng...

Hướng dẫn tải video ngắn Facebook Reel miễn phí

Facebook Reels là tính năng video ngắn mới của Facebook. Nếu bạn muốn tải những video ngắn này của mọi người thì bạn có...

Lập Trình Viên 25 Tuổi Kiếm Được $30.000 Mỗi Tháng Từ Các Ứng Dụng Shopify

Mat De Sousa là một doanh nhân Pháp, anh là người đứng sau 2 ứng dụng Shopify là Wide Bundles và WideReview do chính...

Lần đầu nhận quà từ Shopify

Hura Apps là 1 trong những đối tác của Shopify được vinh dự Shopify chọn tham gia chương trình (Huấn luyện Thương mại) Commerce...

Một số ưu đãi của Shopify cho người dùng đăng ký mới

Shopify chỉ cho phép người dùng mới 14 ngày dùng thử miễn phí. Nếu bạn cảm thấy khoảng thời gian này là không đủ...

BẠN XEM CHƯA

Câu chuyện khởi nghiệp thành công của “thần tình yêu” thời đại số

Nhắc đến thần tình yêu, chúng ta đều nghĩ tới hình ảnh một cây cung và những mũi tên ái tình thần...

Kích hoạt giao diện mới cho Gmail

Mới đây Google đã tung ra bản cập nhật Gmail, với giao diện hoàn toàn mới và nhiều tính năng rất hữu ích. Tuy...

Hướng dẫn nhận Western Union từ Google qua dịch vụ trực tuyến của ngân hàng ACB

Số là hôm trước tết ra lĩnh tiền từ Google Adsense qua Western Union (WU) nhưng đi 2 ngân hàng ACB và BIDV đều...

Ba chữ tình của cuộc đời

1. Tình thân là một loại chiều sâu, là tình cảm gia đình, cho bạn sự ấm cúng, là thứ tình cảm không có...

Paragon Drive Copy – Sao chép cả ổ cứng

Bạn cần thực hiện thao tác sao chép dữ liệu từ ổ cứng cũ sang ổ cứng mới và đang loay hoay tìm phần...