乐彩北京快乐8:如何用 fullPage.js 创建全屏视差滚动单页

问说网 · 发布于 2017-03-09 · 字数8481 · 浏览 3605 · 评论 0

北京快乐8历史走势图 www.i40b.com.cn 使用fullPage.js,这个最受欢迎的单页滚动插件,利用其视差扩展(Parallax extension),在屏面背景上创建美妙的,甚至令人上瘾的视差效果:

如何用 fullPage.js 创建全屏视差滚动单页

我不知道你如何,但是,当我看到应用了这种效果的网站后,我都难以停止上上下下滑动页面!:) 真是太流畅了!

Fullpage.js可以免费无限制使用,视差扩展是需要付费的,请尊重开发作者的劳动成果,如果你有购买意图,可使用下面的优惠码获取折扣。

打造视差效果的过程很容易,我甚至都不知道是否该为此写文章一一赘述。
获取这一扩展也很容易,包括创建全屏视差单页网站,在 fullPage.js 初始化中使用 parallax:true,并将该元素加入每一屏(section)的 fp-bg class中。
对于那些不熟悉 fullPage.js 或运用 Javascript 有些困难的人来说,以下是详解过程:

  • 购买此扩展,使用促销代码 4china,获取20%折扣!
  • 按照发送给你的电子邮件说明,为域名获得激活密钥(之后在fullPage.js初始化中需要用它)。请不要混淆许可证密钥与激活密钥,需要使用许可证密钥获取域名的激活密钥。
  • 选添视差扩展文件。
  • 使用fullPage.js扩展时,需要使用 fullpage.extensions.min.js 而不是 jquery.fullpage.js 或 jquery.fullpage.min.js,在此文档中详细说明了。
  • 按照此文档中的详细说明,创建屏(section)和页(slide)的结构。
  • 通过在每一页和屏中添加 <div class="fp-bg"></div>,创建视差背景元素。
  • 使用CSS,向每个 fp-bg 元素中添加背景。

例如,如果有这样的一个屏(section):

<div class="section" id="section2">
    <div class="slide" id="slide2-1">Slide 2.1</div>
    <div class="slide" id="slide2-2">Slide 2.2</div>
</div>

通过添加 fp-bg 元素,可以为每个水平页(slide)分配背景:

<div class="section" id="section2">
    <div class="slide" id="slide2-1">
        <div class="fp-bg"></div>
        Slide 2.1
    </div>
    <div class="slide" id="slide2-2">
        <div class="fp-bg"></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="https://ajax.googleapis.com/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;
        }
        h1{
            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 class="section" id="section1">
        <div class="fp-bg"></div>
        <h1>Section 1</h1>
    </div>
    <div class="section" id="section2">
        <div class="slide" id="slide2-1">
            <div class="fp-bg"></div>
            <h1>Section 2</h1>
        </div>
        <div class="slide" id="slide2-2">
            <div class="fp-bg"></div>
            <h1>Slide 2.2</h1>
        </div>
        <div class="slide" id="slide3-3">
             <div class="fp-bg"></div>
            <h1>Slide 2.3</h1>
        </div>
    </div>
    <div class="section" id="section3">
        <div class="fp-bg"></div>
        <h1>Section 3</h1></div>
    </div>
</div>

</body>
</html>

嘿!如果你是那种喜欢玩转设置的人,这儿还有更多。

配置视差效果

可以使用选项 parallaxOptions,进一步控制各种效果。
请在此文档中了解更多选项。在此,我做了一些简要概述:

  • type:(默认 reveal)可以将其设置为 coverreveal。它控制当前屏在最终屏的上方或下方。如果选择覆盖(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 元素,就可以了。
但是,当 propertybackground 时,就不可以了。不过也没有什么可担心的,不是么?正如我所说的,我一项建议使用默认选项:translate。:)

常见问题

为什么需要激活密钥才能使用扩展?

扩展许可证由要使用它的网站(域)的数量决定,扩展的价格也取决于此。
需要激活密钥来确保只可在许可所述数量的网站中使用该扩展。

可以在镜像网站中使用它,然后将其移至运营网站么?

是的,可以。必须先将镜像网站(staging site)注册在扩展中,然后,当你要将其移至运营网站时,请向我索要一个新的激活密钥。如果可能的话,请用英文沟通!:) 那样我会更快的回复你。

视差扩展是否与其他扩展和功能兼容?

是的??梢约嫒荽蠖嗍渌┱购凸δ?,除了在演示页面中“兼容性”链接下的那些,即拖动和移动(Drag And Move)、偏移屏(Offset Sections)和 fp-auto-heightfp-auto-heightresponsive 功能。

可以退款吗?

当然可以!在一些特定情况下,无论由于任何原因,你认为扩展无法达到预期的效果,只要你未将激活密钥用于任何域,便可以获得全额退款。

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2014-07-30ubuntu远程连接方法和常用命令
  • 2016-04-16NW.js基于Chromium和Node.js的应用程序框架
  • 2016-04-20在Photoshop中创建绚丽的草木文字混合效果
  • 2016-05-16有帮助!值得一看!网页设计中的“点、线、面”
  • 2016-05-17[智能电视UI教程]智能电视用户体验设计分享之??仄髌?/a>
  • 2016-05-17手把手教你做霸气的PS特效标题字
  • 2016-05-19KeyboardJS捕捉键盘快捷键事件插件
  • 2016-07-05angularAMD使用RequireJS和AngularJS快速构建WebApp
  • 发布评论

    为您推荐

    问说网 · 发布于 2014-09-15

    浅谈网站发展的趋势

    几乎每个网络公司都在开展网站建设业务,同时,因发展方向的不同,产生了三大块主体网站建设群体

    问说网 · 发布于 2015-08-19

    Croppic图片裁切插件中文API帮助文档

    上篇文章中我们介绍了Croppic的基本情况和使用方法,这篇文章我们将为大家介绍如何自定参数和后端处理需要裁切的图片,其中包含了大量的示例代码,官方也提供了大量…

    问说网 · 发布于 2016-03-08

    JavaScript获取渲染后的样式

    一般我们利用element.style属性来获取CSS的样式,而此方法只能获取标签内的样式,无法获取头部或引入的样式,因此而我们又需要获取其样式,则我们可以使用…


    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36975_0_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36975_1_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36975_2_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36975_3_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    不会画画怎么办?没关系让速写来帮你

    速写是任何设计中的一个重要的部分,尽管此时此刻你并不会画画。那么,谁需要速写呢?如果你说,只有艺术家和插画家需要速写,那么你就大错特错了。今天我们就来看一看,为…

    • 不会画画怎么办?没关系让速写来帮你
    • 不会画画怎么办?没关系让速写来帮你
    • 不会画画怎么办?没关系让速写来帮你
    • 不会画画怎么办?没关系让速写来帮你
    RobertDoris · 发布于 2016-05-17 · 浏览 1071 · 评论 0

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36988_0_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36988_1_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36988_2_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36988_3_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    如何设计一个伟大的Logo?这6个技巧你知道吗?

    设计一个伟大的logo,设计师应该理解色彩心理学和字体。例如:绿色通常代表成长,健康和环境,它能促进情感放松,另一方面,红色可能会唤起危险和激情。同样字体的选择…

    • 如何设计一个伟大的Logo?这6个技巧你知道吗?
    • 如何设计一个伟大的Logo?这6个技巧你知道吗?
    • 如何设计一个伟大的Logo?这6个技巧你知道吗?
    • 如何设计一个伟大的Logo?这6个技巧你知道吗?
    RooseveltZoe · 发布于 2016-05-17 · 浏览 1231 · 评论 0

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/37675_0_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/37675_1_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/37675_2_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/37675_3_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    AI精品教程!教你绘制一个高科技电源按钮

    今天这枚 Illustrator 教程长达70多个步骤,过程细致到发指,诸多细节刻画精细入微,效果满满的未来科幻风,作为练手进阶教程最好不过。 效果图 : 1.…

    • AI精品教程!教你绘制一个高科技电源按钮
    • AI精品教程!教你绘制一个高科技电源按钮
    • AI精品教程!教你绘制一个高科技电源按钮
    • AI精品教程!教你绘制一个高科技电源按钮
    LattimoreCarl · 发布于 2016-05-17 · 浏览 1136 · 评论 0
    问说网 · 发布于 2016-06-24

    配置和查看Apache运行性能监控状态

    我们可以通过命令行来查看Apache的运行情况,但是无法查看Apache那些进程是处于工作状态,那些处于等待状态,当前有多少连接,还剩余多少空闲连接资源等信息。

    Vincent · 发布于 2016-07-06

    正则表达式

    包 java.uti.regex   类 Pattern 正则表达式的编译表示形式 Matcher 通过解释 Pattern 对 character …

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13172 文章
    497 评论
    2105 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3442

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 3166

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 3320

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2686

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2912

    更多 推荐作者

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    ?
    顶部 反馈 北京快乐8历史走势图 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!

    376| 404| 410| 892| 358| 47| 295| 501| 229| 862|