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

Với việc phát triển nhanh chóng của những công nghệ web như HTML5, CSS3, Javascript và bên cạnh đó là sức sáng tạo không giới hạn của các Web Designer, việc tạo ra các trải nghiệm mới lạ, khiến các website thêm sinh động không còn là chuyện khó nữa.

Hôm nay mình xin giới thiệu một kỹ thuật được ra đời từ năm 2011 (khá là lâu rồi), đó là “Parallax Scrolling”.

Kỹ thuật Parallax Scrolling được Ian Coyle tạo ra và áp dụng lần đầu tiên cho website Nike Better World 2011 và cho đến hôm nay vẫn còn đang được sử dụng rộng rãi cho nhiều website trên thế giới.

“Parallax” là từ thường được dùng trong video games 2D, sử dụng nhiều hình ảnh nền rồi cho chúng cùng lúc di chuyển song song với những tốc độ khác nhau, tạo ra ảo giác về chiều sâu khi nhìn vào. Đối với Web Design thì parallax scrolling được dùng để tạo hiệu ứng 3 chiều với các element liên tục thay đổi vị trí khi người dùng có thao tác cuộn chuột. Sau đây sẽ là hướng dẫn làm một hiệu ứng parallax scrolling đơ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 sau:

Ta có các thư mục css, img, js và 1 file index.html, trong đó:

• css sẽ chứa 2 file gồm normalize.css  được dùng để reset CSS và main.css sẽ là phần stylesheet chính.

• img sẽ chứa hình nền chúng ta cần sử dụng.

• js sẽ chứa 2 file gồm jquery.min.js và parallax.js dùng để tạo ra hiệu ứng parallax.

Đối với file index.html,chúng ta chỉ làm công việc đơn giản là tạo 1 thẻ div có class .bg để làm hình nền và 1 thẻ div có class .content trong đó chứa các article mẫu. Các bạn đừng quên include 2 file normalize.css và jquery.min.js.

<br />
    &lt;div class=&quot;bg&quot;&gt;&lt;/div&gt;<br />
    &lt;div class=&quot;content&quot;&gt;<br />
            &lt;h1&gt;Parallax Scrolling Cơ Bản&lt;/h1&gt;<br />
            &lt;article&gt;<br />
                    &lt;h2&gt;Article 01&lt;/h2&gt;<br />
                    &lt;p&gt;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 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.&lt;/p&gt;<br />
            &lt;/article&gt;<br />
            ... &lt;!-- Bao nhiêu article tuỳ ý --&gt;<br />
    &lt;/div&gt;  &lt;!-- end content --&gt;<br />

Sau khi hoàn thành phần HTML, chúng ta qua phần trang trí CSS. Trong main.css ta có đoạn code sau:

<br />
    /* Background style */<br />
    .bg {<br />
            background: url('../img/skulls.png') top left repeat;<br />
            position: fixed;<br />
            height: 2000px;<br />
            awidth: 100%;<br />
            top: 0;<br />
            z-index: -1; /* Dùng z-index để cho class bg nằm dưới cùng các element khác */<br />
    }<br />
    /* Content style */<br />
    .content {<br />
            color: #888;<br />
            text-align: center;<br />
            margin: 0 auto;<br />
            awidth: 960px;<br />
            position: relative;<br />
    }<br />
    .content h1 {<br />
            color: #e74c3c;<br />
            font-size: 2.5em;<br />
    }<br />
    /* Articles style */<br />
    .content article {<br />
            background: #f4f4f4;<br />
            border: 2px solid #2c3e50;<br />
            margin: 30px auto;<br />
            padding: 20px;<br />
            opacity: 0.9;<br />
            text-align: left;<br />
    }<br />

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

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