前言：

如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。

在学习过jQuery插件之后，才发现之前的很多网站特效完全可以借助jQuery插件来实现，今天我们来尝试使用move.js以及fullPage.js插件来制作一个“高端网站”。

网站效果展示如下：

 fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：

  • 支持鼠标滚动
  • 支持前进后退和键盘控制
  • 多个回调函数
  • 支持手机、平板触摸事件
  • 支持 CSS3 动画
  • 支持窗口缩放
  • 窗口缩放时自动调整
  • 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

Move.js是一款简单小巧的模拟CSS3动画的JS插件。它可以完成CSS3的各种动画效果：移动、变形、倾斜、背景色渐变、旋转等。并且可以在动画中使用各种easing效果。

首先，我们再h5中写出基本结构主体，代码如下：

<body>

        <div id="fullpage">

            <div class="section" id="section1">

                <h1>fullpage-演示iphone5C官网</h1>

                <img src="img/iphone1.jpg" />

            </div>

            <div class="section" id="section2">

                <img src="img/iphone2.png" class="img2" />

                <img src="img/iphone3.png" class="img3" />

                <img src="img/iphone4.png" class="img4" />

                <div class="description">

                    <h1>A powerful plugin</h1>

                    <strong>fullPage.js</strong>

                    <br /> callbacks allow you to create amazing dynamic sites with a bit of imagination. This example tries to reproduce the Apple iPhone-5c website animations as an example of what fullPage.js is capable of.

                </div>

            </div>

            <div class="section" id="section3">

                <img src="img/iphone-red.png" class="red" />

                <img src="img/iphone-yellow.png" class="yellow" />

                <img src="img/iphone-blue.png" class="blue" />

                <div class="description">

                    <h2>Amazing stuff</h2> Combining

                    <strong>fullPage.js</strong> with your own CSS styles and animations, you will be able to create something remarkable.

                </div>

            </div>

            <div class="section" id="section4">

                <div class="description">

                    <h2>Just a demo</h2>

                    This is, of course, just a demo. I didn't want to spend much time on it. Don't expect it to work perfectly in all kind of screens. It has been designed to work on 1180px width or over on modern browsers with CSS3.

                </div>

                <img src="img/iphone-green.png" class="green" />

                <img src="img/iphone-two.png" class="two" />

            </div>

        </div>

    </body>

tips: 

          在fullPage中，class为section表示一个屏幕。
            section不能执行包裹在body中，必须使用一个div包裹所有的section。
            section中的每一个slide表示一个横向幻灯片，可在当前屏中左右横向切换。

在CSS样式中，我们对各部分元素进行了定位和静态的页面布局设置，代码如下：

*{

    margin: 0px;

    padding: 0px;

}

#section1{

    background-color: #F0F2F4;

    overflow: hidden;

    text-align: center;

}

#fullPage{

    min-width: 1250px;

}

.section{

    min-height: 650px;

}

#section1 h1{

    font-size: 70px;

    text-align: center;

    margin: 60px 0px;

}

#section img{

     width: 45%;

}

#section2{

    position: relative;

    overflow: hidden;

}

#section2 .description{

    width: 370px;

    position: absolute;

    top: 200px;

    right: 130px;

    color: #808080;

    font-size: 18px;

    line-height: 35px;

}

#section2 .description h1{

    font-size: 36px;

    margin-bottom: 15px;

}

#section2 img{

    height: 685px;

    position: absolute;

    transform: scale(0.6);

    top: -17px;

}

#section2 .img3{

    z-index:;

}

#section3{

    position: relative;

    overflow: hidden;

}

#section3 .description{

    width: 500px;

    position: absolute;

    top: 200px;

    right: 130px;

    color: #808080;

    font-size: 18px;

    line-height: 35px;

}

#section3 .description h1{

    font-size: 36px;

    margin-bottom: 15px;

}

#section3 img{

    position: absolute;

}

#section3 .red{

    left: 250px;

    top: 150px;

}

#section3 .yellow{

    left: -40px;

    bottom: -400px;

}

#section3 .blue{

    bottom: -400px;

    left: 550px;

}

#section4{

    position: relative;

}

#section4 .green{

    position: absolute;

    left:250px;

    top: 200px;

}

#section4 .description{

    width: 90%;

    position: absolute;

    top: 100px;

    left: 5%;

    color: #808080;

    font-size: 14px;

    line-height: 25px;

    text-align: center;

}

#section4 .description h2{

    font-size: 36px;

    margin-bottom: 15px;

}

#section4 .two{

    position: absolute;

    bottom: -230px;

    left: 600px;

}

接下来便是导入需要的JS文件：

需要注意的地方是：fullPage.js必须在JQuery.js文件之后导入!而move.js使用的是原生JS语言，故没有要求。

在我们组建好网页布局之后，必须先选中包裹所有section的div的ID,并调用fullPage()方法，才能加载布局。

调用fullPage()方法之后，可以给函数传入对象类型的参数，设置fullPage的各种属性。

<script type="text/javascript">

        $(function() {

            $("#fullpage").fullpage({

                navigation: true,

                verticalCentered: false,

                anchors: ["page1", "page2", "page3", "page4"],

                onLeave: function(index, nextIndex, direction) {

                    switch(index) {

                        case 2:

                            move(".img2").x(0).duration(".7").delay(600).scale(0.8).end();

                            move(".img3").x(0).duration(".7").delay(600).scale(1).end()

                            move(".img4").x(0).duration(".7").delay(600).scale(0.8).end()

                            break;

                        case 3:

                        if(nextIndex!=4){

                            move(".red").y(0).duration("1").scale(1).end();

                            move(".yellow").y(0).duration("1").scale(0.8).end()

                            move(".blue").y(0).duration("1").scale(0.8).end()

                            break;

                            }

                        case 4:

                               move(".green").y(0).duration("0.7").scale(1).end()

                               move(".two").y(0).duration("0.7").scale(0.9).skewY(0).end()

                           break;

                    }

                    switch(nextIndex) {

                        case 2:

                            move(".img2").x(-35).duration(".7").delay(700).scale(0.8).end();

                            move(".img3").x(300).duration(".7").delay(700).scale(1).end()

                            move(".img4").x(700).duration(".7").delay(700).scale(0.8).end()

                            break;

                        case 3:

                            move(".red").y(-400).duration("1.2").scale(1).end();

                            move(".yellow").y(-400).duration("1.2").scale(0.8).end()

                            move(".blue").y(-400).duration("1.2").scale(0.8).end()

                            move(".green").y(-400).duration("1.2").scale(1).end()

                            move(".two").y(0).duration("0.7").scale(0.9).rotate(180).end()

                           break;

                    }

                }

            });

        });

    </script>

网站主题效果出来之后需要进行细致的调整，另外插件只是工具，提升自己能力的途径是尝试自己创作插件。

【干货】教你如何利用fullPage.js以及move.js插件打造高端大气的网站效果！的更多相关文章

  1. 教你如何利用threejs对3D模型皮肤进行DIY

    一步一步教你如何利用threejs加载gltf模型来实现DIY换肤功能. 模型准备 模型制作 模型可以通过网上下载,也可以自己通过c4d.maya.blender等模型制作软件得到.这里就不叙述有关模 ...

  2. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  3. 教你如何利用分布式的思想处理集群的参数配置信息——spring的configurer妙用

    引言 最近LZ的技术博文数量直线下降,实在是非常抱歉,之前LZ曾信誓旦旦的说一定要把<深入理解计算机系统>写完,现在看来,LZ似乎是在打自己脸了.尽管LZ内心一直没放弃,但从现状来看,需要 ...

  4. FullPage.js全屏滚动插件学习总结

    如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...

  5. 教你如何利用xml格式的sitemap文件做好SEO

    教你如何利用xml格式的sitemap文件做好SEO 浏览: | 更新:-- : 一般的网站中都有网站地图文件,它有HTML格式与XML格式,网站地图可以帮助搜索引擎抓取.帮助用户找到自己所需要的内容 ...

  6. 如何在我们项目中利用开源的图表（js chart）

            最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长!       这篇随笔主要为介绍chart在项目中的运用,因为在我们看到一些开源的chart时候,是使 ...

  7. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

  8. 【Python3爬虫】教你怎么利用免费代理搭建代理池

    一.写在前面 有时候你的爬虫刚开始的时候可以正常运行,能够正常的爬取数据,但是过了一会,却出现了一个“403 Forbidden",或者是”您的IP访问频率太高“这样的提示,这就意味着你的I ...

  9. Workbench利用Python驱动DM执行Js进行建模

    Workbench的工作平台下可以利用Python进行一些操作,包括添加system和component等等.DM可以通过执行Jscript脚本进行自动建模,因此,结合这两块的内容,可以利用Pytho ...

随机推荐

  1. spring(四）之基于注解（Annotation-based）的配置.md

    注解 这里讲的注解有下面几个 @Autowired @Qualifier(" ") @Genre(" ") @Offline @Resource(name=&q ...

  2. 使用Visual Studio 2017开发python，并在iis上部署Python Django

    作为宇宙第一IDE,怎么可以不支持python开发呢? 1.Visual Studio Installer 扩展Python开发 开始菜单中打开Visual Studio Installer,点修改. ...

  3. 内存数据库之Apache Ingite

    上一篇文章,我们做了内存数据库的技术选型: 内存数据库技术选型 本文中,我们继续深入研究Apache Ignite,同时分享一些我们.Net的编码实践. 首先,Apache Ignite是一个内存数据 ...

  4. Oracle 与Mysql区别

    1.组函数用法规则 mysql中组函数在select语句中可以随意使用,但在oracle中如果查询语句中有组函数,那其他列名必须是组函数处理过的,或者是group by子句中的列否则报错 eg: se ...

  5. Ta-lib函数功能列表

    import tkinter as tk from tkinter import ttk import matplotlib.pyplot as plt import numpy as np impo ...

  6. Maven 项目 @Override must override a superclass method` 问题

    问题 Maven 项目 @Override must override a superclass method` 原因 JDK 在1.5以上的版本,才支持@Override 注解 解决方法 (1)po ...

  7. hdu3416 Marriage Match IV（最短路+网络流）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3416 题意: 给出含n个点.m条有向边的图,每条边只能走一次,给出起点和终点,求起点到终点的最短路径有 ...

  8. STM32经典概述（干货 ）

    STM32经典概述(干货 ) 首先,在学习Cortex-M3时,我们必须要知道必要的缩略语.  在网上看的,觉得挺好的,分享过来了 整理如下: AMBA:先进单片机总线架构   ADK:AMBA设计套 ...

  9. Tensorflow开发环境配置及其基本概念

    Tensorflow开发环境配置及其基本概念 1.1. 安装Tensorflow开发环境 1.1.1. 安装pycharm 1.1.2. 安装pythe3.6 1.1.3. 安装Tensorflow ...

  10. js实现非模态窗口增加数据后刷新父窗口数据

    父窗口是由两个部分组成,一个html的table,一部分是extjs的gird. 点击grid面板[增加]按钮将会弹出非模态窗口进行新数据的编辑页面 下面是按钮的触发函数代码: var a = win ...