Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Parallax Scrolling
Webdesign

Tạo hiệu ứng Masked Background với CSS

by
Difficulty:BeginnerLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Final product image
What You'll Be Creating

Trong bài này, chúng ta sẽ dựa vào một kỹ thuật rất thú vị để tạo hiệu ứng tương tự Parallax Scrolling hoàn toàn bằng CSS mà không cần dùng đến Javascript.

Trước tiên, bạn hãy xem trước qua demo để có thể hình dung được chúng ta sẽ làm gì trong bài này. (Bạn cần xem trên desktop/laptop để có thể thấy được hiệu ứng).

Kỹ thuật này có thể dùng để làm một trang giới thiệu sản phẩm bắt mắt hoặc có thể dùng trong các bài thuyết trình bằng Powerpoint/Keynote, và nó cũng rất phù hợp cho một minh họa truyện.

Sau đây là các bước để thực hiện.

Tất cả đều được thực hiện bằng CSS

Điểm mấu chốt của kỹ thuật này là thuộc tính background-attachment: fixed; , có từ phiên bản CSS 2.1 Bất kỳ background image có thuộc tính này thì vị trí của nó sẽ cố định đối với window ( thay vì đối với bản thân element có background image) Chúng ta sẽ cố định phần ảnh minh họa và cho phần nội dung di chuyển khi cuộn trang.

Một số điều cần lưu ý với thuộc tính này là, do background image cố định đối với window, nên vị trí của nó không bị tác động bởi các thuộc tính margin.

Bạn cũng nên biết rằng mặc dù thuộc tính hoạt động tuyệt vời trong tất cả các trình duyệt trên máy tính để bàn, nhưng nó hiện không hoạt động trên Chrome dành cho thiết bị di động và có thể hơi bị giật trên các trình duyệt di động khác. Vì vậy, trong khi khách truy cập của bạn vẫn sẽ thấy hình ảnh của bạn tốt, hiệu ứng cuộn chính nó được xem tốt nhất trên nền tảng máy tính để bàn.

Cách thực hiện

Các bước cơ bản:

  1. Tạo một container element và thêm nội dung.
  2. Thêm padding khoảng 50% độ rộng vào một phía cho container để nó có thể đẩy phần nội dung về phía còn lại.
  3. Thêm background image, chiều rộng 50%, và cho vị trí của nó ở phía ngược lại với phần nội dung.
  4. Đặt hình nền đính kèm: cố định; và xem ma thuật cuộn!

Chúng ta hãy đi qua tất cả điều này xảy ra từng bước như thế nào. Bạn sẽ muốn lấy các tệp nguồn cho hướng dẫn này để bạn có các hình ảnh được yêu cầu.

1. Thiết lập cơ bản

Bắt đầu bằng cách tạo một thư mục dự án và thêm một tệp index.html vào nó, cũng như một thư mục css với một tệp có tên style.css được thêm vào nó. Sao chép và dán bốn hình ảnh từ tệp zip nguồn bạn đã tải xuống vào một thư mục có tên hình ảnh.

Thêm HTML này vào index.html:

Những gì chúng tôi đang làm ở đây là thiết lập trình bao HTML cơ bản, tải trong biểu định kiểu của chúng tôi và một số Phông chữ của Google, sau đó tạo vùng chứa nội dung div đầu tiên của chúng tôi mà chúng tôi sẽ áp dụng kỹ thuật này.

Vùng chứa div có ba lớp:

  1. .content - được sử dụng để đặt một số thuộc tính sẽ phổ biến cho tất cả các vùng chứa nội dung.
  2. .right - xác định rằng vùng chứa này phải có nội dung phù hợp (chúng tôi cũng sẽ làm việc với vùng chứa bên trái)
  3. .illustration_01 - được sử dụng để đặt hình nền và màu nền cụ thể cho vùng chứa này

Tạo kiểu

Bây giờ chúng ta đã sẵn sàng cho một số CSS. Bắt đầu bằng cách thêm một số mã chuẩn hóa và định dạng cơ bản vào tệp style.css của bạn:

Bây giờ cho lớp .content. Thêm phần này vào cuối bảng định kiểu của bạn:

Lớp này là nơi mà hầu hết các phép thuật xảy ra. Đối với văn bản, chúng tôi đặt kích thước phông chữ và màu sắc của chúng tôi. Đối với nền bạn sẽ thấy chúng ta bắt đầu bằng cách thiết lập kích thước nền thành 49% tự động.

Điều này có nghĩa là hình nền sẽ luôn co giãn hoặc thu nhỏ để lấp đầy 49% chiều rộng của trang và chiều cao sẽ điều chỉnh tương ứng. Chúng tôi đang sử dụng giá trị 49% thay vì 50% vì nếu không Firefox sẽ hiển thị một đồ vật lạ ở giữa màn hình.

Sau đó, chúng tôi đã đặt nền cố định, như bạn đã biết từ mô tả ở trên, làm cho hình nền luôn được đặt khi chúng tôi cuộn và làm cho vị trí của nó tương đối so với cửa sổ thay vì vùng chứa được áp dụng.

Cuối cùng chúng ta thiết lập background-repeat: no-repeat; để đảm bảo hình ảnh của chúng tôi chỉ xuất hiện một lần trên trang.

Tiếp theo, thêm lớp .right vào biểu định kiểu của bạn:

Lớp cuối cùng này đặt nội dung văn bản lên một nửa màn hình và hình nền trên hình kia.

Các thiết lập vị trí nền cho hình nền để vị trí chính nó không pixel từ phía bên trái của cửa sổ và để sắp xếp chính nó nửa chừng từ phía trên cùng của cửa sổ.

Cuối cùng, thêm lớp .illustration_01:

Điều này đặt hình nền và màu sắc cụ thể mà chúng tôi muốn cho vùng chứa nội dung này.

Kiểm tra trang web của bạn và bây giờ bạn sẽ thấy điều này:

Khi bạn cuộn xuống, bạn sẽ thấy nội dung trượt dọc trong khi hình ảnh vẫn chính xác vị trí của nó.

2. Thêm một Container thứ hai

Hãy thêm một vùng chứa nội dung khác, vùng chứa này có nội dung được căn chỉnh sang bên trái.

Thêm HTML vùng chứa nội dung này bên dưới div cuối cùng của bạn:

Lưu ý lần này chúng ta sử dụng class .left thay vì .right và chúng ta đã tăng số lượng minh họa cho lớp .illustration_01 được thay thế bằng .illustration_02

Thêm hai lớp mới sau vào bảng định kiểu của bạn:

Lần này, chúng tôi có phần đệm 50% được áp dụng cho phía bên phải của vùng chứa để nội dung sẽ được đẩy sang bên trái và nền nằm ở vị trí nằm ngang ở 100%, tức là tất cả các con đường bên phải. Chúng tôi cũng thêm màu sắc và hình ảnh khác nhau vào nền của vùng chứa này.

Hãy kiểm tra lại trang web của bạn và bắt đầu cuộn xuống. Khi bạn đến cuối của container đầu tiên, bạn sẽ thấy bắt đầu thứ hai sắp tới, chà trên đầu hình ảnh đầu tiên của bạn và dần dần tiết lộ thứ hai của bạn.

3. Chèn dấu phân tách

Nó tăng cường hiệu quả của kỹ thuật này nếu có một dấu phân cách giữa hai thùng chứa, vì vậy hãy thêm nó ngay bây giờ.

Ở giữa hai div vùng chứa của bạn, hãy thêm HTML này:

Và thêm lớp .separator vào biểu định kiểu của bạn:

Khi bạn làm mới trang web của bạn, bây giờ bạn sẽ có một dấu phân cách tốt đẹp giữa các vùng chứa của bạn:

4. Container thứ ba và thứ tư

Bây giờ bạn có thể nhập mã cho các dấu phân cách và vùng chứa nội dung còn lại của bạn.

Thêm HTML này bên dưới các div hiện có của bạn:

Và CSS này vào bảng định kiểu của bạn:

Bây giờ bạn sẽ có toàn bộ màn hình của bạn tại chỗ với một thùng chứa nội dung thứ ba và thứ tư hiển thị:

Cũng như một dấu phân cách cuối cùng để tắt nó:

5. Làm cho nó đáp ứng

Điều cuối cùng bạn cần làm là tính toán các kích thước màn hình khác nhau. Khi khung nhìn quá nhỏ để thoải mái chứa hình ảnh nền của chúng tôi, chúng tôi muốn chuyển chúng thành hình ảnh nội tuyến thay thế.

Ở đầu mỗi vùng chứa nội dung của bạn, bên trong các div mở và phía trên văn bản, thêm một hình có lớp .mallscreen và bên trong đó một thẻ img để tải từng hình ảnh hiện đang được sử dụng trong nền:

Vùng chứa nội dung đầu tiên:

Vùng chứa nội dung thứ hai:

Vùng chứa nội dung thứ ba:

Thùng chứa nội dung thứ tư:

Chúng tôi sẽ sử dụng lớp .smallscreen để ẩn hình ảnh nội dòng này theo mặc định, nhưng để hiển thị nó khi chúng tôi nhận được kích thước màn hình nhỏ hơn.

Thêm lớp sau vào bảng định kiểu của bạn:

Bây giờ chúng tôi sẽ thêm các truy vấn phương tiện sẽ xử lý liệu hình nền hoặc hình ảnh nội tuyến có được hiển thị hay không. Họ cũng sẽ dần dần giảm kích thước của văn bản và khoảng cách trong bố cục sao cho chúng tôi vừa với mọi thứ ở mọi chiều rộng của chế độ xem.

Thêm các truy vấn phương tiện này vào biểu định kiểu của bạn:

Bốn truy vấn phương tiện đầu tiên chỉ đơn giản là giảm kích thước phông chữ và đệm bên trong vùng chứa nội dung dần dần để phù hợp với chiều rộng màn hình có sẵn.

Trong truy vấn phương tiện thứ năm có chiều rộng tối đa: 50rem, chúng tôi bao gồm mã làm cho lớp .smallscreen hiển thị, loại bỏ phần đệm bên ngoài 50% khỏi vùng chứa nội dung và ẩn hình nền. Khi truy vấn phương tiện này khởi động, chúng tôi sẽ không còn thấy hình nền cố định lớn và thay vào đó, chúng tôi sẽ thấy hình ảnh thông thường ở đầu mỗi vùng chứa nội dung.

Bây giờ, khi bạn làm mới trang web của mình, bạn sẽ thấy nó dễ dàng mở rộng cùng với tất cả chiều rộng của chế độ xem, cho đến khi bạn thấy điều này ở kích thước nhỏ nhất:

Phần kết luận

Thậm chí sau nhiều năm làm việc với CSS, tôi không bao giờ thất vọng bởi số lượng những điều tuyệt vời ngày càng tăng mà bạn có thể làm với nó. Và kỹ thuật đơn giản hơn, ấn tượng hơn.

Hãy thử đá quý nhỏ này, nó rất nhanh chóng và dễ dàng bạn có khả năng để có được nối!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.