首页网站运营网站建设教程

网站运营

官方动态

网站建设教程

网站建设知识

网站建设与管理

fullpage.js使用教程及心得

现如今网站做的越来越漂亮,越来越高大尚,特别是看到那种全屏滚动的网站,给人以强烈的视觉冲击和满足感,就像本站的一个网站建设案例特塑高分子 一样,那么这种全屏滚动的效果好做吗?


其实网上搜索jQuery全屏滚动,很容易找到很多能实现全屏滚动效果的插件,不过这里主要还是讲讲fullpage.js插件的使用方法和心得。fullpage.js插件有自己的官网,可以点击查看。或者移步在github上查看。


fullpage.js官网首页截图


第一步:引入文件

fullpage.js是依赖于jQuery运行的,所以使用的时候必须前置jquery.min.js,然后接着引入fullpage.js,代码如下:

<script src="js/jquery.min.js"></script>

<script src="js/jquery.fullPage.js"></script>


第二步:编写html

编写一个基本的html页面结构:每一个section都是一个页面,然后在用任意命名一个id包裹住所有的section,代码如下:

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div>
</div>


第三步:激活全屏滚动效果


$(function(){
    $('#fullpage').fullpage();
});

这样一个全屏滚动的页面效果就实现了。

自己需要在每一屏里面如何布局页面,就在section中排版好。


由于在实际制作页面的过程中,可能会需要反复调试页面的排版,总是通过翻滚的方式查看第二屏之后的全屏效果,会显的很麻烦,可以在html代码结构中指定其中一个section添加上一个active,代码结构如下:

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section active">第二屏</div>
    <div class="section">第三屏</div>
</div>

这样当刷新页面查看全屏效果的时候,就可以直接看到第二屏,不需要再滚动到第二屏才能看到全屏效果。

发表时间

20190509

文章标签

fullpage.js

被浏览次数

点我搜索

“CSS”相关的文章

  • 昆山网站建设小编讲讲IIS如何使用

    2018-12-14

    通过前文《如何在win7系统里创建ASP程序测试环境》我们学会了在win7系统里面安装IIS,那么如何使用IIS来创建运行网站呢?...

  • Ps Play无法连接的问题

    2018-04-05

    前段时间发了一个替代Ps Play的移动端设计稿预览工具,不过做为日常不太使用PsMirror的人来说,可能不会去专门购买,所以还是用回了Ps Play,也顺便解决了无法连接预览的问题。...

  • 替代Ps play的设计稿实时预览工具PsMirror

    2018-01-31

    PsMirror是一款实时预览photoshop设计稿的工具。 它让你极方便地在手机上查看PS中的设计稿, 提升设计效率。 支持android/ios两个平台......

  • 配置PHPStorm2017主题(颜色字体)

    2017-12-24

    PHPstorm默认的主题和可选的主题有时候不能满足有些人的需求,怎么配置自己喜欢的主题呢?首先先去下载自己喜欢的主题:http://www.phpstorm-themes.com/...

  • 使用css解决视频大小自适应

    2017-03-07

    自适应网站有的时候会碰到视频页面,那么怎么样才能让页面中的视频也能自适应设备屏幕尺寸呢?...

  • 如何优化自己的网站

    2016-12-19

    一个网站如果我们访问的时候,他的页面打开速度很慢,或者页面看起来很糟糕,看起来很费劲,让人不舒服,那么都是会影响访客的体验,使访客失去继续访问的兴趣,那么怎么优化自己的网站就是一件很重要的事。...

WCDSTUDIO专注于互联网服务

立即沟通您的需求
版权所有 WCDSTUDIO © All Rights Reserved 2015-2020CSS快速查询CSS选择符演示html常用标签演示flexui