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迅雷官网