视差滚动(Parallax Scrolling )效果页面的实现
发布日期:2022-03-30 18:18:28 浏览次数:27 分类:博客文章

本文共 1291 字,大约阅读时间需要 4 分钟。

P.s.  博主前端新手,还请大家包涵了~

令可见我的,欢迎各位高手指教

视差滚动(Parallax Scrolling)效果页面的鼻祖,当属那款Nike Betterworld页面了(现已改版),页面上的图片、文字等内容随着滚轮的滚动而以不同的速度滚动,形成了一种新颖独特的视觉效果。其基本原理是让多层背景以不同的速度移动。

比如下面这个页面:


还有21个精彩的视差滚动示例

视差滚动的历史

视差滚动其实有着很悠久的历史了,,这种效果来自于2D卷轴游戏,比如经典的超级玛丽,细细回顾,当电视机(:-P)屏幕随着马里奥大叔的跑动而滚动时,天空的云朵并不是以相同速度而滚动的。

而如今,伟大的Web设计师们,把这个生动奇妙的效果用在了Web上。视差滚动效果页面很适合专题网站的制作,比如公司的招聘页面,新产品发布介绍页面,相关活动页面等。

视差滚动的原理

上面已经提及,其基本原理是让多层背景以不同的速度移动。即通过JavaScript时刻获取当前页面以滚动的高度,并以不同速度调整各个元素背景图的高度。由于笔者js水平有限,无法独立完成视差滚动js代码的编写,因为目前网络上暂时没有任何与视差滚动的实现有关的资料,在此提供一个好用的jQuery插件,以供参考。

视差滚动的实现

 插件

教程(英文):  

在这里     

使用方法:

jQuery Parallax 的使用很简单,以创建中的页面为例,首先写好基本的HTML,也就是header,footer以及4个div元素用于盛放内容。

同时在<head>标签中引用该插件的js文件和jQuery库。并在<script>标签中添加以下代码:

 

以上代码中,关键是对需要产生视差滚动效果的元素执行parallax函数,parallax函数有四个参数:xPosition,adjuster,inertia,,outerHeight.

xPosition:指定元素的水平位置

adjuster:滚动起始点的y坐标

inertia:指定元素相对于垂直滚动的速度。比如:设定为0.1时,改元素的滚动速度将会是页面滚动速度的十     分之一。

outerHeight:(该项笔者不明白其用法,还请大家指教了)。

对于需要实现视差滚动的元素,其CSS规则必须包含以下内容并使其有效:

#intro{    background:url(images/firstBG.jpg) 50% 0 no-repeat fixed;    color: white;    height: 600px;    margin: 0;    padding: 160px 0 0 0;}

 

为了在高分辨率显示器上也能得到不错的显示效果,建议添加background-color属性。

注意!

1.如果background 属性设置出现问题,就无法正常使用该插件。

2.该插件实现的视差滚动效果只能应用于有背景图的元素,据我了解,其它类似插件也都是应用于有背景图的元素,貌似这样才不会使元素发生抖动。

Ok~大功告成!事情就是这么简单,这篇文章实在没什么营养,权当充充数吧,还请各位轻拍了

转载地址:https://www.cnblogs.com/codepoem/archive/2012/05/26/2519640.html 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:如何基于RBAC设计模型设计权限管理系统
下一篇:Hexo + GitHub 搭建个人博客

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年03月02日 09时11分16秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

数兔子 2019-04-21
python宽度_在Python中对齐框架宽度 2019-04-21
php mysql innodb_PHP开发必用的mysql那么你知道Mysql中MyISAM和InnoDB的区别吗? 2019-04-21
mysql unauthenticated user_出现 unauthenticated user Connect 怎么办 2019-04-21
复制关联表mysql_mysql关联表的复制 2019-04-21
java mysql 表关系分析_数据库表的关系 2019-04-21
mysql8.0主从配置_mysql8主从配置 2019-04-21
antd实现点击按钮隐藏输入框_如何实现按钮点击显示,点击自身再隐藏? 2019-04-21
c语言 变量 函数命名 风格_C语言static变量和函数 2019-04-21
mysql update的引号_新人写了一个update,误用一个双引号,生产数据全变0了! 2019-04-21
mysql男女字段应该建立索引吗_那些字段适不适合建索引? 2019-04-21
安装mysql最后一步密码_MySQL安装最后一步无响应解决方法 2019-04-21
mysql modify语句格式_40条MySQL数据库语句格式 2019-04-21
mysql忽略大小写jpa解决_JPA 大小写敏感问题 2019-04-21
MySQL5.7 固态盘性能设置_MySQL 5.7 安装完成后,立即要调整的性能选项 2019-04-21
idea java web mysql_解决idea中javaweb的mysql8.0.15配置问题 2019-04-21
mysql.net 环境配置_windows环境下下安装配置mysql5.7.24 2019-04-21
servlet对象是在服务器端还是在客户端被创建?_Servlet编程之会话管理 2019-04-21
sqoop mysql hadoop_如何将mysql数据导入Hadoop之Sqoop安装 2019-04-21
webpack卸载_webpack的安装 2019-04-21