视差滚动学习笔记(1):整屏滚动

转载请注明出处: 猩猩队长  http://www.cnblogs.com/wayns/p/parallax_study_page_scroll.html

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为2014年网页设计的热点趋势,越来越多的网站应用了这项技术。http://www.awwwards.com/top-10-web-design-topics-of-2014.html

这里有一些在awwwards上获奖的作品:http://www.awwwards.com/websites/parallax/

学习资料:http://www.alloyteam.com/2014/01/parallax-scrolling-love-story/

看了很多滚动视差的作品,我被它的惊艳给折服了,以至于我自己也想尝试做一个玩玩。

在我自己心里设计的滚动视差作品呢,我想要做的是整屏滚动的那种,滚一下就整个页面切换,再开始下一个页面的视差动作。(大致是酱紫,感觉自己说得乱七八糟的)

我觉得这是一篇关于整屏滚动的文章,好像与滚动视差没半毛钱关系。说白了也就是自己练练手,顺便分享给大家,呵呵!

首先说说滚动屏幕,使用JS滚动屏幕有好几种实现方式,小弟不才,也就介绍2种,希望有更多方法的朋友可以回复我让我记录积累,谢谢。

1 window.scroll(x,y);//页面滚动到坐标(x,y)
2
3 document.body.scrollTop = y;//通过设置body的scrollTop值实现滚动

第一版:

我们先使用document.body.scrollTop实现切换屏幕 DEMO 源码

大家可以看到,这里勉强是实现的整屏滚动,但是滚动屏幕时切换不平滑,都是一闪就换。

作为一名强迫症患者,我是不允许这样子就罢了的,现在我们想要滚动的时候缓慢的切换。

第二版:(慢动作切换)

使用window.scroll(0,y)实现纵向滚动,配合setInterval函数实现慢动作切换 DEMO 源码

实现原理是通过计算向上滚还是向下滚的下一个section的offsetTop值,来确定要滚动到哪个位置。

当开始滚动的时候也就是当前位置离目标位置最远的时候,滚动速度最快,

当屏幕越来越接近目标位置的时候越来越慢,最后结束滚动。

这里没有测试兼容性,只在chrome和Firefox试过。

有什么问题欢迎讨论

时间: 2024-10-10 19:56:12

视差滚动学习笔记(1):整屏滚动的相关文章

IOS开发学习笔记034-UIScrollView-自动滚动

让图片自动滚动的话,需要使使用定时器,循环计算当前页的页码.并且在拖动图片时停止计时器,停止拖动时启动计时器. 定时器 方法1: performSelector 1 [self performSelector:@selector(hideHUD) withObject:nil afterDelay:2.0]; 2 - (void)hideHUD 3 { 4 _hudLable.hidden = YES; 5 } 方法2: GCD 1 dispatch_after(dispatch_time(DI

Framework7学习笔记之 无限滚动(滚动到底部时加载新内容)

一:为页面添加无限滚动控件 在可滚动的容器上(一般为page-content)添加"infinite-scroll"类:在页面底部定义 加载指示器. <div class="page"> <div class="page-content infinite-scroll" data-distance="100"> ... <!-- 加载提示符 --> <div class="i

学习笔记--jquery 页面滚动返回顶部

在html页面加入<meta name="toTop" content="true">即可. $(function () { if ($("meta[name=toTop]").attr("content") == "true") { $("<div id='toTop'><img src='1.png'></div>").appendTo

Javascript 学习笔记 无缝滚动

效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 <style type="text/css"> * { margin: 0; padding: 0; } #div1 { overflow: hidden; width: 712px; height: 108px; margin: 100px auto; position: relative; background: red; } #div1 ul { position: absolute; l

整屏滚动的讲解

今天写的是整屏滚动的内容,最近奶糖饱受Vue的折磨,之前学习js的时候就没认真学,知道这一个月的后台学习下来我才知道js和jq是如此的可爱,好了闲话不扯进入今天的主体. 首先是我们的布局部分 //有了身体,我们还是得给他设置点样式属性,毕竟得有情怀 <style> * {margin: 0; padding: 0;}button {background: #3498db; color: #fff; font-size: 14px; text-align: center; width: 60px

整屏滚动效果 jquery.funnPage.js插件+CSS3实现

最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: 首先使用要引入插件 <link rel="stylesheet" href="../c/jquery.fullPage.css" media="all"/> <script type="text/javascript" src="../j/l

(4)关于整屏滚动的一些想法

一,其中元素的尺寸大小 html结构: <html> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html> css中,关于关于整屏滚动百分比尺寸,很重要的一点: html,body,ul,ul li{wi

整屏滚动

最近一周写了一个pc端自适应的下载推广页面. 第一次做自适应的页面,在此记录一些体会. 首先我拿到的AI设计图纸是1920*1080的分辨率的. 和普通的定宽页面相比,在自适应的页面中,宽度设定为100%,高度需要通过js调节,通过获取视口的高度.再为每一个整屏页面赋值.在项目中我设定页面的最小高度为600px.pc端大概也没有分辨率低于这个数字的了吧. var height = window.innerHeight || document.documentElement.clientHeigh

fullPage教程 -- 整屏滚动效果插件 fullpage详解

1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></