Bắt Đầu Từ HTML/CSS

Đầu tiên chúng ta tạo các thư mục như hình sau:
parallax-scrolling-chuanbihtml
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.
1
2
3
4
5
6
7
8
9
<div class="bg"></div>
<div class="content">
        <h1>Parallax Scrolling Cơ Bản</h1>
        <article>
                <h2>Article 01</h2>
                <p>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.</p>
        </article>
        ... <!-- Bao nhiêu article tuỳ ý -->
</div>  <!-- end content -->
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:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* Background style */
.bg {
        background: url('../img/skulls.png') top left repeat;
        position: fixed;
        height: 2000px;
        width: 100%;
        top: 0;
        z-index: -1; /* Dùng z-index để cho class bg nằm dưới cùng các element khác */
}
/* Content style */
.content {
        color: #888;
        text-align: center;
        margin: 0 auto;
        width: 960px;
        position: relative;
}
.content h1 {
        color: #e74c3c;
        font-size: 2.5em;
}
/* Articles style */
.content article {
        background: #f4f4f4;
        border: 2px solid #2c3e50;
        margin: 30px auto;
        padding: 20px;
        opacity: 0.9;
        text-align: left;
}
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ả.
parallax-scrolling-coban

Parallax Scrolling – Let’s Rock

Bây giờ bạn đã có thể tạo hiệu ứng parallax scrolling với file javascript parallax.js mà mình đã nói lúc đầu.
Trước khi bắt đầu chúng ta nên hiểu một vài điều.Đầu tiên là đối với các bạn chưa biết về jquery thì mình khuyên các bạn nên xem qua Jquery căn bản. 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í hiện tại theo chiều dọc của thanh cuộn của các thành phần gọi nó.Parallax scrolling sẽ liên tục thay đổi chỉ số top của background khi chúng ta cuộn chuột lên xuống. Các bạn có thể sử dụng chức năng Inspect Element của trình duyệt để theo dõi điều này.
parallax-scrolling-firebug
Việc của chúng ta là sẽ sử dụng jquery để bind sự kiện scroll chuột của người dùng và thông qua sự kiện đó để cập nhật lại chỉ số top của background, chính xác hơn là class bg. Chỉ số này sẽ thay đổi theo tốc độ mà chúng ta quy định.
Điều mà chúng ta muốn thấy ở đây là khi ta cuộn chuột xuống, background sẽ di chuyển theo hướng lên trên và ngược lại với lúc ta cuộn chuột lên. Vậy nghĩa là thông số khi ta cuộn chuột (scrollPos) sẽ luôn luôn đối ngược với chỉ số top của background. Ta có công thức sau:
background-top-position =  0 - scroll-bar-position
Công thức trên có thể đuợc thay đổi dựa vào tốc độ mà chúng ta muốn thấy ở background khi chuyển động:
background-top-position =  0 - (speed * scroll-bar-position)
Chúng ta có đoạn code sau:
01
02
03
04
05
06
07
08
09
10
11
12
13
$(document).ready(function() {
        $(window).bind("scroll", function() {
                parallax();
        });
});
// Function tạo parallax effect
// tốc độ được quy định bởi biến speed - cái này thay đổi theo ý muốn
// scrollPos lấy vị trí hiện tại của thanh cuộn
function parallax() {
        var scrollPos = $(window).scrollTop(),
                speed = 0.2;
        $(".bg").css("top", (0 - (scrollPos * speed)) + 'px');
}
Sau khi đã hoàn tất, các bạn hãy F5 lại một lần nữa để xem kết quả có như mong đợi không nào?