javascript视差的简单介绍
javascript(jq)实现的水平视差滚动效果
水平垂直的原理是一样的,它这个主要是增加了鼠标滚轮事件,其他的没啥特别。
雁塔网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作,到程序开发,运营维护。创新互联公司自2013年创立以来到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。
!doctype html
html
head
meta charset="utf-8" /
title视差滚动/title
style
*{margin: 0;padding: 0;}
body{ }
#bg{width: 100%;background-image: url(trim.jpg);background-size: cover;height: 768px;position: fixed;}
#img1{position: fixed;top: 650px;border: 1px solid #aaa;padding: 4px;background-color: #fff;}
#img2{position: fixed;top: -500px;right: 0px;width: 600px;height: 300px;border: 1px solid #aaa;padding: 4px;background-color: #fff;}
#txt1{top: 400px; position: fixed;font-family: '黑体';font-size: 36px;color: #fff;font-weight: bold;text-shadow: 2px 2px 12px #fff;left: -400px;}
/style
script src="jquery-1.11.1.min.js"/script
/head
body
div id="bg"/div
img id="img1" src="thumb.jpg"
img id="img2" src="535032.jpg"
div id="txt1"纳米尖兵巴德尔/div
div style="height:3000px;"/div
script
window.onscroll=function(){
var ht=document.documentElement.scrollTop || document.body.scrollTop;
$("#bg").css({"background-position":'0px -'+ht/20+'px'});
$("#img1").css({"top":650-ht/2+'px'});
$("#img2").css({"top":-500+ht/2+'px'});
$("#txt1").css({"left":-300+ht/2+'px','opacity':500/ht});
}
/script
/body
/html
这个网页特效是怎么实现的,是javascript写出来的么?能用javascript写出来么?
对元素滚动的次数进行计数:
$("div").scroll(function() {
$("span").text(x+=1);
});
当用户滚动指定的元素时,会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
scroll() 函数触发 scroll 事件。或者如果设置了 function 函数,则规定当发生 scroll
事件时执行的代码。
这是w3c的原版教程。jquery肯定有鼠标滚动事件一层来,你先试着用滚动事件给每个大div做个简单动画,然后再想着做复杂的,其实这个效果就是利用滚动事件让大的DIV移动,然后以DIV对应浏览器的位置播放动画。
CSS滚动视差
何为滚动视差
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的网站应用了这项技术。
通常而言,滚动视差在前端需要辅助 Javascript 才能实现。但是使用background-attachment也可以做到这样的效果。
要了解background-attachment的作用可以参考我的另一篇关于它的简单介绍:
什么是background-attachment
使用background-attachment: fixed实现滚动视差
首先,我们使用background-attachment: fixed来实现滚动视差。fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。
这里的关键在于,即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。也就是说, 背景图从一开始就已经被固定死在初始所在的位置。
我们使用,图文混合排布的方式,实现滚动视差,HTML 结构如下, .g-word表示内容结构,.g-img表示背景图片结构 :
关键 CSS:
效果如下:
嗯?有点神奇,为什么会是这样呢?可能很多人会和我一样,第一次接触这个属性对这样的效果感到懵逼。
我们把上面background-attachment: fixed注释掉,或者改为background-attachment: local,再看看效果:
这次,图片正常跟随滚动条滚动了,按常理,这种效果才符合我们大脑的思维。
而滚动视差效果,正是不按常理出牌的一个效果,重点来了:
当页面滚动到图片应该出现的位置,被设置了background-attachment: fixed的图片并不会继续跟随页面的滚动而跟随上下移动,而是相对于视口固定死了。
好,我们再来试一下, 如果把所有.g-word内容区块都去掉 ,只剩下全部设置了background-attachment: fixed的背景图区块,会是怎么样呢?
效果如下:
结合这张 GIF,相信能对background-attachment: fixed有个更深刻的认识,移动的只有视口,而背景图是一直固定死的。
综上,就是 CSS 使用background-attachment: fixed实现滚动视差的一种方式,也是相对而言比较容易的一种。
参考文章: 滚动视差?CSS 不在话下
如何用 fullPage.js 创建全屏视差滚动单页
this.stage.displayState=StageDisplayState.NORMAL; 最直接的就是把你那个全屏代码删除。。。
有关滚动视差网页的问题
关于视差滚动的剖析:
解剖视差滚动(上集)
解剖视差滚动(下集)【附加qq浏览器页面轻解析】
更多页面鉴赏
Apple - Mac Pro
QQ浏览器 for MAC 官方网站
Mac迅雷官网
分享题目:javascript视差的简单介绍
网页URL:http://pwwzsj.com/article/dsdesss.html