Bối cảnh và giới thiệu
Nếu bạn đang duyệt bất kỳ trang web hiện đại nào trên máy tính hoặc điện thoại di động, bạn có thể đã gặp phải trường hợp khi cuộn xuống / lên trang web, nó xuất hiện giống như toàn bộ màn hình đang di chuyển theo hướng cuộn. Nếu đây là hiệu ứng trong nền, thông tin ở nền trước cũng thay đổi khi bạn cuộn. Hiệu ứng này có thể được mô tả ngắn gọn là Parallax Scrolling.
Cuộn
Hãy cho chúng tôi hiểu ý nghĩa của nó bằng cách cuộn. Khi bạn đang xem một trang web, hành động duyệt trang web theo bất kỳ hướng nào (lên, xuống, trái và phải), được gọi là Cuộn.
Thông thường, nếu bạn là người dùng máy tính để bàn, hành động này được thực hiện bằng cách sử dụng con lăn trên chuột.
Lịch sử
Chúng ta hãy nhìn vào từ - Cuộn. Ngày xưa, để gửi tin nhắn cho những người ở khoảng cách xa, người ta đã sử dụng các cuộn giấy viết tay. Những cuộn giấy này trông giống như hình dưới đây -
Hãy tưởng tượng hành động của người đang giữ cuộn giấy. Để đọc toàn bộ nội dung, người đó sẽ phải “cuộn” và cuộn nó thêm. Việc sử dụng các cuộn giấy này cũng là để duy trì một văn bản hoặc các quyết định hồ sơ. Theo thời gian, việc sử dụng cuộn giấy ngày càng tăng khi nó được chuẩn bị từ các vật liệu viết khác nhau như - giấy cói, giấy da và giấy.
Khi máy tính phát triển, việc xử lý và lưu trữ các tài liệu, bảng và hình ảnh rất lớn trở nên khả thi. Đôi khi dữ liệu quá nhiều đến mức kích thước màn hình không đủ để hiển thị dữ liệu cho người dùng. Khi dữ liệu được hiển thị lớn hơn kích thước của cửa sổ hoặc vùng hiển thị, dữ liệu sẽ vẫn bị ẩn. Điều này cần thiết cho một cách tiếp cận mở rộng diện tích màn hình.
Một số tùy chọn để mở rộng màn hình được liệt kê bên dưới:
- Để tăng kích thước màn hình
- Để giảm kích thước dữ liệu
- Để sử dụng tính năng cuộn
Cơ chế cuộn này quan trọng hơn đối với những người làm việc với thiết kế đồ họa và chỉnh sửa ảnh.
Nguồn gốc cuộn thị sai
Chúng ta hãy xem xét lịch sử của việc cuộn thị sai. Đầu tiên, chúng ta sẽ hiểu từ parallax nghĩa là gì. Từ thị sai bắt nguồn từ tiếng Hy Lạpπαράλλαξις (parallaxis), có nghĩa là sự luân phiên.
Nếu chúng ta đang xem một đối tượng từ một góc, đối tượng sẽ xuất hiện theo một cách cụ thể. Nhưng nếu bạn đang di chuyển cùng một đối tượng từ các vị trí khác nhau, thì sẽ có một chuyển động rõ ràng của các đối tượng. Hiện tượng này được gọi là thị sai.
Bây giờ chúng ta đã hiểu nguồn gốc và nền tảng của Parallax, chúng ta hãy hiểu lịch sử và khái niệm của Parallax cuộn trong thiết kế web.
Định nghĩa
Theo Wikipedia - Parallax scrolling là một kỹ thuật trong đồ họa máy tính trong đó hình ảnh nền di chuyển qua máy ảnh chậm hơn so với hình ảnh tiền cảnh, tạo ảo giác về chiều sâu trong cảnh 2D và tăng thêm cảm giác đắm chìm trong trải nghiệm ảo.
Di chuyển thị sai đã được sử dụng trong những ngày đầu của hoạt hình. Nhiều hãng phim hoạt hình (như Disney) đã sử dụng máy ảnh đa mặt phẳng để đạt được hiệu ứng thị sai.
Khi công nghệ đồ họa máy tính phát triển cùng với các khuôn khổ tiên tiến như JavaScript, các nhà thiết kế và phát triển web giờ đây có thể xây dựng các trang web với trải nghiệm phong phú. Mặc dù thao tác cuộn thị sai bắt đầu với một vài lớp, nhưng nó đã được đưa lên cấp độ tiếp theo với các thanh cuộn trong máy tính. Kỹ thuật này vẫn giữ nguyên, nhưng do ứng dụng của nó cho Scrolling, một trải nghiệm độc đáo đã được tạo ra.
Ví dụ
Di chuyển thị sai được sử dụng rộng rãi trong các trang web hiện đại. Vì thao tác cuộn thị sai có thể được triển khai cho điện thoại di động cũng như các trang web trên máy tính chỉ trong một lần, nên mức độ phổ biến của các trang web như vậy đã tăng vọt trong những năm gần đây.
Dưới đây là một số ví dụ về các trang web sử dụng thao tác cuộn thị sai:
Bear Grylls
Khi hoạt ảnh tiếp tục, bạn sẽ có thể thấy nội dung trang web tương tác như thế nào. Khi bạn cuộn về phía trước, ngày càng có nhiều thông tin hơn sẽ được tiết lộ.
Kiếm tiền của bạn quan trọng
Để giới thiệu cho người đọc những lợi ích của liên minh tín dụng, trang web này sẽ đưa bạn qua một cốt truyện. Khi bạn cuộn lên phía trước, thông tin sẽ được tiết lộ theo một cách độc đáo.
Infographic InfoQuest
Hành trình của một nhân viên để tìm kiếm thông tin quan trọng tại nơi làm việc của anh ta được mô tả bằng cách sử dụng trải nghiệm cuộn.
GitHub 404
Điều này hơi khác so với trải nghiệm thị sai thông thường, đối tượng ở đầu màn hình di chuyển khi bạn di con trỏ chuột qua nó.
Các ứng dụng của Parallax Scrolling
Bây giờ, cần phải rõ ràng từ định nghĩa và nền tảng rằng cuộn thị sai rất hữu ích trong nhiều loại phương tiện kỹ thuật số. Dưới đây là một số ứng dụng đang di chuyển thị sai -
Thiết kế trò chơi
Di chuyển thị sai được sử dụng rộng rãi trong thiết kế trò chơi. Nhân vật cần phải di chuyển so với nền và với sự điều khiển của người chơi bằng chuột và bàn phím, toàn bộ trải nghiệm cần phải thay đổi. Thiết kế trò chơi là cách sử dụng thao tác cuộn thị sai nhưng rất hợp thời trang.
Trang web
Để khiến người dùng nắm bắt được trang web, một số trải nghiệm năng động và khác biệt là rất quan trọng. Như bạn có thể nhận thấy từ các ví dụ về các trang web được thảo luận ở trên, thao tác cuộn thị sai bổ sung thêm vào nội dung vì sự thể hiện của nó theo cách tương tác.
Chương này nói về các khái niệm thiết kế web và lợi thế của việc sử dụng parallax scroll trong thiết kế web.
Nền thiết kế web
Kể từ đầu năm 20 thứ thế kỷ, phương tiện truyền thông giấy đã có thành một cạnh tranh khốc liệt do phương tiện truyền thông kỹ thuật số. Các phương tiện kỹ thuật số bao gồm những gì chúng ta thấy trên internet và do đó là các tạp chí đồng minh đi kèm.
Các bản tin mà bạn nhận được như một phần của đăng ký hàng tuần / hàng tháng cũng được đưa vào phương tiện kỹ thuật số. Chủ yếu, phương tiện kỹ thuật số phụ thuộc nhiều vào thiết bị di động và máy tính để bàn. Nó tạo ra sự khác biệt khi bạn có thể xem nội dung trên thiết bị di động (cầm tay) cũng như các thiết bị để bàn. Cách nội dung được hiển thị trên một trong hai thiết bị, một phong cách thiết kế nội dung cụ thể đang diễn ra.
Phong cách thiết kế này được gọi là Web Designing. Từ quan điểm thiết kế hoặc mã hóa, khi một nhà thiết kế trang web bắt đầu xây dựng một trang web, anh ấy / cô ấy cũng sẽ xem xét các thiết bị di động.
Theo Wikipedia, Web design bao gồm nhiều kỹ năng và lĩnh vực khác nhau trong việc sản xuất và bảo trì các trang web. Một trong những kỹ năng đó là thiết kế trải nghiệm có tác động cho người dùng. Thiết kế web phục vụ cho trải nghiệm này và cung cấp một cách có tổ chức để sắp xếp nội dung trang và cung cấp kiểu dáng khác nhau cho chúng.
Thiết kế web bao gồm - thiết kế giao diện, thiết kế đồ họa và sử dụng các tiêu chuẩn nhất định để viết mã. Công việc này có thể được thực hiện bởi một người hoặc bởi một nhóm người.
Có rất nhiều công cụ có sẵn trên thị trường để giúp công việc này trở nên dễ dàng, tuy nhiên, việc tạo ra giao diện trang web phụ thuộc vào kỹ năng sáng tạo của mỗi người.
Thiết kế web thời hiện đại
Với sự phát triển của công nghệ, kéo theo sự bùng nổ của kiến thức. Internet đã trở thành một thứ và nó đã nâng cao chất lượng cuộc sống của chúng ta. Tại bất kỳ thời điểm nào, ngày càng có nhiều thông tin được xử lý bởi một người dùng Internet bình thường. Thông tin này có thể ở dạng trang web trên máy tính để bàn hoặc từ thiết bị cầm tay; máy tính bảng hoặc điện thoại di động.
Mặc dù có rất nhiều thông tin cố gắng thu hút sự chú ý của người dùng, nhưng rõ ràng là một người thiết kế trải nghiệm web, there are only 3 seconds allocated to pass the message across.
Làm thế nào để một người đối phó với điều này? Điều quan trọng hơn là chuyển tải thông điệp, bởi vì nó là nguồn gốc cho bất kỳ thiết kế web nào. Bạn muốn xây dựng một trang web giao tiếp, đồng thời nó phải thu hút và khiến người dùng gắn bó với nội dung. Đó thực sự là một nhiệm vụ khó khăn.
Xem xét phạm vi công việc rộng lớn cho bất kỳ nội dung web nhất định nào, ngày càng có nhiều người tham gia vào thế giới Thiết kế web. Một nhà thiết kế web sáng tạo là tâm điểm của thị trấn nhờ tài năng tuyệt vời của anh ấy / cô ấy trong việc tạo ra trải nghiệm người dùng tốt. Nhà thiết kế web hiện có thể nhận một công việc tại một công ty tiếp thị / quảng cáo hoặc bắt đầu tự mình đi sâu vào thiết kế web.
Aesthetic appeal is the key for a given content on web. Điều này có nghĩa là một nhà thiết kế web phải nhận thức được các nguyên tắc và nền tảng của thiết kế, màu sắc, khoảng cách, v.v. Ngày càng có nhiều người dùng xem nội dung web chất lượng cao mỗi ngày. Rõ ràng là người ta sẽ so sánh trang hoặc trang web hiện tại với trang đã được truy cập cách đây vài giờ hoặc vài phút. Sự sắp xếp của nội dung, cùng với đồ họa và màu sắc đẹp đã làm cho nhiều banner / trang độc lập trở thành một thứ phổ biến trên internet.
Thí dụ
Chúng ta hãy lấy trường hợp của một đồ họa đơn giản. Có rất nhiều đồ họa trên internet, được gọi là meme. Chúng đơn giảnGraphics Interchange Format (GIF)hình ảnh với một số văn bản được nhúng bên trong đồ họa. Những meme này đang tạo ra các vòng kết nối Internet dựa trên một sự kiện gần đây ở một số nơi trên thế giới. Nếu chúng ta xem xét ví dụ này, thì kháng cáo duy nhất mà họ có là hình ảnh và một số văn bản có liên quan hoặc không liên quan.
Tuy nhiên, nó đã trở nên phổ biến đến mức khiến người ta phải suy nghĩ về những khả năng tuyệt vời trên Internet.
Vì vậy, để một thiết kế web hiệu quả, cả tính sáng tạo và phương pháp truyền tải thông điệp đều đóng vai trò quan trọng.
It is important point to note that a successful web page is combination of Web Design and Web Development. Theo xu hướng thị trường hiện tại, cùng với nhà thiết kế web, một nhà phát triển web là người bắt buộc phải có trong nhóm. Một nhà thiết kế web sẽ luôn tìm kiếm nguồn cảm hứng và sử dụng sự sáng tạo của mình để tạo ra đồ họa và cách phối màu phù hợp. Trong khi đó, một nhà phát triển web sẽ sử dụng các kỹ năng viết mã của mình để đưa đồ họa và cách phối màu trực tiếp trên trang web.
Một nhà thiết kế web cũng phải có kiến thức về cách viết mã, để làm cho đồ họa hoặc bảng màu dự kiến có thể sử dụng được cho một nhà phát triển web. Một mã đơn giản trong một ứng dụng đơn giản như Notepad có thể giúp một nhà thiết kế web đảm nhận vị trí lái xe trong quá trình phát triển web.
Sử dụng Parallax Scrolling
Parallax Scrolling rơi vào ranh giới công việc của cả nhà thiết kế web và nhà phát triển web. Một nhà thiết kế web có thể tạo ra hiệu ứng của Parallax Scrolling bằng cách sử dụng các công cụ như InVision, UXPin để truyền đạt cho nhà phát triển web hành vi dự định khi cuộn. Hơn nữa, một nhà phát triển web sẽ dựa trên kỹ năng của mình để tạo ra hiệu ứng cuộn thị sai. Điều này có thể được thực hiện bằng các kỹ thuật JavaScript, CSS và jQuery khác nhau. Mô tả chi tiết của từng phương pháp này được cung cấp trong các chương tiếp theo.
Theo định nghĩa được chỉ định trong phần trước, parallax scrolling is a technique when the background content is moved at a different speed than the foreground content when scrolling.
Một kỹ thuật CSS đơn giản để tạo hiệu ứng cuộn thị sai được hiển thị trên trang web này - The Urban Walks .
Như bạn có thể thấy trong ảnh chụp màn hình ở trên, điện thoại di động ở giữa màn hình sẽ thay đổi nội dung sau khi bạn cuộn hai lần. Ngoài ra, hãy quan sát ở cuộn đầu tiên, hình nền với điện thoại di động sẽ thay đổi.
Quá trình chuyển đổi này mang lại cho bạn cảm giác rằng điện thoại không đổi ở vị trí của nó và nền sẽ thay đổi khi bạn cuộn xuống. Hiệu ứng này được gọi là hiệu ứng di chuyển thị sai. Bạn biết rằng bạn đang cuộn nó xuống vì có một chỉ báo của màn hình ở phía bên phải của màn hình dưới dạng một số dấu chấm.
Việc sử dụng thị sai cuộn đầu tiên là trong các trò chơi máy tính cũ. Trong đó hình nền cố định sẽ di chuyển với tốc độ chậm hơn khi nhân vật di chuyển nhanh hơn nền. Một số ví dụ về những trò chơi này - Aladdin của Disney và Vua sư tử của Disney. Những trò chơi này được ra mắt lần lượt vào năm 1993 và 1994.
Mặc dù đúng là nó bắt đầu với các trò chơi, nhưng hiện tại, nhiều nhà thiết kế web đang nhấn mạnh vào hiệu ứng để khán giả yêu thích trang web của họ. Lợi thế của việc di chuyển thị sai được mở rộng từ trang web đến các trang web di động.
Những trang web này, từng được thiết kế với tính năng cuộn thị sai cho các phiên bản dành cho máy tính để bàn, được bổ sung thêm mã hỗ trợ cả màn hình di động.
Ưu điểm của Di chuyển thị sai trong Web và Di động
Trong phần này, chúng tôi sẽ thảo luận về những lợi ích của việc sử dụng thị sai cuộn từ nhiều khía cạnh khác nhau như được thảo luận dưới đây:
Từ quan điểm của khán giả
Có một yếu tố thú vị liên quan đến việc cuộn thị sai. Như bạn đã thấy trong ví dụ trên, việc truyền tải thông tin hàng nghìn từ đã trở nên dễ dàng hơn khi người dùng cuộn từ các màn hình khác nhau.
Nếu chúng ta coi là người dùng lần đầu tiên, có một sự tò mò liên quan đến mỗi cuộn. Do đó, nó không chỉ làm phong phú thêm trải nghiệm của trang web mà còn làm tăng khả năng người dùng dành nhiều thời gian hơn trong lần đầu tiên truy cập trang web.
Tỷ lệ tương tác của người dùng tăng lên đáng kể khi người dùng bị cuốn hút vào thao tác cuộn.
Người dùng không cần phải suy nghĩ về quá trình tìm hiểu thông tin, vì nó có sẵn một cách rõ ràng hơn.
Trong một số trường hợp, bạn có thể kể một câu chuyện về sản phẩm / dịch vụ mà bạn đang cung cấp bằng cách tạo hoạt ảnh cho các mục khác trên màn hình, chẳng hạn như logo hoặc biểu tượng menu.
Từ góc độ kỹ thuật
Sau khi bạn triển khai thao tác cuộn thị sai cho phiên bản máy tính để bàn, rất dễ dàng sử dụng cùng một khuôn khổ cho trang web hoặc màn hình di động.
Vì đoạn mã đơn giản và có thể sử dụng lại, nếu bạn là đại lý tiếp thị hoặc công ty cung cấp dịch vụ trang web, việc này trở nên dễ dàng khi thu thập khách hàng mới.
Kiến thức về cuộn thị sai đi kèm với kiến thức chuyên môn hơn trong các khung giao diện người dùng như CSS, JavaScript, v.v.
Đối với một nhà phát triển web, khi nói đến việc tạo hiệu ứng cuộn thị sai, có nhiều kỹ thuật khác nhau. Một trong những kỹ thuật như vậy là sử dụngCascaded Styling Sheets(CSS).
CSS giải thích cách các phần tử HTML được hiển thị trên màn hình. Người ta có thể tạo một tệp CSS và nó có thể được sử dụng cho trang web hoàn chỉnh. Việc thêm tệp CSS sẽ đơn giản hơn là thêm kiểu vào từng phần tử HTML và quản lý chúng trong các phần khác nhau của trang web.
Note- Một số phương pháp được thảo luận dưới đây trong chương này dành riêng cho máy tính để bàn và không dành cho thiết bị di động. Nó sẽ được đề cập trong các bước khi một kỹ thuật cụ thể không phù hợp với thiết bị di động.
Xem xét việc giảm tải CSS vào tất cả các bản vẽ bổ sung vào mô hình đối tượng tài liệu (DOM), có khả năng tăng tốc phần cứng và hiệu ứng mượt mà hơn mà không gây gánh nặng cho CPU.
Phương pháp vị trí tuyệt đối
Phương pháp này thường được sử dụng để tạo hiệu ứng thị sai, vì phương pháp này tương đối nhẹ so với các tùy chọn khác có sẵn. Vị trí của hình nền được giữ cố định so với nội dung khác trên màn hình. Trong ví dụ được thảo luận dưới đây, bạn sẽ thấy cách thực hiện điều đó bằng cách sử dụng sự kỳ diệu của CSS.
Trong phần này, chúng ta sẽ xem xét hai phương pháp cho Phương pháp Vị trí Tuyệt đối -
- Nền đơn
- Nhiều nền
Phương pháp nền đơn
Trong phương pháp này, chúng tôi sẽ tạo hai tệp trong cùng một thư mục. Tuân thủ các bước đưa ra dưới đây cho cùng một mục đích -
Step 1
Chúng ta phải tạo hai tệp trong cùng một thư mục: tệp đầu tiên có đánh dấu HTML và tệp thứ hai có mã CSS.
Step 2
Bây giờ, hãy để chúng tôi xác định đánh dấu HTML của chúng tôi. Hãy quan sát đoạn mã dưới đây -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>Step 3
Mở notepad. Sao chép và dán đoạn mã trên.
Khi bạn đang lưu tệp, dưới Save as type, lựa chọn All Files. Nhập tên cho tệp của bạn theo yêu cầu, nhưng phải theo sau tên đó là phần mở rộng -.html như thể hiện trong ảnh chụp màn hình bên dưới.
Step 4
Sau khi tệp được lưu, hãy tạo một tệp khác trong notepad và dán mã được cung cấp bên dưới -
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}Như bạn đã thấy ở bước trước, khi bạn đang lưu tệp, dưới Save as gõ, chọn All Files. Nhập tên cho tệp của bạn theo yêu cầu và thêm phần mở rộng.css với nó.
Phân tích mã
Hãy cho chúng tôi hiểu phần nào của mã chịu trách nhiệm về hiệu ứng thị sai. Hầu hết công việc quan trọng đối với thị sai được thực hiện bằng cách sử dụng các quy tắc phối cảnh và biến đổi. Tham khảoline 15trong đoạn mã trên. Phối cảnh được tạo ra choBgContainerĐầu tiên. Điều này bắt đầu một nền tảng cho quy tắc chuyển đổi.
bên trong Parallax container bắt đầu trên dòng 40, transform quy tắc trên dòng 48 đẩy div BgContainer vào nền bằng cách sử dụng dịch (-1px).
Bạn có thể sửa đổi các giá trị cho các tham số dịch và tỷ lệ để sửa đổi độ sâu của thị sai.
Khi bạn mở tệp html, hiệu ứng thị sai sẽ hiển thị như hình dưới đây:
Note - Đối với phần còn lại của hướng dẫn, người đọc sẽ giả định rằng người đọc có thể tạo các tệp HTML và CSS theo cấu trúc thư mục được cung cấp trong phương pháp trên.
Phương pháp nhiều nền
Trong phương pháp này, chúng ta sẽ có các hình ảnh khác nhau xuất hiện khi người dùng cuộn xuống trang. Có một hình ảnh bằng bút chì, được sử dụng với các kết hợp màu sắc khác nhau để minh họa hiệu ứng này.
Quan sát đoạn mã sau cho trang HTML như được hiển thị bên dưới:
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>Tương tự như ví dụ trước, chúng ta sẽ sử dụng styles.cssđược lưu trữ trên cùng một vị trí với tệp HTML này. Chúng tôi có ba div khác nhau được đặt tên là First, Second, Third và Four.
Mã CSS cho cuộn thị sai được cung cấp bên dưới:
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}Ở đây, chúng tôi tạo hiệu ứng thị sai từ dòng 7, thuộc tính quan trọng ở đây là background-attachment:fixed.
Sử dụng thuộc tính này, hình ảnh đầu tiên có bút chì màu sẽ luôn ở trên cùng. Khi bạn cuộn xuống, các hình ảnh khác nhau như được mô tả từ dòng 28 sẽ bắt đầu hiển thị.
Kết quả là, bạn sẽ có thể thấy hiệu ứng thị sai như được hiển thị trong gif bên dưới. Hình ảnh sau đây là ảnh chụp màn hình của ví dụ mà chúng tôi đã xem xét cho nhiều nền.
Thị sai CSS thuần túy
Hãy để chúng tôi kết hợp kiến thức từ hai phương pháp trước và tạo hiệu ứng Thị sai CSS thuần túy nâng cao.
Sự khác biệt sẽ là cách chúng tôi sắp xếp image phần tử và z-transformbất động sản. Giải thích về thuộc tính sẽ được cung cấp sau mã CSS.
Tạo tệp HTML với mã sau bằng phương pháp thông thường từ Notepad.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>Đối với tệp CSS, mã được cung cấp bên dưới:
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}Phân tích mã
Chúng tôi đã cố định vị trí của lớp đầu tiên trong line 26 bằng cách sử dụng position:absolutebất động sản. Các vị trí cũng được mã hóa cứng thành 0.
Trong parallax_two, là lớp có tiêu đề, chúng tôi đã áp dụng z-index: 10để tạo hiệu ứng nổi cho tiêu đề. Lớpparallax_three được chuyển xuống dưới cùng bằng cách cung cấp thuộc tính margin-top.
Do đó, chúng ta có thể nâng cao mức độ phức tạp trong hiệu ứng Parallax.
Quan sát hiệu ứng như trong hình dưới đây.
Để tạo hiệu ứng Parallax, phương pháp phổ biến nhất là sử dụng JavaScript. Từ chương này trở đi, chúng ta sẽ thảo luận về các khái niệm JavaScript và một số thư viện được sử dụng để đạt được chức năng Parallax scrolling.
Sử dụng JavaScript thuần túy có ý nghĩa để giữ hiệu suất trang web tối ưu. Có nhiều lợi thế khác của việc sử dụng thư viện từ khía cạnh hiệu suất. Tuy nhiên, để hiểu tổ chức mã tốt hơn, chúng ta sẽ bắt đầu với việc triển khai thị sai JavaScript thuần túy. Sự thật thú vị, đôi khi JavaScript thuần túy cũng được gọi làvanilla JavaScript.
Di chuyển thị sai sử dụng JavaScript thuần túy
Đầu tiên, tạo tệp HTML chính với mã hiển thị bên dưới. Trang HTML sẽ chỉ bao gồm bốn văn bản tiêu đề.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>Quan sát rằng trong dòng số 4, ví dụ này, chúng tôi đang sử dụng myscripts.js tệp sẽ được lưu trữ trong cùng một thư mục với tệp HTML và tệp CSS.
Bây giờ, chúng ta hãy chuẩn bị tệp CSS của chúng ta như hình dưới đây.
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}Bây giờ đến phần JavaScript, tạo một tệp trong notepad và lưu nó dưới dạng myscripts.js .
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});Phân tích mã
Hãy để chúng tôi phân tích mã JavaScript.
Mã từ line number 1 to 4 đại diện cho chức năng trợ giúp.
Trong dòng 6, chúng tôi chọn phần tử thị sai của chúng tôi và thêm scrollsự kiện vào cửa sổ. Để xác định bao nhiêu diện tích được cuộn, chúng tôi đang sử dụngscrolledHeightbất động sản. Khi màn hình cuộn xuống,backgroundPositionY được cập nhật cho phần tử thị sai.
Để làm chậm hiệu ứng thị sai, chúng tôi chia cho 1,5, số này có thể được thay đổi thành bất kỳ số nào bạn muốn.
Bây giờ, bạn sẽ có thể thấy trang cuộn xuống như được cung cấp trong ảnh chụp màn hình bên dưới.
Sử dụng Thư viện JavaScript ScrollMagic
Như đã thảo luận trong phần trước, mặc dù chúng ta có thể sử dụng JavaScript thuần túy để tạo hiệu ứng thị sai, nhưng có một số thư viện JavaScript mạnh mẽ sẽ nâng cao trải nghiệm người dùng. ScrollMagic là một trong những thư viện như vậy để tạo các tương tác cuộn thị sai.
Hãy để chúng tôi thảo luận thêm về điều này với sự trợ giúp của một ví dụ như dưới đây -
Note- Trong ví dụ này, để đơn giản, chúng ta sẽ có CSS được lưu trữ trong tệp HTML. Ngoài ra, mã JavaScript sẽ có trong cùng một tài liệu. Tóm lại, chúng tôi sẽ chỉ tạo một tệp HTML và nó sẽ có các thư viện ScrollMagic được tham chiếu cùng với CSS bắt buộc.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>Như được hiển thị trong đoạn mã trên, chúng tôi yêu cầu các tham chiếu thư viện JavaScript từ line 3 to 6. Mã CSS được chỉ định từ dòng 9 đến dòng 19.
Mạng phân phối nội dung
Tham chiếu tập lệnh từ dòng 3 đến dòng 6 trỏ đến URL của Mạng phân phối nội dung ScrollMagic (CDN). Sử dụng CDN có ý nghĩa trong việc phát triển trang web hiện đại, vì bạn có thể tải các thư viện cần thiết mà không làm chậm trang web của mình.
Nếu có các tùy chỉnh được yêu cầu trong các thư viện, người ta sẽ phải lưu trữ các thư viện trên máy chủ tương ứng của chúng để sử dụng các hiệu ứng này. Nếu bạn đang sử dụng các chức năng cơ bản từ thư viện, thì việc sử dụng URL CDN sẽ rất hiệu quả.
Đoạn mã HTML ở trên hiển thị một hình ảnh được phân tách bằng 2 vạch chia. Bộ phận đầu tiên xuất hiện với tiêu đề -These are bricks và phép chia thứ hai xuất hiện với - Some More Bricks.
Lưu ý rằng trong mã CSS từ dòng 9 đến dòng 19, chúng tôi chỉ xác định vị trí và kiểu cho div thị sai tương ứng.
Công việc tạo ra thị sai mềm này sceneđược thực hiện bởi thư viện ScrollMagic. Nếu bạn tham khảo mã tập lệnh từ dòng 43 đến dòng 62, ScrollMagiccontroller được gọi và một scene được tạo ra.
Các cảnh hướng dẫn DOM tạo hiệu ứng thị sai khi chiếm 80% màn hình. JavaScript được sử dụng để hiểu trình kích hoạt cuộn. Kết quả là, những gì bạn nhận được là trải nghiệm nổi trên trang này.
Note - Coi ảnh trên là ảnh GIF, bạn sẽ không quan sát được hiệu ứng mượt mà của các phần chia văn bản.
Kích hoạt hoạt ảnh
Khả năng tạo trải nghiệm người dùng đa dạng là vô tận với Thư viện ScrollMagic. Quan sát các đoạn mã được đưa ra bên dưới để kích hoạt hoạt ảnh khi cuộn.
Lưu ý rằng đối với điều này, bạn cần hai tệp * dấu trừ; một tệp HTML và một tệp CSS.
Tạo tệp HTML với mã hiển thị bên dưới -
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>Bây giờ, hãy tạo một tệp CSS với mã sau trong đó.
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}Phân tích mã
Đề cập đến mã HTML, mã ScrollMagic bắt đầu từ line 17 và tiếp tục cho đến khi line 25. Trong phần này, chúng tôi đang tạo hai cảnh ScrollMagic. Cảnh đầu tiên dành cho hình ảnh viên gạch và cảnh còn lại dành cho hoạt ảnh biểu ngữ.
Như được chỉ định trong setTween chức năng trên line 20, khi hành động cuộn xảy ra ở 40% kích thước màn hình, cảnh tiếp theo bắt đầu sẽ hiển thị biểu ngữ Đây rồi!
Độ mờ của div với id - square được kiểm soát trong tệp CSS trên line 10 và line 15.
Kết quả là, bạn sẽ thấy hoạt ảnh bên dưới trên trang.
Cuộn ngang
Chúng ta cũng có thể áp dụng thao tác cuộn thị sai và đạt được kiểu cuộn ngang. Thư viện ScrollMagic có thể được sử dụng để tạo hiệu ứng cuộn theo chiều ngang. Xem mã bên dưới.
Mặc dù mã được chuyển thẳng về phía trước để tạo hiệu ứng cuộn ngang, chúng ta sẽ cần tham chiếu jquery để đạt được chuyển động ngang của màn hình. Chi tiết về jQuery được cung cấp trong chương tiếp theo, bây giờ, chỉ cần làm theo mã như dưới đây.
Chúng tôi sẽ tạo ba tệp riêng biệt - tệp HTML cho mã chính, tệp CSS cho các kiểu và tệp JS cho các lệnh gọi hàm ScrollMagic.
Đây là mã cho tài liệu HTML.
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>Quan sát rằng chúng ta có ba phần, sẽ xuất hiện sau khi cuộn. Ba phần được biểu thị bằng id title1, title2 và title3 trên các dòng 15,19 và 23 tương ứng.
Mã cho tài liệu CSS được cung cấp bên dưới:
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}Phân tích mã
Màu nền cho ba màn hình (hoặc các phần) được cung cấp trên lines 10, 22 và 25.
Chúng tôi đang tính toán chiều rộng tương đối của mỗi màn hình trong đoạn mã bắt đầu từ line 13.
Mã JavaScript cho ScrollMagic được cung cấp bên dưới:
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});Chú ý triggerHookthuộc tính trên dòng 8. Thuộc tính này chịu trách nhiệm cung cấp hiệu ứng cuộn khi người dùng hoàn thành sự kiện cuộn. Chức năngTimelineMax chịu trách nhiệm cung cấp hiệu ứng cuộn ngang cho màn hình của chúng tôi.
Sau khi tạo các tệp tương ứng, bạn sẽ có thể thấy hình ảnh động cuộn ngang như hình dưới đây.
Trong các chương trước, chúng ta đã hiểu các hiệu ứng tốt khi sử dụng thư viện JavaScript bổ sung cho trang web. JavaScript, khi kết hợp với Photoshop, mang lại sự linh hoạt và dễ dàng phi thường để thêm tính năng cuộn thị sai vào trang web của bạn.
Trong chương này, chúng ta sẽ xem xét ba plugin Photoshop để thêm hiệu ứng cuộn thị sai. Cũng giống như cách chúng ta đã tham khảo trong chương trước cho JavaScript, chúng ta sẽ sử dụng các tham chiếu Photoshop trong mã HTML của mình để tạo thao tác cuộn thị sai Photoshop mạnh mẽ.
Một điểm quan trọng cần lưu ý về các plugin Photoshop là các plugin thường không được cập nhật, do đó bạn sẽ muốn thực hiện một số nghiên cứu trước khi bắt đầu sử dụng bất kỳ plugin nào để cuộn thị sai.
Parallax Scrolling sử dụng Parallax.js đơn giản
Parallax.js sử dụng plugin Photoshop, chúng ta có thể tạo hiệu ứng cuộn thị sai mà không gặp nhiều phức tạp. Xem xét plugin jQuery yêu cầu bao gồm một thư viện cao cấp như bootstrap. Lưu ý rằng trong chương này sẽ có các thẻ HTML5 trong mã.
Chúng ta hãy xem tệp HTML được hiển thị bên dưới -
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>Mã phân tích
Các đoạn mã trên hiển thị mã cho một trang có hai hình ảnh và văn bản mẫu giữa chúng.
Như bạn có thể thấy, mã bắt đầu bằng <!DOCTYPE html>Đây là cách thông thường để cho các trình duyệt biết rằng mã dựa trên HTML5.
các <meta> thẻ từ line 4 to 6hiển thị mã là máy để diễn giải. Bạn sẽ không thể thấy tác động của mã này. Điều quan trọng cần lưu ý ở đây là - vớimeta , các nhà phát triển web có được quyền kiểm soát nâng cao đối với dữ liệu được hiển thị.
Ngoài ra, trên line 8 and 9, Chúng tôi đã bao gồm CSS style sheet cùng với Bootstrap. Đối với một khuôn mặt phông chữ và kiểu chữ cụ thể, Bootstrap là thư viện được sử dụng rộng rãi.
Lines 10 and 11chăm sóc các thư viện Photoshop và Parallax.js. Điều quan trọng là bao gồm quyền kiểm soát đối với Parallax.js để có hiệu ứng của hình ảnh thị sai. Bạn sẽ có thể tìm thấydata-parallax tài sản với div trên line 21, Là đủ để gọi thư viện parallax.js cho hiệu ứng thị sai cần thiết.
Hiệu ứng thị sai có thể được nhìn thấy trong mã trên lines 21 và line 40. Các thuộc tính quan trọng làm cho hiệu ứng này xảy ra với parallax.js là:data-parallax, data-image-src, data-natural-width, data-natural-height.
Với tệp CSS, chúng tôi chỉ phải cung cấp một thuộc tính. Nó như hình dưới đây -
.parallax-container {
height: 500px;
width: 100%;
}Trong đoạn mã HTML ở trên, chúng tôi đã tạo một cấu trúc cụ thể cho các tệp CSS. Chúng tôi sẽ có một thư mục được gọi làcss, sẽ có các tệp CSS - bootstrap.min.css và style.css.
Khi mọi thứ đã hoàn tất với các tài liệu, bạn sẽ có thể thấy hiệu ứng thị sai như hình dưới đây:
Parallaxator sử dụng Plugin Photoshop
Plugin Parallaxator tốt nhất của Photoshop cung cấp hiệu ứng cuộn thị sai và rất dễ sử dụng. Bạn có thể tải xuống plugin Parallaxator, các tệp CSS và JS của nó từ liên kết này - Parallaxator GitHub .
Sau khi các tệp CSS và JS được tải xuống, bạn có thể sử dụng mã hiển thị bên dưới để tạo mã HTML.
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>Mã phân tích
Hiệu ứng thị sai được cung cấp bởi lớp parallax_child được cung cấp với mỗi thẻ img. Parallax_child được nối với các tệp CSS và JS được cung cấp bên dưới.
Để plugin thị sai hoạt động, chúng tôi đã bao gồm fm.parallaxator.jquery.css và fm.parallaxator.jquery.js. Các tệp này bắt buộc phải có trong cùng thư mục với tệp HTML.
Mã cho CSS như hình dưới đây:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}Theo kết quả của đoạn mã trên, bạn sẽ có thể thấy hiệu ứng thị sai.
Stellar.js jQuery plugin cho Parallax Scrolling
Stellar.js là một bổ sung khác cho danh sách các plugin thị sai của Photoshop. Mặc dù nó không còn được duy trì, nhưng các nhà phát triển đã sử dụng bản dựng ổn định của nó, có thể sử dụng hiệu ứng cuộn thị sai một cách dễ dàng. Nó tương thích với các phiên bản mới nhất của Photoshop và dễ thực hiện.
Bạn sẽ cần tải xuống jquery.stellar.js mới nhất từ trang web chính thức cho plugin Stellar.js . Sau khi tải xuống, hãy tạo tệp plugin này trong cùng thư mục với tệp HTML và CSS của bạn.
Hãy để chúng tôi xem xét mã HTML.
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>Mã phân tích
Để Stellar.js hoạt động, chúng tôi đã đưa vào thư viện ngay sau khi plugin Photoshop được tham chiếu trên jquery.stellar.js line 6.
Các hàm cho thị sai Stellar được gọi trong thẻ script từ line 8 to line 15. Với tài sảndata-stellar-background-ratio, Chúng tôi đang thiết lập độ lệch cho hình ảnh được hiển thị. Điều này được thực hiện trênlines 19,20,21 and 22.
Mã CSS được cung cấp bên dưới:
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}Khi cả hai tệp được tạo và stellar.js tệp plugin được bao gồm trong cùng một thư mục, bạn sẽ có thể thấy hiệu ứng như được hiển thị trong ảnh chụp màn hình dưới đây -
Bootstrap là một khung công tác phổ biến với nhiều thành phần sẵn sàng sử dụng để bạn lựa chọn. Bootstrap có thể tối ưu hóa mã để triển khai thao tác cuộn thị sai.
Trong chương này, với một ví dụ Chúng ta hãy thảo luận về cách chúng ta sẽ sử dụng thành phần Jumbotron để thực hiện thao tác cuộn thị sai.
Toàn trang với Parallax Bootstrap4 Jumbotron
Hãy tưởng tượng một trang web nơi người dùng được hiển thị với một hộp "kêu gọi hành động" lớn với một số nội dung liên quan đến giảm giá hoặc bán hàng. Thông thường, Jumbotron tìm thấy ứng dụng của nó ở những nơi như vậy. Nó là một hộp lớn hữu ích để thu hút sự chú ý của người dùng.
Vì chúng tôi chỉ sử dụng một thành phần của Bootstrap, chúng tôi sẽ không tạo một tệp CSS riêng cho ví dụ này. Hãy để chúng tôi đi sâu vào mã HTML.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>Mã phân tích
các line 64 tài liệu tham khảo Thư viện Bootstrap. Chúng tôi đang chỉ định lề và bán kính đường viền cho Jumbotron từline 8 to 11.
Như chúng ta có thể thấy trên line 33, Chúng tôi đang tạo một div với lớp Jumbotron để hiển thị hộp lớn nơi chúng tôi sẽ tải hình ảnh cụ thể của mình. Xin lưu ý rằng không có URL trực tiếp cho hình ảnh lần này, chúng tôi sẽ sử dụng hình ảnh đã tải xuống. Bạn có thể tải xuống bất kỳ hình ảnh có độ phân giải cao nào cho ví dụ của mình và chỉ định nó trongline 16.
Đầu ra mà bạn có thể thấy khi thực thi đoạn mã đã cho ở trên được hiển thị bên dưới:
Trong hướng dẫn này, chúng tôi đã nghiên cứu các thư viện khác nhau để tạo thao tác cuộn thị sai. Chúng tôi đã bao gồm tất cả các khía cạnh từ cấp độ cơ bản đến cấp độ nâng cao, nơi chúng tôi sử dụng CSS Bootstrap, nơi chúng tôi đã sử dụng để phát triển giao diện người dùng. Chúng tôi khuyên bạn nên áp dụng các kỹ năng sáng tạo của mình để tạo ra một trang web khó có thể bỏ qua. Hãy nhớ rằng đối với thao tác cuộn thị sai, có rất nhiều ví dụ trực tuyến để cung cấp cho bạn nguồn cảm hứng.
Sử dụng Parallax Scrolling
Như chúng ta đã thảo luận trong các chương giới thiệu, bạn có thể sử dụng thao tác cuộn thị sai để đạt được trải nghiệm người dùng đặc biệt. Dưới đây là một số ý tưởng cho trang web, nơi bạn có thể bao gồm thao tác cuộn thị sai.
Dòng thời gian của trang web
Những loại trang web này thường có một câu chuyện để kể về một sản phẩm hoặc công ty hoặc bất cứ điều gì khác. Bạn có thể tạo hiệu ứng thị sai để giới thiệu câu chuyện cho khách truy cập và thu hút họ bằng các hoạt ảnh khác nhau.
Đối với một trang dòng thời gian, việc tạo nền và hiển thị nội dung văn bản ở nền trước sẽ rất đáng giá. Bạn có thể hợp tác với một nhà thiết kế đồ họa để tạo ra đồ họa song hành với nền.
Trang web ứng dụng di động
Ngày nay, ứng dụng dành cho thiết bị di động là thứ bắt buộc phải có đối với bất kỳ sản phẩm / dịch vụ nào. Có rất nhiều công ty khởi nghiệp đang tìm cách tạo trang web ứng dụng dành cho thiết bị di động cung cấp lời giải thích về những gì ứng dụng di động có thể làm và không thể làm.
App Store của Apple, nổi tiếng với việc tạo ứng dụng theo nguyên tắc nghiêm ngặt, yêu cầu ứng dụng di động phải có trang web hỗ trợ. Trang web này sẽ luôn cần phải hấp dẫn và thân thiện với người dùng.
Sử dụng chức năng cuộn Parallax, bạn có thể sử dụng hình ảnh di động và hiển thị các loại chức năng khác nhau khi người dùng cuộn xuống trang. Một ví dụ như vậy đã được thảo luận trong Chương 4 của hướng dẫn này.
Hiệu ứng di chuột qua
Bạn có thể sử dụng sức mạnh của thao tác cuộn thị sai và di chuột qua để tạo ra cấp độ hoạt ảnh tiếp theo. Khi di chuột qua, bạn có thể kiểm soát hướng cuộn và tạo hiệu ứng thị sai.
Theo cách này, có nhiều khả năng khi tạo ra một trải nghiệm tuyệt vời. Tất cả những gì bạn cần là một ý tưởng và một bộ công cụ và thư viện phù hợp.
Tương lai của giao diện người dùng web
Với sức mạnh của công nghệ và các yếu tố sáng tạo như cuộn thị sai, có một cuộc cạnh tranh chưa từng có để tạo ra trải nghiệm người dùng tuyệt vời. Điều này không chỉ giới hạn ở các trang web mà nó còn được mở rộng sang các trang web dành cho thiết bị di động.
Mặc dù giao diện người dùng Web hiện đang ở thời kỳ đỉnh cao, nhưng việc có một trang web tương thích với thiết bị di động là nhu cầu của thời gian. Như chúng ta đã thấy trong các ví dụ cho Bootstrap và jQuery, trang web không thể tồn tại lâu dài nếu chúng không được hỗ trợ trên các thiết bị cầm tay.
Cùng với các thư viện hiện có, tương lai của trải nghiệm người dùng cũng háo hức trông đợi vào Trí tuệ nhân tạo và thực tế ảo. Có một số trang web có thể xem được bằng thiết bị VR. Trong tình huống như vậy, việc giữ liên lạc với các plugin mới nhất và tìm cách tạo plugin mới thực sự có ý nghĩa.
Bạn áp dụng kiến thức có được trong hướng dẫn này để tạo ra trải nghiệm người dùng tốt nhất, tôi chúc bạn gặp nhiều may mắn và thành công trong hành trình phát triển web của mình!