视差滚动demo （pc）
根据设计图设定每屏的高度，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）的更多相关文章
- 利用background-attachment做视差滚动效果
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看 ...
- 分享七款视差滚动效果的jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...
- 16个最棒的jQuery视差滚动效果教程
今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...
- 视差滚动(Parallax Scrolling)效果的原理和实现
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 一.什么是视差滚 ...
- css实现视差滚动效果
今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...
- 那些H5用到的技术（5）——视差滚动效果
前言原理使用方式结合swiper.js 前言 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 目前最火热的视差开源库为pa ...
- Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
- swift语言实战晋级-第9章 游戏实战-跑酷熊猫-9-10 移除平台与视差滚动
9.9 移除场景之外的平台 用为平台是源源不断的产生的,如果不注意销毁,平台就将越积越多,虽然在游戏场景中看不到.几十个还看不出问题,那几万个呢?几百万个呢? 所以我们来看看怎么移除平台,那什么样的平 ...
- Swift游戏实战-跑酷熊猫 10 视差滚动背景
原理 实现 勘误 “实现”的视频中有个错误,如下 背景移动时有个错误,看红色部分,近景归位时,第二张图片的下标是1 if arrBG[0].position.x + arrBG[0].frame.wi ...
随机推荐
- Vue.js和Nodejs的关系
首先vue.js 是库,不是框架,不是框架,不是框架. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你 ...
- MongoDB索引05-30学习笔记
MongoDB 索引 索引通常能够极大的提高查询的效率,如果没有索引,MongoDB在读取数据时必须扫描集合中的每个文件并选取那些符合查询条件的记录. 这种扫描全集合的查询效率是非常低的,特别在处理大 ...
- ORACLE.错误码 ORA-12154 及Oracle客户端免安装版的设置
.错误码 ORA-12154相信作为ORACLE数据库的开发人员没有少碰到“ORA-12154: TNS: 无法解析指定的连接标识符”,今天我也又碰到了类似的情况,将我的解决方法进行小结,希望能对碰到 ...
- git window端工具之sourcetree使用
https://www.jianshu.com/p/3478e2a214a1
- 第5章分布式系统模式 在 .NET 中使用 DataSet 实现 Data Transfer Object
要在 .NET Framework 中实现分布式应用程序.客户端应用程序需要显示一个窗体,该窗体要求对 ASP.NET Web Service 进行多个调用以满足单个用户请求.基于性能方面的考虑,我们 ...
- Android一对多蓝牙连接示例APP
一对多蓝牙连接示例,基于Google BluetoothChat修改,实现一对多聊天(一个服务端.多个客户端),类似聊天室. 主要功能: 客户端的发出的消息所有终端都能收到(由服务端转发) 客户端之间 ...
- Android媒体解码MediaCodec,MediaExtractor
Android提供了MediaPlayer播放器播放媒体文件,其实MediaPlyer只是对Android Media包下的MediaCodec和MediaExtractor进行了包装,方便使用.但是 ...
- c++ 编译期与运行期
分享到 一键分享 QQ空间 新浪微博 百度云收藏 人人网 腾讯微博 百度相册 开心网 腾讯朋友 百度贴吧 豆瓣网 搜狐微博 百度新首页 QQ好友 和讯微博 更多... 百度分享 转自:http://h ...
- 检查点和SCN
有一家叫甲骨文的粮店,老板很严谨,为了防止仓库的粮食在买入卖出的时候发生问题,他制订一套流程,首先进出仓库的每一旦粮食都要求有一个编号(SCN),而且出入库之前必须先放到一个平台上(buffer ca ...
- SQL SERVER数据库状态
一个SQL SERVER数据库会处于很多种状态,例如 ONLINE .RESTORING .RECOVERING .RECOVERY_PENDING .SUSPECT.EMERGENCY .OFFL ...