网站建设技巧

网站建设技巧

2006年起一直从事互联网行业,竭尽所能、尽心尽力为各行各业的客户提供服务

网站建设技巧 918次

fullpage.js使用教程及心得

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


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


1.jpg


第一步:引入文件

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>


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


相关文章

联系我们

24小时服务热线

150 0622 7297

  • 微信二维码
    昆山网站建设
  • 微信二维码
    昆山网站建设

江苏苏州昆山市周市镇翠微西路

免费获取您的互联网建设与营销方案

欢迎访问WCDSTUDIO 24小时咨询电话15306227297