Thiết kế HTML template với style One-Pager

Dạo trước, tôi rất thích kiểu giao diện được thiết kế theo phong cách One-Pager ( tức là tất cả nội dung website đều chứa trong 1 trang index ) , tôi có xem qua một số website được thiết kế theo phong cách này , đa số họ sử dụng JavaScript cho hiệu ứng chuyển trang , điển hình là Jquery ScrollTo .

Hôm nay , tôi sẽ thiết kế một HTML template theo phong cách One-Pager, nhưng thay vì sử dụng javascript , tôi sẽ sử dụng CSS3 - Transition để làm hiệu ứng chuyển trang .

Download

Các bạn lưu ý CSS3 do ra đời sau IE8 nên nó không được hỗ trợ trên IE8 trở xuống nhé !


HTML

Bây giờ , tôi sẽ viết một trang HTML có năm thẻ div chứa nội dung chính :

- Bốn thẻ : #home , #porfolio, #about ,#contact , chứa các nội dung riêng thông qua thẻ div class content bên trong . Tôi thêm class panel vào các thẻ div này, dùng để tạo hiệu ứng chuyển trang , riêng #home là mặc định nên không cần

HTML Code:

<!-- Home -->
<div id="home" class="content">
<h2>Home</h2>
<p>Some content</p>
<!-- ... -->
</div>
<!-- /Home -->

<!-- Portfolio -->
<div id="portfolio" class="panel">
<div class="content">
<h2>Portfolio</h2>
<p>Some content</p>
<!-- ... -->
</div>
</div>
<!-- /Portfolio -->

<!-- About -->
<div id="about" class="panel">
<div class="content">
<h2>About</h2>
<p>Some content</p>
<!-- ... -->
</div>
</div>
<!-- /About -->

<!-- Contact -->
<div id="contact" class="panel">
<div class="content">
<h2>Contact</h2>
<p>Some content</p>
<!-- ... -->
</div>
</div>
<!-- /Contact -->

Và thẻ #header : chứa nội dung tiêu đề và một list menu

HTML Code:

 <!-- Header with Navigation -->
<div id="header">
<h1>Page Transitions with CSS3</h1>
<ul id="navigation">
<li><a id="link-home" href="#home">Home</a></li>
<li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
<li><a id="link-about" href="#about">About Me</a></li>
<li><a id="link-contact" href="#contact">Contact</a></li>
</ul>
</div>

Lý do tôi đặt #header ở dưới cùng là vì tôi muốn sử dụng thuộc tính mới của CSS3 " The general sibling selector (~) " để lấy màu cho menu item được chọn

Ý tưởng chính là sử dụng Pseudo-class :target để tạo hiệu ứng chuyển trang. Trong ví dụ này, ta sẽ có hiệu ứng trang trượt lên rồi trượt xuống

CSS

Đầu tiên , tôi sẽ css style cho #header và #navigation và cho chúng luôn giữ nguyên vị trí tại một điểm đã chọn

Code:

#header{
position: absolute;
z-index: 2000;
width: 235px;
top: 50px;
}
#header h1{
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
padding: 20px;
background: #000;
}
#navigation {
margin-top: 20px;
width: 235px;
display:block;
list-style:none;
z-index:3;
}
#navigation a{
color: #444;
display: block;
background: #fff;
background: rgba(255,255,255,0.9);
line-height: 50px;
padding: 0px 20px;
text-transform: uppercase;
margin-bottom: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
font-size: 14px;
}
#navigation a:hover {
background: #ddd;
}

Những div có class panel , tôi sẽ css margin-top -150% cho chúng , và margin-top 0 cho Pseudo-class: target . Như vậy tất cả đều nằm trên Top , ngoại trừ thẻ div được chọn

Code:

.panel{
    min-width: 100%;
    height: 98%;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: -150%;
    position: absolute;
    background: #000;
    box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
    z-index: 2;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}
.panel:target{
    margin-top: 0%;
    background-color: #ffcb00;
}

Tiếp theo , tôi css class content và các thẻ con của nó

Code:

.content{
    right: 40px;
    left: 280px;
    top: 0px;
    position: absolute;
    padding-bottom: 30px;
}
.content h2{
    font-size: 110px;
    padding: 10px 0px 20px 0px;
    margin-top: 52px;
    color: #fff;
    color: rgba(255,255,255,0.9);
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
    font-size: 18px;
    padding: 10px;
    line-height: 24px;
    color: #fff;
    display: inline-block;
    background: black;
    padding: 10px;
    margin: 3px 0px;
}

Để thay đổi màu của #navigation item được chọn . Tôi sử dụng Pseudo-class:target cùng " The general sibling selector (~) " cho item đó

Code:

#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
    background: #000;
    color: #fff;
}

Hi vọng bài viết này sẽ có ích cho bạn !