fullpage-js制作搜狐快站滚屏效果

下载 已下载374次 – 729 kB

制作方法

1、HTML

左边放 logo 及菜单，右边放图片。

<div id="side">
    <div class="inner">
        <div class="hgroup">
            <h1><a href="###">搜狐快站</a></h1>
            <h2>专业的移动建站平台</h2>
        </div>
        <a class="start" href="###">开始建站</a>
    </div>
    <ul id="menu">
        <li class="active" data-menuanchor="page1">
            <a class="a1" href="#page1" title="快速创建移动站点">快速创建移动站点</a>
        </li>
        <li data-menuanchor="page2">
            <a class="a2" href="#page2" title="丰富的模板">丰富的模板</a>
        </li>
        <li data-menuanchor="page3">
            <a href="#page3" href="#page3" title="强大的功能组件">强大的功能组件</a>
        </li>
        <li data-menuanchor="page4">
            <a href="#page4" href="#page4" title="多种屏幕预览">多种屏幕预览</a>
        </li>
        <li data-menuanchor="page5">
            <a href="#page5" title="全网告诉访问">全网告诉访问</a>
        </li>
    </ul>
</div>

<div class="section">
    <div class="imgbox">
        <img src="images/img1.png" alt="快速创建移动站点">
    </div>
</div>
<div class="section">
    <div class="imgbox">
        <img src="images/img2.png" alt="丰富的模板">
    </div>
</div>
<div class="section">
    <div class="imgbox">
        <img src="images/img3.png" alt="强大的功能组件">
    </div>
</div>
<div class="section">
    <div class="imgbox">
        <img src="images/img4.png" alt="多种屏幕预览">
    </div>
</div>
<div class="section">
    <div class="imgbox">
        <img src="images/img5.png" alt="全网告诉访问">
    </div>
</div>

2、CSS

我们用 position:fixed 固定左栏、logo 以及菜单，并且给菜单加上背景图片。

#side { position: fixed; left: 0; top: 0; z-index: 10; width: 300px; height: 100%; background-image: url(http://s0.zhan.sohu.com/images/df-side.png);}
.inner { position: absolute; left: 50%; top: 50%; width: 226px; margin: -112px 0 0 -113px;}
.hgroup { width: 226px; height: 81px; margin: 0 auto; text-indent: -9999px; background-image: url(http://s0.zhan.sohu.com/images/df-logo.png);}
.start { display: block; width: 186px; height: 56px; margin: 66px auto 0; text-indent: -9999px; overflow: hidden; background-image: url(http://s0.zhan.sohu.com/images/df-start.png);}
#menu { position: absolute; right: -20px; top: 50%; width: 40px; margin-top: -170px; padding: 0; list-style-type: none;}
#menu li { float: left;}
#menu a { display: block; width: 28px; height: 28px; margin: 20px 6px; border-radius: 14px; text-indent: -9999px; overflow: hidden; background-color: #a0afb9; background-position: 50%; background-repeat: no-repeat;}
#menu .a1 { background-image: url(http://s0.zhan.sohu.com/images/df-01.png);}
#menu .a2 { background-image: url(http://s0.zhan.sohu.com/images/df-02.png);}
#menu .a3 { background-image: url(http://s0.zhan.sohu.com/images/df-03.png);}
#menu .a4 { background-image: url(http://s0.zhan.sohu.com/images/df-04.png);}
#menu .a5 { background-image: url(http://s0.zhan.sohu.com/images/df-05.png);}
#menu a:hover, #menu .active a { margin: 14px 0; border: 6px solid #fff; box-shadow: 1px 1px 3px 1px #b4d7ed; border-radius: 20px; background-color: #239ae6;}
.section { margin-left: 300px; text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
.section .imgbox { margin-left: 300px;}
.section img { position: relative; left: -300px; display: block; margin: 0 auto;}

3、JavaScript

你了解 fullPage.js 的话，本例中的 JavaScript 就很简单了，设置一个背景颜色，绑定锚链接和菜单就可以了。

$(document).ready(function() {
    $.fn.fullpage({
        slidesColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],
        menu: '#menu'
    });
});