JQuery stellar视察滚动 和 fullPage 全屏滚动插件的使用

Stellar.js(视差滚动是当用户滚动页面时，前景和背景以不同的速度移动，从而创造出3D效果。 这种效果可以给网站一个很好的补充，但如果滥用，就会很烦人。 有些完全由这种效果驱动的网站会让人觉得不优雅。 因为这种效果通常使用大图像做背景，网站资源大量增加，导致加载非常缓慢。http://markdalgleish.com/projects/stellar.js/ 官网)

引用 css js包

引用html

    
TEXT HERE


    
TEXT HERE


    
TEXT HERE


    
TEXT HERE


    
TEXT HERE


    
TEXT HERE
 

引入自定义CSS

   body {
            font-size: 20px;
            color: white;
            text-shadow: 0 1px 0 black, 0 0 5px black;
        }
        p {
            padding: 0 0.5em;
            margin: 0;
        }
        .content {
            background-attachment: fixed;
            width: 100%;
            height: 800px;
        }
        #content1 {
            background-image: url("images/1.jpg");
        }
        #content2 {
            background-image: url("images/2.jpg");
        }
        #content3 {
            background-image: url("images/3.jpg");
        }
        #content4 {
            background-image: url("images/4.jpg");
        }
        #content5 {
            background-image: url("images/5.jpg");
        }
        #content6 {
            background-image: url("images/avd.jpg");
        }

js调用函数

$.stellar({
    horizontalScrolling: false,
    responsive: true
});

 

详细参数

名称	说明
horizontalScrolling 和 verticalScrolling	该配置项用来设置视差效果的方向。horizontalScrolling设置水平方向，verticalScro设置垂直方向， 为布尔值，默认为true
responsive	该配置项用来制定load或者resize时间触发时是否刷新页面，其值为布尔值，默认为false
hideDistantElements	该配置项用来设置移出视线的元素是否隐藏，其值为布尔值，若不想隐藏则设置为false`
data-stellar-ratio="2"	定义了此元素针对页面滚动的速度比率，比如，0.5为页面滚动的50%，2为页面滚动的200%，所以数值越大，你可以看到页面元素滚动速度越快。
data-stellar-background-ratio	该配置项用在单个元素中，其值为一个正数，用来改变被设置元素的影响速度。 例如 值为0.3时，则表示背景的滚动速度为正常滚动速度的0.3倍。如果值为小数时最好在样式表中设置

fullpage 全屏插件(fullPage.js 是一个基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。)

中文演示地址 http://www.dowebok.com/demo/2014/77/

主要功能有：

1. 支持鼠标滚动
2. 支持前进后退和键盘控制
3. 多个回调函数
4. 支持手机、平板触摸事件
5. 支持 CSS3 动画
6. 支持窗口缩放
7. 窗口缩放时自动调整
8. 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

引用文件

 

HTML 结构

    

        
第一屏
    
    

        
第二屏
    
    

        
第三屏
    
    

        
第四屏
    

js调用函数

  $(function(){
        $('#dowebok').fullpage({
            sectionsColor:['pink','blue','red','green'],
            afterLoad:function (anchorLink ,index ) {
                $(".section").eq(index-1).addClass("current").siblings().removeClass("current");

            }
        });
    });