视差滚动(Parallax Scrolling)效果的原理与实现
视差滚动(Parallax Scrolling)效果的原理与实现
1.视差滚动效果的主要特点:
1)直观的设计,快速的响应速度,更合适运用于单页面
2)差异滚动 分层视差
页面上很多的元素在相互独立地滚动着,如果我们来对其它分层的话,可以有两到三层 :背景层,内容层,贴图层。
2.原理
1)差异滚动的实现规则:
背景层的滚动(最慢)
贴图层(内容层和背景层之间的元素)的滚动(次慢)
内容层的滚动(可以和页面的滚动速度一致)
2)1、运用大背景
这些背景图像一般是高分辨率,大图,覆盖整个网站。高清照片是一个迅速抓住观众的好方式,可以产生极具冲击力的视觉效果,用户的视线会不自觉地落在宽大的背景上
注意:
1.1、背景图的色彩、内容在选择时要十分讲究,前提是不要破坏用户的体验,不然再漂亮的照片也是枉然。
图片类型最好选取趋向于一些比较柔和、略带透明的一类,不要影响到网站主体内容的阅读,识别,讲究协调。
1.2、以大量图片为特色的页面应该考虑图像的预加载问题,以便为用户提供更好更流畅的视觉体验.
2、你也可以用简单的配色方案
没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式,一个视差区间内颜色最好保持使用2到3种,我们可以调整颜色的透明度,来达到各种视觉效果
3、定位好背景层,贴图层和内容层之间的关系
根据页面自身的功能来定义是否需要贴图层,贴图层的存在是为了更有效的传达视觉效果,但如果它成为了干扰,就会违背了我们使用的初衷
内容层的展现是最主要的,无论背景层和贴图层有多少花哨,在设计师设计过程中,内容层对用户的展示是最优先的
4、讲故事
有力的表现、简约的风格和设计的美感共同构成了一个出色地交互式叙事体验。我们经常听到这样的话:内容是王道,技术只是实现内容的一种工具。当 你能够成功地把有力的信息和漂亮的执行力结合起来,你就能创造出人们喜欢并且享受其中的体验。
3.实现方法
1、在CSS中定义背景滚动方式的属性是backgroud-attacthment
background-attachment -- 定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed: 当页面的其余部分滚动时,背景图像不会移动。
inherit: 规定应该从父元素继承 background-attachment 属性的设置。
初始值: scroll
继承性: 否
适用于: 所有元素
2、js实现,添加一些动画事件,移动的速度、方向不同
4.使用场景
1、初创网站。如果其目的在于宣传品牌、产品,且无太多文本内容呈现时,可在初期上线视差滚动网站,让人先对其产生兴趣,留下印象。之后随着访客增多,内容完善后,再改回常规网站形式。
2、主题宣传站点。对于需要在某个时间段发布的活动宣传页面,需要尽可能为用户产生视觉上的冲击,可上线视差滚动站点。例如阿里、腾讯很多专题网站。
3、特殊行业站点。这类站点的特色也在于“宣传为主、突出视觉冲击力、内容有限”。如一些设计公司网站、游戏公司网
效果
插件代码
(function($){
var methods={
init:function(options){
var settings={
offset:true,
bgfixed:true,
insert:true
}
return this.each(function(){
if(options){
$.extend(settings,options);
}
var $this=$(this),
windowSelector = $(window),
documentSelector=$(document),
thisHeight=0,
thisOffsetTop,
image_url='';
_constructor();
function _constructor(){
image_url=$this.data("source-url");
$this.css({"background-image":"url("+image_url+")"});
if(settings.bgfixed){
$this.css({"background-attachment":"fixed"});
}
addEventsFunction();
}
function addEventsFunction(){
windowSelector.on("scroll",function(){
if(settings.offset){
parallaxEffect();
}
}).trigger("scroll");
}
function parallaxEffect(){
var documentScrollTop,
startScrollTop,
endScrollTop,
visibleScrollValue;
thisHeight=$this.outerHeight(); //800px
windowHeight=windowSelector.height(); //窗口的可见高度
thisOffsetTop=$this.offset().top; //0px,
documentScrollTop=documentSelector.scrollTop(); //滚动条滚动的高度
startScrollTop=documentScrollTop + windowHeight;// 滚动条滚动的高度 + 窗口的可见高度
endScrollTop=documentScrollTop - thisHeight; // 滚动条滚动的高度 - 800px
if((startScrollTop > thisOffsetTop) && (endScrollTop < thisOffsetTop)){
visibleScrollValue = startScrollTop - endScrollTop; //定值,窗口的可见高度+800px
pixelScrolled = documentScrollTop - (thisOffsetTop - windowHeight); //滚动条滚动的高度 - 窗口的可见高度
percentScrolled = pixelScrolled / visibleScrollValue;
if(settings.invert){
deltaTopScrollVal = percentScrolled *100; //向下滚动
$this.css({"background-position":"50% "+deltaTopScrollVal+"%"});
}else{
deltaTopScrollVal = (1-percentScrolled) *100; //向上滚动
$this.css({"background-position":"50% "+deltaTopScrollVal+"%"});
}
}
}
});
},
destory:function(){},
reposition:function(){},
update:function(content){}
};
$.fn.cherryFixedParallax=function(method){
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method with name ' + method + ' is not exist for jQuery.cherryMediaParallax' );
}
}
})(jQuery);
视差滚动(Parallax Scrolling)效果的原理与实现的更多相关文章
- 视差滚动(Parallax Scrolling)效果的原理和实现
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 一.什么是视差滚 ...
- 【转】视差滚动(Parallax Scrolling)效果的原理和实现
原文:http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html 视差滚动(Parallax Scrolling)是指让多层背景以不同 ...
- 视差滚动(Parallax Scrolling)插件补充
13. Windows Windows (github) 是一个让你用占据整个屏幕的section来构建单面网站的插件.该插件提供给你一些回调函数,当新的section出现在可视区并且并且处理快照时被 ...
- jQuery视差滚动插件,(附原理分析,调用方法)
演示地址:http://www.jq22.com/jquery-info1799 jquery插件,使用验证过可用. 分析源代码后总结原理:设置background样式为fixed,判断浏览器滚动距离 ...
- 30个让人兴奋的视差滚动(Parallax Scrolling)效果网站--转
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术.今天这篇文章就与大 ...
- 视差滚动(Parallax Scrolling)的一点小心得
下面内容来源于我知乎的这个答案:http://www.zhihu.com/question/20990029/answer/21436067 假期有空,整理到博客园这边,并做了一些语境的调整. ——— ...
- 那些H5用到的技术(5)——视差滚动效果
前言原理使用方式结合swiper.js 前言 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 目前最火热的视差开源库为pa ...
- CSS完成视差滚动效果
一.是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层.内容层.悬浮层 当滚动鼠标滑轮的时候 ...
- 利用background-attachment做视差滚动效果
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看 ...
随机推荐
- HTML&CSS基础学习笔记1.21-语义化标签
语义化标签 “语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益. HTML 标签语义化是让大家直观的认识标签和属性的用途和作用,很明显<hx ...
- Asp.Net 控件radio 的简单使用
js: <script type="text/javascript"> function ok() { document.getElementById("tx ...
- sql基础复习
--.while循环 declare @sum int declare @i int ) begin set @sum =@sum+@i ) print @i end print @sum --.go ...
- 命令行工具命令 - run包到手机里
命令行工具命令 你完全可以选择不输入以下这些命令,执行这些命令的结果与在 Android Studio 中单击"运行"按钮是一样的. chmod +x gradlew - 此命令只 ...
- activiti 5.17 流程图中文乱码问题
1. 流程图中任务中的中文乱码显示问题. 解决方法:设置processEngineConfiguration中的两个字体属性,例如: <bean id="processEngine ...
- Touch事件
http://www.cnblogs.com/shawn-xie/archive/2012/12/07/2805582.html 前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首 ...
- windows下重命名一个带有前缀"."dot字符的名字的错误问题
如果用正常的右键重命名那么肯定会报错的,比如: 有一个名为project的文件,我想把它命名为.project,加了个前缀dot.然后window就报错了,弹出个对话框让“你必须输入一个文件名”.它可 ...
- mysql sql优化<1>
<pre name="code" class="html">explain SELECT t.* FROM ( SELECT t1.sn AS cl ...
- cf442C Artem and Array
C. Artem and Array time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- SPOJ375.QTREE树链剖分
题意:一个树,a b c 代表a--b边的权值为c.CHANGE x y 把输入的第x条边的权值改为y,QUERY x y 查询x--y路径上边的权值的最大值. 第一次写树链剖分,其实树链剖分只能说 ...