Vài năm gần đây, chúng ta thấy có rất nhiều mẫu thiết kế web với phong cách single page, tức là các trang sẽ được hiển thị trên cùng một trang, không hề chuyển sang trang mới cùng với hiệu ứng chuyển trang rất ấn tượng. Và hầu như là tất cả những trang này đều dùng JavaScript để tạo hiệu ứng. Hôm nay, mình sẽ chia sẻ cho các bạn cách tạo hiệu ứng để dùng cho những thiết kế theo kiểu single page, nhưng không phải bằng JavaScript mà là bằng CSS3.
Download
HTML
Khung chuẩn html sẽ được chia làm 5 phần : header và 4 phần nội dung. Mỗi nội dung sẽ được chia cắt bởi một id và class .
<!-- 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 -->
Trong phần header, chúng ta sẽ chèn menu để điều hướng trang web.
<!-- 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>
Các bạn để ý đoạn html bên trên sẽ thấy mỗi menu sẽ được link theo tên id của từng phần mà người dùng muốn click tới.
CSS
Đầu tiên, chúng ta sẽ định dạng và thiết kế cho phần menu. Chúng ta sẽ cần giữ menu cố định cho dù bất kì trang nào được chuyển đi chăng nữa.
#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;
}
Các bạn dùng đoạn css sau để tạo hiệu ứng chuyển trang :
.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;
}
Kế tiếp là định dạng nội dung cho từng phần.
.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;
}
Để có thể thay đổi màu của menu được click , chúng ta sẽ sử dụng :target pseudo-class cùng với kí tự ~ .
#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;
}
Đó là tất cả những gì mà chúng ta cần làm để có được một hiệu ứng chuyển trang trong các thiết kế theo kiểu single page. Mình mong là qua bài viết này, các bạn sẽ có thêm một lựa chọn cũng như kinh nghiệm trong việc học và tìm hiểu CSS3.