Hướng dẫn tạo trang web với hiệu ứng Parallax

08/08/2014
2489
0

Parallax đang là một xu hướng thiết kế web nổi bật, dễ dàng thu hút sự chú ý của người dùng

Trong hướng dẫn này, chúng ta sẽ tạo một slideshow với một hiệu ứng parallax bằng sự giúp đỡ của một số thuộc tính CSS3. Chúng tôi sẽ sử dụng radio buttons và sibling combinators để kiểm soát việc hiển thị của sideshow. Sẽ có hai hình nền và ý tưởng ở đây là để thay đổi vị trí của hình nền với các chuyển động để tạo ra một hiệu ứng thị sai nhẹ.

>>Xem thêm: Thiết kế Parallax là gì?

MARKUP

Chúng ta sẽ "kết nối" các input element với các lớp sp-content bằng cách sử dụng sibling combinator. Khi chúng ta click vào một input, vị trí của nó và cũng là vị trí của div sp-parallax-bg sẽ chuyển động. Slide tương ứng sẽ được hiển thị bằng cách di chuyển sp-slider đến đúng vị trí. Code sẽ trông như sau:

<div class="sp-slideshow">

    <input id="button-1" type="radio" name="radio-set" class="sp-se-lector-1" checked="checked" />
    <label for="button-1" class="button-label-1"></label>

    <input id="button-2" type="radio" name="radio-set" class="sp-se-lector-2" />
    <label for="button-2" class="button-label-2"></label>

    <input id="button-3" type="radio" name="radio-set" class="sp-se-lector-3" />
    <label for="button-3" class="button-label-3"></label>

    <input id="button-4" type="radio" name="radio-set" class="sp-se-lector-4" />
    <label for="button-4" class="button-label-4"></label>

    <input id="button-5" type="radio" name="radio-set" class="sp-se-lector-5" />
    <label for="button-5" class="button-label-5"></label>

    <label for="button-1" class="sp-arrow sp-a1"></label>
    <label for="button-2" class="sp-arrow sp-a2"></label>
    <label for="button-3" class="sp-arrow sp-a3"></label>
    <label for="button-4" class="sp-arrow sp-a4"></label>
    <label for="button-5" class="sp-arrow sp-a5"></label>

    <div class="sp-content">
        <div class="sp-parallax-bg"></div>
        <ul class="sp-slider clearfix">
            <li><img src="images/image1.png" alt="image01" /></li>
            <li><img src="images/image2.png" alt="image02" /></li>
            <li><img src="images/image3.png" alt="image03" /></li>
            <li><img src="images/image4.png" alt="image04" /></li>
            <li><img src="images/image5.png" alt="image05" /></li>
        </ul>
    </div>

</div>

List elements ở đây đồng thời cũng là wrappers cho mỗi slide, mặc dù chúng ta chỉ đang sử dụng hình ảnh nhưng bạn có thể sử dụng bất kì loại nội dung nào.

CSS

Chúng tôi sẽ thiết lập chiều rộng của các container bằng 80% và chiều rộng của các class sp-content và class sp-parallax-bg là 100%. Div sp_content sẽ có màu nền và hình nền mà chúng ta sẽ di chuyển nó bất cứ khi nào thanh trượt được sử dụng. Sp-parallax-bg div cũng tương tự như hình nền và chúng ta cũng sẽ di chuyển vị trí nền:

.sp-slideshow {
    position: relative;
    margin: 10px auto;
    width: 80%;
    max-width: 1000px;
    min-width: 260px;
    height: 460px;
    border: 10px solid #fff;
    border: 10px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.sp-content {
    background: #7d7f72 url(../images/grid.png) repeat scroll 0 0;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sp-parallax-bg {
    background: url(../images/map.png) repeat-x scroll 0 0;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

Style của inputs và labels:

.sp-slideshow input {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 9px;
    height: 9px;
    z-index: 1001;
    cursor: pointer;
    opacity: 0;
}

.sp-slideshow input + label {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 6px;
    height: 6px;
    display: block;
    z-index: 1000;
    border: 3px solid #fff;
    border: 3px solid rgba(255,255,255,0.9);
    border-radius: 50%;
    transition: background-color linear 0.1s;
}
.sp-slideshow input:checked + label {
    background-color: #fff;
    background-color: rgba(255,255,255,0.9);
}

.sp-se-lector-1, .button-label-1 {
    margin-left: -36px;
}

.sp-se-lector-2, .button-label-2 {
    margin-left: -18px;
}

.sp-se-lector-4, .button-label-4 {
    margin-left: 18px;
}

.sp-se-lector-5, .button-label-5 {
    margin-left: 36px;
}

Chúng tôi cũng đã thiết lập độ trong suốt của các input là 0 để người dùng không nhìn thấy chúng. Các nhãn sẽ nằm dưới radio buttons và chúng tôi sẽ làm cho nó trông giống như một vòng tròn nhỏ. Tất cả các input và labels sẽ được đặt vị trí tuyệt đối và chúng tôi sẽ đặt chúng cạnh nhau bằng cách áp dụng lề trái.

Tiếp theo, chúng ta sẽ đặt style cho các mũi tên mà đơn giản chỉ là các nhãn tương ứng với các thuộc tính. Lưu ý, việc click vào một label có thể sẽ không hoạt động trên các trình duyệt di động. Nhưng dù sao, bạn vẫn có thể điều hướng bằng việc sử dụng dấu chấm vì chúng ta đang thực sự nhấp chuột vào các input:

.sp-arrow {
    position: absolute;
    top: 50%;
    width: 28px;
    height: 38px;
    margin-top: -19px;
    display: none;
    opacity: 0.8;
    cursor: pointer;
    z-index: 1000;
    background: transparent url(../images/arrows.png) no-repeat;
    transition: opacity linear 0.3s;
}
.sp-arrow:hover{
    opacity: 1;
}
.sp-arrow:active{
    margin-top: -18px;
}

Bây giờ chúng ta hãy xác định nơi mà mũi tên được hiển thị. Trên slide đầu tiên chúng ta sẽ không hiển thị mũi tên bên trái và ở slide cuối cùng chúng ta sẽ không hiển thị mũi tên bên phải:

.sp-se-lector-1:checked ~ .sp-arrow.sp-a2,
.sp-se-lector-2:checked ~ .sp-arrow.sp-a3,
.sp-se-lector-3:checked ~ .sp-arrow.sp-a4,
.sp-se-lector-4:checked ~ .sp-arrow.sp-a5 {
    right: 15px;
    display: block;
    background-position: top right;
}
.sp-se-lector-2:checked ~ .sp-arrow.sp-a1,
.sp-se-lector-3:checked ~ .sp-arrow.sp-a2,
.sp-se-lector-4:checked ~ .sp-arrow.sp-a3,
.sp-se-lector-5:checked ~ .sp-arrow.sp-a4 {
    left: 15px;
    display: block;
    background-position: top left;
}

Khi một input được chọn, div sp-content sẽ có một quá trình chuyển đối cho vị trí và màu nền. Việc chuyển đổi lần thứ hai sẽ lâu hơn một chút:

.sp-slideshow input:checked ~ .sp-content {
transition: background-position linear 0.6s, background-color linear 0.8s;
}

Div với world map(sp-parallax-bg) cũng sẽ có một quá trình chuển đổi cho vị trí nền:

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
transition: background-position linear 0.7s;
}

Bằng cách này chúng ta có thể thêm vào hiệu ứng parallax.

Hãy xác định những thay đổi trong màu sắc và vị trí nền cho div sp-content:

input.sp-se-lector-1:checked ~ .sp-content {
    background-position: 0 0;
    background-color: #727b7f;
}

input.sp-se-lector-2:checked ~ .sp-content {
    background-position: -100px 0;
    background-color: #7f7276;
}

input.sp-se-lector-3:checked ~ .sp-content {
    background-position: -200px 0;
    background-color: #737f72;
}

input.sp-se-lector-4:checked ~ .sp-content {
    background-position: -300px 0;
    background-color: #79727f;
}

input.sp-se-lector-5:checked ~ .sp-content {
    background-position: -400px 0;
    background-color: #7d7f72;
}

...và div sp-parallax-bg:

input.sp-se-lector-1:checked ~ .sp-content .sp-parallax-bg {
    background-position: 0 0;
}

input.sp-se-lector-2:checked ~ .sp-content .sp-parallax-bg {
    background-position: -200px 0;
}

input.sp-se-lector-3:checked ~ .sp-content .sp-parallax-bg {
    background-position: -400px 0;
}

input.sp-se-lector-4:checked ~ .sp-content .sp-parallax-bg {
    background-position: -600px 0;
}

input.sp-se-lector-5:checked ~ .sp-content .sp-parallax-bg {
    background-position: -800px 0;
}

Một danh sách không có thứ tự với các lớp sp-slider sẽ có chiều rộng là 500%. Điều này là do chúng ta có tới 5 slide. Sẽ có một quá trình chuyển cho các giá trị bên trái, nơi mà chúng ta sẽ thay đổi depening trên input được chọn:

.sp-slider {
    position: relative;
    left: 0;
    width: 500%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: left ease-in 0.8s;
}

Mỗi phần tử trong danh sách là một slide và nó cũng sẽ có một quá trình chuyển đổi độ mờ. Chúng ta sẽ cung cấp cho cả slide và hình ảnh bên trong kích thước của border-box. Điều này sẽ cho phép chúng ta thiết lập một padding sử dụng 100% giá trị cho chiều cao và độ rộng cũng như không còn phải lo lắng về vấn đề tràn div:

.sp-slider > li {
    color: #fff;
    width: 20%;
    box-sizing: border-box;
    height: 100%;
    padding: 0 60px;
    float: left;
    text-align: center;
    opacity: 0.4;
    transition: opacity ease-in 0.4s 0.8s;
}
.sp-slider > li img{
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    padding: 40px 0 50px 0;
    max-height: 100%;
    max-width: 100%;
}

Giờ chúng ta cần thiết lập giá trị đúng cho mỗi slide được chọn:

input.sp-se-lector-1:checked ~ .sp-content .sp-slider {
    left: 0;
}

input.sp-se-lector-2:checked ~ .sp-content .sp-slider {
    left: -100%;
}

input.sp-se-lector-3:checked ~ .sp-content .sp-slider {
    left: -200%;
}

input.sp-se-lector-4:checked ~ .sp-content .sp-slider {
    left: -300%;
}

input.sp-se-lector-5:checked ~ .sp-content .sp-slider {
    left: -400%;
}

Mỗi slide sau đó sẽ có độ mờ là 1:

input.sp-se-lector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-se-lector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-se-lector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-se-lector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-se-lector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){
opacity: 1;
}

Kết quả của chúng ta:

responsive demo 1

Các bạn có thể xem chi tiết hơn tại đây

Bài viết liên quan: 6 xu hướng thiết kế web lên ngôi năm 2014

Ý kiến bạn đọc

Bạn cần trở thành thành viên của nhóm để có thể bình luận bài viết này. Nhấn vào đây để đăng ký làm thành viên nhóm!

Hướng dẫn tạo trang web với hiệu ứng Parallax

Bài viết liên quan

Đăng nhập Đăng ký