Hiệu ứng Chuyển Trang (Page Transitions) Cực Sexy Với CSS3

Hiệu ứng chuyển trang (Page Transitions) cực sexy với CSS3 19/03/2015 webmaster

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.

Xem Demo | 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.

Chúc các bạn thành công !

Tags: css3 Page Transitions single page

Chuyên Mục: Css

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !

Chia sẻ cho bạn bè

Tweet

Cùng Danh Mục

• Đơn giản mẫu Social-Tooltip bằng CSS3
• Tạo 3D Animating Sidebar với CSS3
• Nhỏ gọn với mẫu giỏ hàng có hiệu ứng tooltip bằng CSS3
• Responsive shopping cart với CSS3 và jQuery
• Hiệu ứng ẩn hiện giỏ hàng cực đơn giản với CSS3
• Tự tay tạo logo Gmail với CSS3
• Từng bước tạo nút bấm mạng xã hội bằng CSS3
• Tạo Dropdown Menu với menu đa cấp bằng CSS3
• Tạo File Icon với CSS3
• Thiết kế Logo Windows với chỉ HTML và CSS3