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

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <style>
  6.              html,body{
  7.                  margin:0;padding:0;
  8.              }
  9.              .pages{
  10.                  width:100%;
  11.                  height:100vh;
  12.                  outline: 1px solid blue;
  13.              }
  14.              #a,#b,#c{
  15.                  width:50%;
  16.                  height:200px;
  17.              }
  18.              #a ,#c{
  19.                  background:rgba(212,132,11,.5);
  20.              }
  21.              #b{
  22.                  background:rgba(22,32,11,.5);
  23.              }
  24.          </style>
  25.      </head>
  26.      <body>
  27.          <div class="pages">
  28.              <div id="a">123</div>
  29.              <div id="c">123</div>
  30.          </div>
  31.          <div class="pages">
  32.              <div id="b">bbb</div>
  33.          </div>
  34.          <div class="pages">
  35.          </div>
  36.      </body>
  37.  </html>
  38.  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
  39.  <script>
  40.  var design_size = {"width" : 1920 }
  41.  var pages = [
  42.      {
  43.       "height" : 4000 //* radio
  44.       ,"background" : "http://image.tianjimedia.com/uploadImages/2012/221/960UAS60H799.jpg"
  45.      ,"elems" : [
  46.              {"id" : "#a"
  47.               ,"start" : {"left" : 0 , "top" : 0}
  48.               ,"end" : {"left": 200 , "top" : 3600}
  49.              }
  50.              ,{"id" : "#c"
  51.               ,"start" : {"right" : 0 , "bottom" : 4000}
  52.               ,"end" : {"right": 200 , "bottom" : 0}
  53.              }
  54.          ]
  55.      },
  56.      {
  57.       "height" : 3500 //* radio
  58.      ,"background" : "http://image.tianjimedia.com/uploadImages/2012/072/S056Y53BS3Q6_1000x500.jpg"
  59.      ,"elems" : [
  60.              {"id" : "#b"
  61.               ,"start" : {"right" : 0 , "top" : 0}
  62.               ,"end" : {"right": 500 , "top" : 3200}
  63.              }
  64.          ]
  65.      },
  66.      {
  67.       "height" : '3.0' //* radio
  68.      ,"background" : "http://image.tianjimedia.com/uploadImages/2013/065/85GSC473318U.jpg"
  69.      ,"elems" : [
  70.          ]
  71.      },
  72.  ]
  73.  
  74.  </script>
  75.  <script>
  76.  ~function (pg_conf , pg_doms){
  77.      var window_height = window.innerHeight
  78.      var radio = $(window).width() / design_size.width 
  79.  
  80.      pg_doms = $(pg_doms)
  81.      var h_stack = [0]
  82.          ,_pos = 0
  83.          ,_play = 0
  84.          ,_direct
  85.  
  86.      var scene , scene_dom , scene_elems
  87.      var animating = false
  88.      scrollTo(document.body , 0 ,100)
  89.      function scrollTo(element, to, duration) {
  90.          animating = true
  91.          if (duration <= 0) return animating = false;
  92.          var difference = to - element.scrollTop;
  93.          var perTick = difference / duration * 10;
  94.  
  95.          setTimeout(function() {
  96.              element.scrollTop = element.scrollTop + perTick;
  97.              if (element.scrollTop == to) return animating = false;
  98.              scrollTo(element, to, duration - 10);
  99.          }, 10);
  100.      }
  101.      function play(index ,opt){
  102.          if (!pg_conf[index]) {
  103.              return
  104.          }
  105.          opt = opt || {}
  106.          _play = index
  107.          scene = pg_conf[index]
  108.          scene_dom = pg_doms.eq(index)
  109.          scene_elems = scene.elems
  110.          if (0 && opt.movein){
  111.              if ('top' == opt.movein){
  112.                  var to = h_stack[_play]
  113.  
  114.              }else {
  115.                  var to = h_stack[_play+1] - window_height
  116.              }
  117.              if (to) scrollTo(document.body , to ,200)
  118.          }
  119.          ///window.scrollTo(0, h_stack[_play])
  120.          /*
  121.          scene_elems.forEach(function(e_conf){
  122.              e_conf.dom.css('position','absolute').css(e_conf.start)
  123.          })
  124.          */
  125.      }
  126.      function roll(s){
  127.          if (!scene) return
  128.          if (s > scene.scrTotal) return
  129.          var process = s / scene.scrTotal
  130.  
  131.          //console.log(process , s, scene.scrTotal , scene.height , window.innerHeight)
  132.          scene_elems.forEach(function(e_conf){
  133.              var ret = {}
  134.              //console.log(e_conf)
  135.              for (var key in e_conf.end){
  136.                  if (key in e_conf.start) {
  137.                      var m = (e_conf.end[key] - e_conf.start[key] )*process + e_conf.start[key]
  138.                      ret[key] = m
  139.                  }
  140.              }
  141.              //console.log(ret)
  142.              e_conf.dom.css(ret)
  143.  
  144.          })
  145.  
  146.      }
  147.      var t = 0
  148.      pg_conf.forEach(function(p , i){
  149.          var dom = pg_doms.eq(i)
  150.          if (/^\d*\.\d*$/.test(p.height)){
  151.              var height = p.height * window_height
  152.          }else {
  153.              var height = p.height * radio
  154.          } 
  155.  
  156.          t += height
  157.          h_stack.push(t)
  158.          p.height = height
  159.          p.scrTotal = height - window_height
  160.          dom.css({width:'100%'
  161.              ,height: height
  162.              ,position:'relative'
  163.              ,background: 'url(' + p.background+ ') '
  164.              ,'background-size':'cover'
  165.              ,'background-attachment' : 'fixed'
  166.          })
  167.          p.elems.forEach(function(e_conf){
  168.              e_conf.dom = $(e_conf.id).css('position','absolute').css(e_conf.start)
  169.              for (var key in e_conf.start){
  170.                  e_conf.start[key] = e_conf.start[key] * radio
  171.              }
  172.              for (var key in e_conf.end){
  173.                  e_conf.end[key] = e_conf.end[key] * radio
  174.              }
  175.          })
  176.      })
  177.      play(_play)
  178.  
  179.      var _threshold = window_height //-  100
  180.      function move(evt){
  181.          if (animating) return
  182.          var scrl = document.body.scrollTop
  183.          if (scrl > _pos)  _direct = 'down'
  184.          else _direct = 'up'
  185.          _pos = scrl
  186.  
  187.          var boudary = h_stack[_play]
  188.          if ('down' == _direct){
  189.              if (_play !== h_stack.length - 2){
  190.                  var bound_next = h_stack[_play + 1]
  191.  
  192.                  if (scrl + _threshold > bound_next) {
  193.                      console.log('next')
  194.                      play(_play+1 ,{"movein" : "top"})
  195.                  }
  196.              }
  197.          }else {
  198.              if (_play !== 0){
  199.                  var bound_next = h_stack[_play ]
  200.                  if (scrl <= bound_next){
  201.                      console.log('pre')
  202.                      play(_play-1 ,{"movein" : "bottom"})
  203.  
  204.                  }
  205.              }
  206.          }
  207.          boudary = h_stack[_play]
  208.          roll(scrl - boudary)
  209.  
  210.      }
  211.      window.addEventListener('scroll' , move)
  212.  
  213.  }(pages , '.pages')
  214.  </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. Node.js：文件系统

    ylbtech-Node.js:文件系统 1.返回顶部 1. Node.js 文件系统 Node.js 提供一组类似 UNIX(POSIX)标准的文件操作API. Node 导入文件系统模块(fs)语 ...

  2. ES6和Node容易搞混淆的点

    ES6 import  模块名 from XX  '模块标识符'     -----导入模块 import '路径 ' -----导入CSS样式 export default { }  和export ...

  3. C - Pocket Book（set）

    Problem description One day little Vasya found mom's pocket book. The book had n names of her friend ...

  4. 【转】PowerDesigner物理数据表生成C#实体类Model

    model实体类是什么: 在三层架构UI,BLL,DAL中,有时用户插入一条记录到数据库中,必然会有不少数据,按正常编程,也必然会一下子调用某个函数传入不少参数.为了减少参数的数量,达到高效简洁的效果 ...

  5. Java基础之多线程简述

    首先,要辨析进程与线程的概念: 进程是程序执行的过程,它持有资源和线程,相对于程序本身而言具有动态性. 线程是系统中最小的执行单元,同一个进程中可能有多个线程,它们共享该进程持有的资源.线程的通信也称 ...

  6. 使用Micrisoft.net设计方案 前言

    前言 主要阐述23种设计模式在Microsoft.Net中的使用,以及使用设计模式创建后的对象如何使用.同是向我们传达3个理念,分别是: 1.  使用设计模式可以让程序更加灵活 2.  结构越复杂,意 ...

  7. Promise API 简介

    Promise API 简介 译者注: 到处是回调函数,代码非常臃肿难看, Promise 主要用来解决这种编程方式, 将某些代码封装于内部. Promise 直译为"承诺",但一 ...

  8. LruCache缓存机制

    LruCache: Android提供的使用了(Least Recently Used)近期最少使用算法的缓存类 内部基于LinkedHashMap实现 实现这个主要需要重写 构造时需要确定Cache ...

  9. GCC G++ Make CMake自我科普

    Linux下gcc g++ make cmake 联系和区别 C/C++程序从编写到可执行一般经历这几个阶段 编写源代码 编译器编译代码生成目标文件,如.o文件 链接器链接目标文件和其他目标文件/库文 ...

  10. MySQL 5.6 Reference Manual-14.4 InnoDB Configuration

    14.4 InnoDB Configuration 14.4.1 InnoDB Initialization and Startup Configuration 14.4.2 Configuring ...