php页面 背景不动,页面滚动背景图片不动的原理及实现
以前看到一种页面滚动条在滚动,而背景图片却不动的效果,页面缓缓的下拉,背景也缓缓的切换,就像放电影一样,后来才知道这叫(Parallax Scrolling),作为一种优雅酷炫的页面展示的方式,视差滚动(Parallax Scrolling)正受到越来越多前端设计师的宠爱,优设的2014年网页设计趋势中依然能够看到它的影子,所以我们不得不来好好研究下视差滚动的原理和实现方式。
原文出处:http://blog.csdn.net/chenlycly/article/details/25046969
1.视差滚动
2.特性
视差滚动效果酷炫,适合于个性展示的场合。
视差滚动徐徐展开,适合于娓娓道来,讲故事的场合。
视差滚动容易迷航,需要具备较强的导航功能。
3.原理
传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的,而视差滚动则是在滚动的时候,内容和多层次的背景实现或不同速度,或不同方向的运动。
有的时候也可以加上一些透明度、大小的动画来优化显示。
4.实现
4.1简单实现
利用background-attachment属性实现。
background-attachment: fixed || scroll || local
默认情况下,此属性取值scroll,页面滚动时,内容和背景一起运动,如果取值fixed,背景相对浏览器固定。借用Alloy Team的博文《视差滚动的爱情故事》的图片和背景,来看看效果。
每当我加班凌晨,独自一人走在黑暗的回家路上
我会想起那天夕阳下的奔跑
那是我逝去的,青春
css非常简单,
/*统一设置背景的background-attchment属性*/
.article{
width: 960px;
margin: 0 auto;
height: 800px;
padding: 40px;
font: 24px/1.5 'Microsoft YaHei';
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
line-height:400px;
}
/*分别给每个部分设置不同的背景和颜色*/
.section1{
color: white;
background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg);
}
.section2{
color: #FF8500;
background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg);
}
.section3{
color: #747474;
background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg);
}
4.2 加上动画
上面的效果略显呆板,我们在页面滚动的时候,给文字加点动画,看效果。我们来侦听一下scroll事件,当页面滚动某个地方时(),我们给元素添加动画。
var articleHeight =800;
var section1 = document.getElementById('section1'),
section2 = document.getElementById('section2'),
section3 = document.getElementById('section3');
window.addEventListener('scroll',scrollHandler);
function scrollHandler(e){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 0 && scrollTop < articleHeight){
section1.classList.add('anim');
}else if(scrollTop >= articleHeight && scrollTop < articleHeight*2){
section2.classList.add('anim');
}else if(scrollTop >= articleHeight*2 && scrollTop < articleHeight*3){
section3.classList.add('anim');
}
}
html和css也要进行一些修改
/*统一设置背景的background-attchment属性*/
.article{
width: 960px;
margin: 0 auto;
height: 800px;
padding: 40px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
font: 24px/1.5 'Microsoft YaHei';
line-height:400px;
text-indent:-25em;
}
/*分别给每个部分设置不同的背景和颜色*/
.section1{
color: white;
background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg);
}
.section2{
color: #FF8500;
background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg);
}
.section3{
color: #747474;
background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg);
}
.anim{
-webkit-transition : all 1s ease-in;
-moz-transition : all 1s ease-in;
-ms-transition : all 1s ease-in;
transition : all 1s ease-in;
text-indent:3em;
}
4.3 背景运动
刚刚两个情况只是背景保持fixed的状态,我们可以给包括背景在内的多层次元素添加运动,从而实现视差滚动。多背景时,需要确保上面的背景是透明的。看看nettuts上的一个效果,研究研究,看看实现过程。
html文件里面使用了data-speed和data-type向js里传递参数。
I am Absolute Positioned
Simple Parallax Scroll
CSS文件,
#home {
background: url(http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/home.jpg) 50% 0 no-repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}
#about {
background: url(http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/about.jpg) 50% 0 no-repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}
/* Introduction */
#home article {
background: url("http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/intro.png") no-repeat scroll center top transparent;
height: 458px;
position: absolute;
text-indent: -9999px;
top: 291px;
width: 100%;
}
#about article {
background: url("http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/parallax.png") no-repeat scroll center top transparent;
height: 458px;
position: absolute;
text-indent: -9999px;
top: 291px;
width: 100%;
}
javascript,这里用到了jquery
$(document).ready(function () {
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function () {
var $bgobj = $(this); // assigning the object
$(window).scroll(function () {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% ' + yPos + 'px';
// Move the background
$bgobj.css({
backgroundPosition: coords;
});
}); // window scroll Ends
});
});
5.教程、插件、欣赏
视差滚动效果
请大家参阅一下资源
Alloy Team的《视差滚动的爱情故事》
完工!
感谢阅读,希望可以为您带来些许帮助!
php页面 背景不动,页面滚动背景图片不动的原理及实现相关推荐
- 如何让背景图片固定在中间,滚动内容图片不动?
实例 如何设置固定的背景图像: body { background-image: url(bgimage.gif); background-attachment: fixed;} 定义和用法 back ...
- html怎么制作固定背景,使用CSS制作的页面背景固定和滚动效果
HTML HTML结构很简单,一个class为.cd-fixed-bg的div元素用于放置固定背景图,一个class为.cd-scrolling-bg的div元素用于滚动的部分.我们可以放置多个.cd ...
- html背景自动换,html页面换皮肤颜色、背景图片(更换页面背景,常驻缓存)刷新保存...
利用样式文件,使网页能够更换不同的主题风格,这个只是简单的小列子,更换了背景图,和字体颜色,更换主题的基本原理是这样的.通过更改,link标签里的href属性,加载不同的样式文件.这里还用到了一款JQ ...
- vue在html中写style,vue开发之style(六)(CSS页面布局之样式、背景、文字)
最近在学vue开发,并且将学习笔记与大家一起分享,前面讲了vue环境的搭建: 基于vscode的Vue前端环境搭建问题及解决办法 还有vue的使用,重点就在webpack这个: vue开发之webpa ...
- 背景图页面缩小会变形_CSS 实现背景图尺寸不随浏览器缩放而变化
一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 这样做的好处是,比如当你在1024*768px分辨率的屏幕上看到完整的背景,再换至1280*800px ...
- 怎么让背景铺满整个页面_css新手教程之背景图充满整个屏幕
想让整个界面有一个背景图片,自然想到的是在body上加background,代码如下: body { width:100%: height: 100%; /* 加载背景图 */ background: ...
- WPS文字怎么设置页面如分隔符、背景、页面边框等等
Word文档如何设置页面想必大家已经很娴熟了,那么在WPS文字中又该如何设置页面呢?WPS文字除了具备Word中的页边距.纸张.版式和文档网格等设置外,更提供了分隔符.分栏.行号.背景.页面边框.文字 ...
- Android实现暗透明背景的页面
项目要求做一个对话框样式的页面,仅页面上的文字和按钮可见,背景效果和对话框类似.下面看看怎么实现: 方案一: 首先实现一个继承自对话框样式的主题: <style name="DarkT ...
- unity实现图片轮播效果_unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
- H5 背景特效 可用作背景 登录等页面
1.页面跟随鼠标的滑动出现特效 可以选不同的特效样式 2.黑客帝国类型的流动代码下落特效 3.下载APP特效 4.下载不同版本的app特效背景 动态页面 https://download.csdn.n ...
最新文章
- VMWare快捷键大全
- iOS Hacker 重签名实现无需越狱注入动态库 dylib
- 惠普在笔记本新品的2007新的命名规则
- How to change the text color in the terminal
- dom4j-2.1.1 jaxen-1.1.6 读取xml数据源
- java开发岗位招聘,吊打面试官
- 【数据湖存储】数据湖的终极奥秘,无招胜有招
- VMweare 典型创建 Kali Linux 虚拟机
- HDU-1540 Tunnel Warfare 线段树最大连续区间 或 STL巧解
- RabbitMQ官方教程一 Hello World!
- Windows Server 2008更新后不断重启的问题
- 如何在 Mac 中对文档进行签名?
- [NOI2006]神奇口袋
- access注入及工具使用
- 使用poi解析word转html,并处理word中图片
- 混淆矩阵 confusion matrices
- 如何通过分析网页源码下载淘宝教育视频
- Oracle的 alter table table_name nologging; 的使用
- DDraw的离屏blt
- c语言程序设计火车站售票系统,C语言程序--火车站售票系统程序
热门文章
- 计蒜课/百度的年会游戏(枚举)
- svn failed to run the WC DB
- 赖特 因果分析_那个时候,赖特会把你放在查尔斯·达尔文的鞋子上
- 暑假实习——微信小商城
- ABLIC推出业界超小型(*1)车载用高侧开关S-19682/3系列 具摄像头/天线连接诊断功能
- python免费教程视频-python视频教程免费下载,百度云网盘资源,全套!
- 新病毒王“永恒之石”来袭 一次用了7个NSA漏洞
- 整理好的凯斯西储大学轴(CWRU)承数据集
- DEFAULT.DTF问题
- 基于特征向量的主成分分析(PCA)原理解释