凡科H5-怎样用 fullPage.js 创建全屏视差滚动单页

--------

凡科H5

-------

应用fullPage.js，这个最受欢迎的单页翻转软件，运用其视差拓展（Parallax extension），在屏面情况上建立美好的，乃至让人上瘾的视差实际效果：

我不知道道你怎样，可是，当我看到运用了这类实际效果的网站后，我都无法终止上左右下拖动网页页面！:) 真是太顺畅了！

Fullpage.js能够完全免费无尽制应用，视差拓展是需要付费的，请尊重开发设计作者的劳动者成效，假如你有购买用意，可以使用下面的优惠码获得打折。 购买此拓展，应用促销编码 4china，获得20%打折! 依照推送给你的电子器件电子邮件表明，为网站域名得到激活密匙（以后在fullPage.js原始化中需要用它）。请不要搞混批准证密匙与激活密匙，需要应用批准证密匙获得网站域名的激活密匙。 选添视差拓展文档。 应用fullPage.js拓展时，需要应用 fullpage.extensions.min.js 而并不是 jquery.fullpage.js 或 jquery.fullpage.min.js，在此文本文档中详尽表明了。 依照此文本文档中的详尽表明，建立屏（section）和页（slide）的构造。 根据在每页和屏中加上  div /div ，建立视差情况元素。 应用CSS，向每一个 fp-bg 元素中加上情况。

例如，假如有这样的一个屏（section):

 div id="section2" 
 div id="slide2-1" Slide 2.1 /div 
 div id="slide2-2" Slide 2.2 /div 
 /div 

根据加上 fp-bg 元素，能够为每一个水平页（slide）分派情况:

 div id="section2" 
 div id="slide2-1" 
 div /div 
 Slide 2.1
 /div 
 div id="slide2-2" 
 div /div 
 Slide 2.2
 /div 
 /div 

在款式表（stylesheet）中为它们加上情况，正如加上至屛和页一样:

#slide2-1 .fp-bg{
 background-image: url('demo.jpg');
 background-size: cover;
#slide2-2 .fp-bg{
 background-image: url('demo2.jpg');
 background-size: cover;

随后, 这般文本文档中所述，原始化 fullPage.js，并加上选项 parallax：true. 同时务必加上选项 parallaxKey，在拓展所需的每一个申请注册域中，键入激活密匙。

这样便可以了，这般就有一个美好的、让人欣喜的视差网站啦，以上所述都在 fullPage.js 文本文档 及视差作用文本文档中以英文详尽表明了。

下面是最后的演试编码：

 !DOCTYPE html 
 html 
 head 
 link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" / 
 script src="ajax/libs/jquery/3.1.1/jquery.min.js" /script 
 script type="text/javascript" src="../fullpage.parallax.js" /script 
 script type="text/javascript" src="../jquery.fullpage.extensions.js" /script 
 script type="text/javascript" 
 $(document).ready(function() {
 $('#myContainer').fullpage({
 parallax: true
 //any other options you want to configure go here
 /script 
 style 
 * Titles for each section
 .section{
 text-align: center;
 font-size: 5em;
 * Setting the backgrounds for each section / slide
 .fp-bg{
 background-size: cover;
 #section1 .fp-bg{
 background-image: url('imgs/bg3.jpg');
 #slide2-1 .fp-bg{
 background-image: url('imgs/bg5.jpg');
 #slide2-2 .fp-bg{
 background-image: url('imgs/bg1.jpg');
 #slide2-3 .fp-bg{
 background-image: url('imgs/bg2.jpg');
 #section3 .fp-bg{
 background-image: url('imgs/bg3.jpg');
 /style 
 /head 
 body 
 div id="myContainer" 
 div id="section1" 
 div /div 
 h1 Section 1 /h1 
 /div 
 div id="section2" 
 div id="slide2-1" 
 div /div 
 h1 Section 2 /h1 
 /div 
 div id="slide2-2" 
 div /div 
 h1 Slide 2.2 /h1 
 /div 
 div id="slide3-3" 
 div /div 
 h1 Slide 2.3 /h1 
 /div 
 /div 
 div id="section3" 
 div /div 
 h1 Section 3 /h1 /div 
 /div 
 /div 
 /body 
 /html 

嘿！假如你是那种喜爱玩转设定的人，这儿也有更多。

配备视差实际效果

能够应用选项 parallaxOptions，进一步操纵各种各样实际效果。
请在此文本文档中掌握更多选项。在此，我做了一些扼要概述：

type:（默认设置 reveal）能够将其设定为 cover 或 reveal。它操纵当今屏在最后屏的上方或正下方。假如挑选遮盖（cover），下一屏或页会遮盖一一部分当今屏或页；挑选露出（reveal），则呈翻转实际效果，当今屏或页会遮盖下一屏或页。 percentage: (默认设置值 62）界定了相对视口的视差实际效果比率（percentage）。较小的值将具较弱的视差实际效果；最大值为100，将显示信息彻底静态数据的情况。 property: (默认设置 translate）提议应用此选项的默认设置值。它界定是不是要对 fp-bg 元素运用视差实际效果，或只将它运用于屏或页的情况特性。
提议应用默认设置值的缘故是由于应用 fp-bg 元素出示了更好的特性，运用translate3d 硬件配置加快。这个选项出示给那些，因为某些特殊缘故，不想在每一个屏或页中加上附加的 fp-bg 元素，或不可以改动 HTML 标识的开发设计者。

怎样应用这些选项？简易得很：

$('#myContainer').fullpage({
 parallax: true
 parallaxOptions:{
 type: 'cover',
 percentage: 50

怎样将视差情况仅运用于特殊屏？

这依然很非常容易。不要在该屏中加上 fp-bg 元素，便可以了。
可是，当 property 为 background 时，就不能以了。但是也沒有甚么可担忧的，并不是么？正如我所说的，我一项提议应用默认设置选项：translate。:)

本文来源于于宜昌企业网站建设企业与宜昌网站建设企业宜昌优石品牌设计方案比较有限企业 宜昌优石设计方案为你出示：品牌企业网站建设，品牌网站建设，宜昌网站建设、宜昌网站建设企业、宜昌企业网站建设、宜昌企业网站建设企业、宜昌网站制作、宜昌网站制作企业 ---------

凡科H5

------------