• 证严上人:悲心愿起 五十无悔 2019-10-16
  • 1米8的浪漫!日本纸模达人自制111独角兽高达 2019-10-16
  • 中国三星获第十二届人民企业社会责任奖年度扶贫奖 2019-10-14
  • “会生气的存钱罐”获日本最佳创意玩具奖 2019-10-14
  • 在北欧坐邮轮 开启慢节奏之旅邮轮游轮 2019-10-12
  • 真正的皇家御用:清代皇帝为何偏爱这种瓷器(图) 2019-10-12
  • 2018“一带一路”与澳门发展国际研讨会圆满闭幕 2019-10-03
  • 户县民间艺人打造“微杆秤” 小小杆秤留住记忆 2019-09-26
  • 问题茶叶半年16次上黑榜 2019-09-25
  • 好坏大家判 事事有人管 2019-09-21
  • 联系我们中国国家地理网 2019-09-12
  • 最后的骑兵:解放军高原骑兵腰挎马刀热血冬训 2019-08-02
  • Kalender von Xi bei den Zwei Tagungen 2019-07-23
  • 大众Polo最高优惠1.5万 年轻人的好选择 2019-07-20
  • 印巴首次同时参加上合 日媒:是时候认真看待了 2019-07-18
  • 双色球开奖走势图:如何用 fullPage.js 创建全屏视差滚动单页

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

    排列五开奖结果查询 www.237sh.com 使用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-12-13设计之道:.Net 中的设计模式之Composite 模式
  • 2015-09-05scrollReveal.js元素滚动动画参数介绍
  • 2015-10-29AliceUI基于支付宝样式解决方案前端框架
  • 2015-10-29jQuery-paged-scroll无限滚动加载插件
  • 2016-05-15iPhone6来袭!如何改进工作让设计支持多个尺寸
  • 2016-05-17AI教程:教你创造时尚多彩网站LOGO
  • 2016-07-01SweetTooltip基于jQuery和CSS3链接工具提示插件
  • 2016-07-06SVN
  • 发布评论

    为您推荐

    问说网 · 发布于 2015-10-15

    imgAreaSelect基于jQuery功能强大的图片裁切插件

    ImgAreaSelect是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,非常的fashion。另外可以在这个选择图像区域的基础上应用网站的其他一…

    问说网 · 发布于 2016-02-24

    WordPress中的Debug调试模式和参数配置

    WordPress中已经给我们添加了调试模式,只是默认是关闭的,那么我在开发主题或者是插件的时候就需要打开这个Debug调试模式,优化我们的插件或者主题的时候也…

    Windows 7 找不到该项目错误解决方法
    问说网 · 发布于 2016-02-28

    Windows 7 找不到该项目错误解决方法

    在使用Windows7系统删除文件或者文件夹的时候,会出现“找不到该项目”的错误提示,可能再次“重试”也无济于事,今天就为大家简单概括一下出现该问题的原因及解决…

    问说网 · 发布于 2016-06-11

    Tinycon浏览器的网站图标上显示冒泡的数字

    Tinycon 是一个轻量级的插件,可在浏览器的网站图标上显示冒泡的数字,支持 Chrome 和 Firefox 浏览器。这个效果非常的炫酷,能够在醒目的位置显…

    问说网 · 发布于 2016-06-30

    io.js衍生自Node.js并兼容npm的开发平台

    io.js 是一个衍生自 Node.js?,并兼容 npm 的开发平台,io.js与Node.js项目再次合并,不会有任何进一步的io.js释放。在io.js所…

    SweetTooltip基于jQuery和CSS3链接工具提示插件
    问说网 · 发布于 2016-07-01

    SweetTooltip基于jQuery和CSS3链接工具提示插件

    SweetTooltip 工具提示是一个基于jQuery和CSS3的工具提示,它不仅仅是一个风格,而是有七种风格。这种无背景图风格的工具提示制作使用线性梯度,阴…

    POI
    Vincent · 发布于 2016-07-06

    POI

    官方网站 //poi.apache.org/   术语 OOXML Office Open XML standards,基于XML格式的新标…

    问说网 · 发布于 2016-07-07

    Fool.js恶搞整人网页特效jQuery插件

    Fool.js是一个 jQuery 插件,包含了几种页面特效,可以用来在愚人节的时候整人,来实现更多的更变态的愚人功能,当然你也可以使用这个插件完成更多好看的效…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

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

    13177 文章
    496 评论
    2165 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 4502

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 4849

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 4826

    图片素材

    关注 图片素材

    文章 29463 · 浏览 3730

    高清图片

    关注 高清图片

    文章 26530 · 浏览 3968

    更多 推荐作者

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    ?
    顶部 反馈 排列五开奖结果查询 底部

    意见反馈

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

    您的反馈我们已收到!

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

  • 证严上人:悲心愿起 五十无悔 2019-10-16
  • 1米8的浪漫!日本纸模达人自制111独角兽高达 2019-10-16
  • 中国三星获第十二届人民企业社会责任奖年度扶贫奖 2019-10-14
  • “会生气的存钱罐”获日本最佳创意玩具奖 2019-10-14
  • 在北欧坐邮轮 开启慢节奏之旅邮轮游轮 2019-10-12
  • 真正的皇家御用:清代皇帝为何偏爱这种瓷器(图) 2019-10-12
  • 2018“一带一路”与澳门发展国际研讨会圆满闭幕 2019-10-03
  • 户县民间艺人打造“微杆秤” 小小杆秤留住记忆 2019-09-26
  • 问题茶叶半年16次上黑榜 2019-09-25
  • 好坏大家判 事事有人管 2019-09-21
  • 联系我们中国国家地理网 2019-09-12
  • 最后的骑兵:解放军高原骑兵腰挎马刀热血冬训 2019-08-02
  • Kalender von Xi bei den Zwei Tagungen 2019-07-23
  • 大众Polo最高优惠1.5万 年轻人的好选择 2019-07-20
  • 印巴首次同时参加上合 日媒:是时候认真看待了 2019-07-18
  • 上海时时视频直播 重庆时时开奖结果记录 赌博电子游戏哪个好赢 11选五倍投计划表 迪尚华盈 欢乐生肖计划 我玩龙虎赢了1百万 22241高手论坛6 特区彩票软件 麻将游戏单机 足球竞彩 彩票快3选大小单双技巧 aa99棋牌免费送10钱 足球比分007 时时彩双胆技巧算法 11选5任选七胆拖