[Web Design] Kỹ thuật Parallax Scrolling – Phần 1 [NEW]

Với sự phát triển như vũ bão của các công nghệ web như HTML5, CSS3, Javascript và bên cạnh đó là sự sáng tạo không giới hạn của các Web Designer, việc tạo ra những trải nghiệm mới và làm cho website trở nên sinh động hơn là điều không còn nữa. khó nữa.

Hôm nay mình xin giới thiệu một kỹ thuật đã ra đời từ năm 2011 (khá lâu), đó là “Di chuyển thị sai”.

Kỹ năng Di chuyển thị sai Được chứ Ian Coyle được tạo và áp dụng lần đầu tiên cho trang web Nike Better World 2011 và cho đến ngày nay vẫn đang được sử dụng rộng rãi cho nhiều trang web trên thế giới.

[Web Design] Kỹ thuật Parallax Scrolling – Phần 1 [NEW]

“Thị sai” là một từ thường được sử dụng trong trò chơi điện tử 2D, sử dụng nhiều hình nền và sau đó di chuyển chúng đồng thời với tốc độ khác nhau, tạo ra ảo giác về chiều sâu khi xem. Đối với Thiết kế web, thao tác cuộn thị sai được sử dụng để tạo hiệu ứng 3 chiều với các phần tử liên tục thay đổi vị trí khi người dùng cuộn. Sau đây sẽ là hướng dẫn tạo hiệu ứng cuộn thị sai đơn giản.

Bắt đầu từ HTML / CSS

Đầu tiên chúng ta tạo các thư mục như hình dưới đây:

parallax-scrolling-chuanbihtml

Tôi có các thư mục css, img, js và 1 tệp index.htmltrong đó:

  • css sẽ chứa 2 tệp bao gồm normalize.css dùng để đặt lại CSS và main.css sẽ là phần biểu định kiểu chính.

  • img sẽ chứa ảnh nền mà chúng ta cần sử dụng.

  • js sẽ chứa 2 tệp bao gồm jquery.min.jsparallax.js được sử dụng để tạo hiệu ứng thị sai.

Đối với các tập tin index.htmlchúng tôi chỉ thực hiện công việc đơn giản là tạo 1 thẻ div có lớp học .bg cho hình nền và 1 thẻ div có lớp học .content trong đó có các bài báo mẫu. Đừng quên kèm theo 2 tệp normalize.cssjquery.min.js.

[html]

Thị sai cuộn cơ bản

Điều 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud tập thể dục ullamco labris nisi ut aliquip ex ea Goodsoequat. Duis aute irure dolor in repmblenderit in voluptate velit esse cillum dolore eu fugiat nulla pariesur. Excepteur sint occaecat cupidatat non proident, sunt trong cây tùng la hán.


[/html]

Sau khi hoàn thành phần HTML, chúng ta chuyển sang phần trang trí CSS. Trong main.css Chúng tôi có mã sau:

[code lang=”css”]

/ * Kiểu nền * /
.bg {
background: url (‘../ img / Skulls.png’) lặp lại trên cùng bên trái;
vị trí: cố định;
chiều cao: 2000px;
chiều rộng: 100%;
đầu: 0;
z-index: -1; / * Sử dụng z-index để đặt lớp bg dưới các phần tử khác * /
}
/ * Kiểu nội dung * /
.Nội dung {
màu: # 888;
text-align: center;
margin: 0 auto;
chiều rộng: 960px;
chức vụ: thân nhân;
}
.content h1 {
màu: # e74c3c;
cỡ chữ: 2,5em;
}
/ * Phong cách bài viết * /
.content bài viết {
nền: # f4f4f4;
viền: 2px solid # 2c3e50;
margin: 30px tự động;
đệm: 20px;
độ mờ: 0,9;
text-align: left;
}
[/code]

Sau khi hoàn thành các phần cơ bản trên, trước khi đến phần tạo Parallax Scrolling, chúng ta cùng thử xem thành quả nhé.

thị sai-cuộn-coban

Khá gọn gàng và dễ nhìn phải không nào 🙂

Parallax Scrolling – Let’s Rock

Bây giờ bạn có thể tạo hiệu ứng cuộn thị sai bằng tệp javascript parallax.js mà tôi đã nói ở phần đầu.

Trước khi bắt đầu, chúng ta nên hiểu một vài điều.

Đầu tiên, đối với những bạn chưa biết jquery, tôi khuyên các bạn nên xem qua Jquery Basic – Michael Nguyen. Và cũng nên biết công dụng của hàm scrollTop trong jquery – hiểu đơn giản là nó sẽ lấy vị trí dọc hiện tại của thanh cuộn của các phần tử gọi nó.

Di chuyển thị sai sẽ tiếp tục thay đổi số liệu thống kê top của nền khi chúng ta cuộn lên và xuống. Bạn có thể sử dụng chức năng Kiểm tra nguyên tố trình duyệt để theo dõi điều này.

parallax-scrolling-firebug

Công việc của chúng tôi là sử dụng jquery để bind sự kiện cuộn chuột của người dùng và thông qua sự kiện đó để cập nhật chỉ mục hàng đầu của nền, nói chính xác hơn là lớp bg. Chỉ số này sẽ thay đổi theo tỷ lệ mà chúng tôi chỉ định.

Những gì chúng ta muốn thấy ở đây là khi chúng ta cuộn xuống, nền sẽ di chuyển lên trên và ngược lại khi chúng ta cuộn lên. Vì vậy, điều đó có nghĩa là tham số khi chúng ta cuộn chuột (scrollPos) sẽ luôn ngược lại với chỉ mục top của nền. Chúng tôi có công thức sau:

background-top-position =  0 - scroll-bar-position

Công thức trên có thể được thay đổi dựa trên tốc độ chúng ta muốn xem nền chuyển động:

background-top-position =  0 - (speed * scroll-bar-position)

Chúng tôi có mã sau:

[code lang=”javascript”]

$ (tài liệu) .ready (function () {
$ (window) .bind (“scroll”, function () {
thị sai ();
});
});
// Hàm tạo hiệu ứng thị sai
// tốc độ được chỉ định bởi tốc độ thay đổi – điều này có thể được thay đổi theo ý muốn
// scrollPos lấy vị trí hiện tại của thanh cuộn
hàm thị sai () {
var scrollPos = $ (window) .scrollTop (),
tốc độ = 0,2;
$ (“. bg”). css (“top”, (0 – (scrollPos * speed)) + ‘px’);
}
[/code]

Sau khi thực hiện xong, bạn hãy F5 lại xem kết quả có được như mong muốn không?

Phần kết

Vậy là chúng ta đã bắt đầu làm quen với một kỹ thuật rất thú vị trong thiết kế Web. Và trong phần tiếp theo, mình sẽ thực hiện thao tác cuộn thị sai với nhiều loại yếu tố, chẳng hạn như hình ảnh hoặc văn bản ở các tốc độ cuộn khác nhau để mang lại hiệu ứng bắt mắt hơn.

Tôi cũng hy vọng rằng qua bài viết này sẽ có ai đó quan tâm đến việc tìm hiểu các kỹ thuật thiết kế Web. Còn rất nhiều điều rất thú vị đến từ công việc thiết kế Web cần được bạn khám phá.

Trước khi chào tạm biệt, tôi gửi đến bạn trang web boy-coy.com. Tôi yêu nó rồi!

Đây là mã nguồn của bài hướng dẫn: D

Mã nguồn

Đánh giá nội dung này