CÁCH ĐƠN GIẢN NHẤT THIẾT KẾ SINGLE PAGE WEBSITE

chat zalo

CÁCH ĐƠN GIẢN NHẤT THIẾT KẾ SINGLE PAGE WEBSITE

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

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

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

id="fullpage">     class="section">Some section

     class="section">Some section
     class="section">Some section
     class="section">Some section

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:

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

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

id="fullpage">                    class="section active" id="section0">                                       

Single Page Demo

                                                                     src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />                   
                    class="section" id="section1">                         class="slide active">                                                             class="intro">                                                                                

Create Sliders

                                                                                

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.

                                                                                                                            
                                                                 class="slide">                                                             class="intro">                                                                                 src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />                                                                                

Simple

                                                                                

Easy to use. Configurable and customizable.

                                                                                                                              class="slide">                                                             class="intro">                                                                                 src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />                                                                                

Cool

                                                                                

It just looks cool. Impress everybody with a simple and modern web design!

                                                                                                                              class="slide">                                                             class="intro">                                                                                 src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />                                                                                

Compatible

                                                                                

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!

                                                                                                                                             class="section" id="section2">                                        class="intro">                                                            

Easy to use plugin

                                                            

HTML markup example to define 4 sections.

                                                             src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />                                                           

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

Nguồn: Internet

thiết kế logo chữ lồng vào nhau

Ngày nay nhiều doanh nghiệp, công ty, của hàng, thương hiệu chú trọng xây dựng nhận diện thương hiệu ngay từ khi khởi nghiệp.
Tại sao nhận dạng thương hiệu quan trọng như vậy?
Bởi nhận dạng thương hiệu giúp khách hàng nhận biết bạn, thấy được sự đầu tư chuyên nghiệp, hoạt động chuyên nghiệp từ đó xây dựng uy tín thương hiệu giúp doanh nghiệp, thương hiệu phát triển thuận lợi hơn.
Bắt đầu xây dựng nhận diện như thế nào?
Thiết kế logo thương hiệu là bước đầu tiên Quý khách cần đầu tư, từ logo dần dần phát triển các hạng mục thương hiệu khác để hoàn thiện nhận diện thương hiệu.

QC


Dịch vụ sửa chữa hệ thống điện khu công nghiệp Bàu Bàng - Bình Phước

Tin liên quan

Bé mèo tự tắm dưới vòi nước dễ thương

50 Banner, thiệp chúc mừng ngày phụ nữ Việt Nam 20-10 đẹp ý nghĩa nhiều màu sắc, miễn phí

Danh sách công ty thành lập mới nhất

Banner, thiệp chúc mừng năm mới Quý Mão 2023 mới nhất

Banner thiệp chúc mừng năm mới 2023

Quy trình thiết kế hoàn thiện logo thương hiệu

Công cụ tạo thực đơn online miễn phí, tạo bill miễn phí, tạo đơn hàng miễn phí, tạo catalog miễn phí

+100 Banner, thiệp chúc mừng năm mới năm 2022 năm Nhâm Dần

+100 Banner, thiệp chúc mừng năm mới năm 2022 năm Nhâm Dần

Giới thiệu ứng dụng tạo thực đơn, tạo bill, tạo catalog online

Chuyên thiết kế website văn phòng phẩm, nhà sách

100 Banner, thiệp chúc mừng năm mới năm canh tý 2020


=>>Danh thiếp mẫu
=>>Website mẫu
=>>Báo giá
Click chat Zalo
Hotline: 090.38.555.08
Yêu cầu báo giá
Ếch giống Máy ấp trứng gà vịt Xưởng sản xuất hộp giấy Danh sách công ty mới thành lập Nhôm kính Củ Chi