Cách đơn giản nhất để thiết kế Single Page Website

GIỚI THIỆU

Việc xây dựng single page website đòi hỏi óc sáng tạo và sự tỉ mẩn trong lập trình cũng như thiết kế. Rất may cho chúng ta, có một công cụ giúp cho việc xây dựng website theo xu hướng hiện đại Single Page trở nên dễ dàng hơn bao giờ hết, đó là thư viện fullPage.js. Đây là một plugin cho jQuery và hoạt động trên hầu hết các trình duyệt hiện đại, hỗ trợ cả các trình duyệt cũ như IE8, 9, Opera 12. Bài viết này mình sẽ hướng dẫn các bạn sử dụng fullPage.js trong việc thiết kế một single page website đơn giản nhưng hiện đại.

USAGE

1. Thêm file CSS & JS

<link rel='stylesheet' href='https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.min.js'></script>

2. Cấu trúc HTML

Mỗi "trang" của website sẽ được định nghĩa với lớp "section", trong các section này, bạn có thể tuỳ ý nội dung thông tin. Section đầu tiên mặc định sẽ là trang chủ của website

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

Trong demo của mình, mình đã lược bỏ nhiều chi tiết từ nhà phát triển để giúp các bạn tìm hiểu nhanh hơn, mình sẽ có một website có 4 trang (section) và một menu để điều hướng:

HTML cho menu:

<ul id="menu">
	<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
	<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
	<li data-menuanchor="3rdPage"><a href="#3rdPage">Third section</a></li>
	<li data-menuanchor="4thpage"><a href="#4thpage">Fourth section</a></li>
</ul>

HTML cho các "trang" (section):

<div id="fullpage">
	<div class="section active" id="section0">
		<h1>Single Page Demo</h1>		
		<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
	</div>
	<div class="section" id="section1">
	    <div class="slide active">
			<div class="intro">
				<h1>Create Sliders</h1>
				<p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>				
			</div>
		</div>
	    <div class="slide">
			<div class="intro">
				<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
				<h1>Simple</h1>
				<p>Easy to use. Configurable and customizable.</p>
			</div>
		</div>
	    <div class="slide">
			<div class="intro">
				<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
				<h1>Cool</h1>
				<p>It just looks cool. Impress everybody with a simple and modern web design!</p>
			</div>
		</div>
	    <div class="slide">
			<div class="intro">
				<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
				<h1>Compatible</h1>
				<p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
			</div>
		</div>
	</div>
	<div class="section" id="section2">
		<div class="intro">
			<h1>Easy to use plugin</h1>
			<p>HTML markup example to define 4 sections.</p>
			<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
		</div>
	</div>

3. Các bạn gọi hàm khởi tạo

$(document).ready(function() {
	$('#fullpage').fullpage({
		sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
		anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
		menu: '#menu',
		css3: true
	});
});

DEMO

See the Pen Single page with fullPage.js by Thanh Nguyen (@genievn) on CodePen.

Recent Post