根据设计图设定每屏的高度，js会自动缩放到全屏尺寸，效果要大尺寸才能看的出来

demo :http://runjs.cn/detail/uvizsekd

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <style>

             html,body{

                 margin:0;padding:0;

             }

             .pages{

                 width:100%;

                 height:100vh;

                 outline: 1px solid blue;

             }

             #a,#b,#c{

                 width:50%;

                 height:200px;

             }

             #a ,#c{

                 background:rgba(212,132,11,.5);

             }

             #b{

                 background:rgba(22,32,11,.5);

             }

         </style>

     </head>

     <body>

         <div class="pages">

             <div id="a">123</div>

             <div id="c">123</div>

         </div>

         <div class="pages">

             <div id="b">bbb</div>

         </div>

         <div class="pages">

         </div>

     </body>

 </html>

 <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

 <script>

 var design_size = {"width" : 1920 }

 var pages = [

     {

      "height" : 4000 //* radio

      ,"background" : "http://image.tianjimedia.com/uploadImages/2012/221/960UAS60H799.jpg"

     ,"elems" : [

             {"id" : "#a"

              ,"start" : {"left" : 0 , "top" : 0}

              ,"end" : {"left": 200 , "top" : 3600}

             }

             ,{"id" : "#c"

              ,"start" : {"right" : 0 , "bottom" : 4000}

              ,"end" : {"right": 200 , "bottom" : 0}

             }

         ]

     },

     {

      "height" : 3500 //* radio

     ,"background" : "http://image.tianjimedia.com/uploadImages/2012/072/S056Y53BS3Q6_1000x500.jpg"

     ,"elems" : [

             {"id" : "#b"

              ,"start" : {"right" : 0 , "top" : 0}

              ,"end" : {"right": 500 , "top" : 3200}

             }

         ]

     },

     {

      "height" : '3.0' //* radio

     ,"background" : "http://image.tianjimedia.com/uploadImages/2013/065/85GSC473318U.jpg"

     ,"elems" : [

         ]

     },

 ]

 </script>

 <script>

 ~function (pg_conf , pg_doms){

     var window_height = window.innerHeight

     var radio = $(window).width() / design_size.width 

     pg_doms = $(pg_doms)

     var h_stack = [0]

         ,_pos = 0

         ,_play = 0

         ,_direct

     var scene , scene_dom , scene_elems

     var animating = false

     scrollTo(document.body , 0 ,100)

     function scrollTo(element, to, duration) {

         animating = true

         if (duration <= 0) return animating = false;

         var difference = to - element.scrollTop;

         var perTick = difference / duration * 10;

         setTimeout(function() {

             element.scrollTop = element.scrollTop + perTick;

             if (element.scrollTop == to) return animating = false;

             scrollTo(element, to, duration - 10);

         }, 10);

     }

     function play(index ,opt){

         if (!pg_conf[index]) {

             return

         }

         opt = opt || {}

         _play = index

         scene = pg_conf[index]

         scene_dom = pg_doms.eq(index)

         scene_elems = scene.elems

         if (0 && opt.movein){

             if ('top' == opt.movein){

                 var to = h_stack[_play]

             }else {

                 var to = h_stack[_play+1] - window_height

             }

             if (to) scrollTo(document.body , to ,200)

         }

         ///window.scrollTo(0, h_stack[_play])

         /*

         scene_elems.forEach(function(e_conf){

             e_conf.dom.css('position','absolute').css(e_conf.start)

         })

         */

     }

     function roll(s){

         if (!scene) return

         if (s > scene.scrTotal) return

         var process = s / scene.scrTotal

         //console.log(process , s, scene.scrTotal , scene.height , window.innerHeight)

         scene_elems.forEach(function(e_conf){

             var ret = {}

             //console.log(e_conf)

             for (var key in e_conf.end){

                 if (key in e_conf.start) {

                     var m = (e_conf.end[key] - e_conf.start[key] )*process + e_conf.start[key]

                     ret[key] = m

                 }

             }

             //console.log(ret)

             e_conf.dom.css(ret)

         })

     }

     var t = 0

     pg_conf.forEach(function(p , i){

         var dom = pg_doms.eq(i)

         if (/^\d*\.\d*$/.test(p.height)){

             var height = p.height * window_height

         }else {

             var height = p.height * radio

         } 

         t += height

         h_stack.push(t)

         p.height = height

         p.scrTotal = height - window_height

         dom.css({width:'100%'

             ,height: height

             ,position:'relative'

             ,background: 'url(' + p.background+ ') '

             ,'background-size':'cover'

             ,'background-attachment' : 'fixed'

         })

         p.elems.forEach(function(e_conf){

             e_conf.dom = $(e_conf.id).css('position','absolute').css(e_conf.start)

             for (var key in e_conf.start){

                 e_conf.start[key] = e_conf.start[key] * radio

             }

             for (var key in e_conf.end){

                 e_conf.end[key] = e_conf.end[key] * radio

             }

         })

     })

     play(_play)

     var _threshold = window_height //-  100

     function move(evt){

         if (animating) return

         var scrl = document.body.scrollTop

         if (scrl > _pos)  _direct = 'down'

         else _direct = 'up'

         _pos = scrl

         var boudary = h_stack[_play]

         if ('down' == _direct){

             if (_play !== h_stack.length - 2){

                 var bound_next = h_stack[_play + 1]

                 if (scrl + _threshold > bound_next) {

                     console.log('next')

                     play(_play+1 ,{"movein" : "top"})

                 }

             }

         }else {

             if (_play !== 0){

                 var bound_next = h_stack[_play ]

                 if (scrl <= bound_next){

                     console.log('pre')

                     play(_play-1 ,{"movein" : "bottom"})

                 }

             }

         }

         boudary = h_stack[_play]

         roll(scrl - boudary)

     }

     window.addEventListener('scroll' , move)

 }(pages , '.pages')

 </script>

视差滚动demo （pc）的更多相关文章

  1. 利用background-attachment做视差滚动效果

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看 ...

  2. 分享七款视差滚动效果的jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

  3. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

  4. 视差滚动(Parallax Scrolling)效果的原理和实现

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 一.什么是视差滚 ...

  5. css实现视差滚动效果

    今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...

  6. 那些H5用到的技术（5）——视差滚动效果

    前言原理使用方式结合swiper.js 前言 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 目前最火热的视差开源库为pa ...

  7. Sequence.js 实现带有视差滚动特效的图片滑块

    Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...

  8. swift语言实战晋级-第9章 游戏实战-跑酷熊猫-9-10 移除平台与视差滚动

    9.9 移除场景之外的平台 用为平台是源源不断的产生的,如果不注意销毁,平台就将越积越多,虽然在游戏场景中看不到.几十个还看不出问题,那几万个呢?几百万个呢? 所以我们来看看怎么移除平台,那什么样的平 ...

  9. Swift游戏实战-跑酷熊猫 10 视差滚动背景

    原理 实现 勘误 “实现”的视频中有个错误,如下 背景移动时有个错误,看红色部分,近景归位时,第二张图片的下标是1 if arrBG[0].position.x + arrBG[0].frame.wi ...

随机推荐

  1. colab使用谷歌云中的文件

    colab使用谷歌云中文件 无法一劳永逸 Google Colab最大的不足就是使用虚拟机,这意味着我们自行安装的库虚拟机重启之后,就会被复原,比如keras,数据无法持久化.为了能够持久保存数据,我 ...

  2. Javascript中数组重排序方法详解

    在数组中有两个可以用来直接排序的方法,分别是reverse()和sort().下面通过本文给大家详细介绍,对js 数组重排序相关知识感兴趣的朋友一起看看吧. 1.数组中已存在两个可直接用来重排序的方法 ...

  3. 移动端rem设置（部分安卓机型不兼容）

    (function(win) { var doc = win.document; var docEl = doc.documentElement; var tid; function refreshR ...

  4. 修改织梦plus目录名

    1.修改plus目录名 修改inlclude文件夹下common.inc.php 140行 //插件目录,这个目录是用于存放计数器.投票.评论等程序的必要动态程序 $cfg_plus_dir = $c ...

  5. 自定义安装MS Office Project2007会出错

    作者:朱金灿 来源:http://blog.csdn.net/clever101 今天使用虚拟光驱文件自定义安装MSOffice Project2007,如下图: 然后总是出现一个错误: 从网上找来一 ...

  6. 有关Gradle Network is unreachable: connect的报错

    项目Gradle   Errer:Network is unreachable: connect 同时还有as的 报错 Internal HTTP server disabled: Cannot st ...

  7. 「Redis 笔记」常用命令

    编号 命令 描述 1 DEL key 此命令删除一个指定键(如果存在). 2 DUMP key 此命令返回存储在指定键的值的序列化版本. 3 EXISTS key 此命令检查键是否存在. 4 EXPI ...

  8. 杭电 1002 A + B Problem II【大数相加】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1002 解题思路:就是把大的数用数组存放起来,像小学的时候用竖式加法来算两个数相加那样算: 反思:思路很 ...

  9. ubuntu 搭建简易的https网站

    ubuntu 搭建简易的https网站 环境:ubuntu 12.04.5 openssl (1)创建一个ssl的保存路径 sudo mkdir /opt/nginx/ssl (2)生存密钥sudo ...

  10. adb使用实践

    目录 1. adb 端口占用 2. 查看包名和MainAcitivity =============================================================== ...