前几天, 在网上看到视差滚动的网站, 感觉特别帅, 就尝试着自己仿照写了一部分, 前几天已经发表过一篇关于滚动的文章, 今天有简单的整理了一下
思路: 1. 布局, 将要滚动的元素都已 fixed 的布局
2. 主要分为三层: 背景层, 贴图层, 内容层, 背景层的滚动 (最慢), 贴图层(内容层和背景层之间的元素) 的滚动(次慢), 内容层的滚动(可以和页面的滚动速度一致)
3. 滚动的速度主要可以自己设置参数来改变
详细可以查看: https://notes/18271/61d0f7f795001826685012994b8a2832.html
效果:
HTML 代码
html 代码
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title > 错位移动不只背景</title>
- <style type="text/CSS">
- *{
- margin:0;
- padding:0;
- border:0;
- }
- body{
- height:2000px;
- }
- .para,.para2,.para3,.para4{
- width:100%;
- height:800px;
- position:relative;
- }
- .content{
- position:absolute;
- z-index:999;
- top:50%;
- left:5%;
- transform:translate(0,-50%);
- width:600px;
- height:400px;
- background:rgba(255,0,0,1);
- color:#fff;
- overflow:hidden;
- }
- .screen{
- z-index: 998;
- position: absolute;
- width: 100%;
- height: 800px;
- }
- .screena{
- z-index: 997;
- position: absolute;
- width: 100%;
- height: 800px;
- }
- </style>
- <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
- <script type="text/javascript">
- (function($){
- var $window=$(window);
- var windowHeight=$window.height();
- $window.resize(function(){ // 屏幕大小改变时, 触发
- windowHeight=$window.height();
- });
- $.fn.parallax=function(options){
- var defaults={
- xpos:"50%",
- speedFactor:0.1
- };
- if(options){
- $.extend(defaults,options);
- }
- var $this=$(this);
- var getHeight;
- $this.each(function(index, element) { // 给每个元素添加背景以及样式
- image_url=$this.data("source-url");
- $this.css({"backgroundImage":"url("+image_url+")","background-attachment":"fixed","backgroundRepeat":"no-repeat"});
- });
- update();
- getHeight=function(jq){
- return jq.outerHeight(); // 获取元素的宽度
- }
- function update(){
- var pos=$window.scrollTop(); // 获取滚动条滚动的高度
- $this.each(function(){
- var $elem=$(this);
- var top=$elem.offset().top; // 获取元素距离顶部的距离
- $this.css("backgroundPosition",defaults.xpos+""+Math.round((top-pos)*(defaults.speedFactor))+"px");// 动态设置距离高度
- });
- }
- $window.bind("scroll",update).resize(update); // 绑定滚动事件
- }
- })(jQuery);
- </script>
- <script type="text/javascript">
- $(function(){
- $(".para").parallax({xpos:"50%",speedFactor:0.1});
- $(".para2").parallax({xpos:"50%",speedFactor:0.1});
- $(".para3").parallax({xpos:"50%",speedFactor:0.1});
- $(".para4").parallax({xpos:"50%",speedFactor:0.1});
- $(".para .screen").parallax({xpos:"50%",speedFactor:-0.5});
- $(".para2 .screen").parallax({xpos:"50%",speedFactor:-0.5});
- $(".para3 .screen").parallax({xpos:"50%",speedFactor:-0.5});
- $(".para4 .screen").parallax({xpos:"50%",speedFactor:-0.5});
- $(".para4 .screena").parallax({xpos:"50%",speedFactor:-0.5});
- });
- </script>
- </head>
- <body>
- <div class="para" data-source-url="http://cdn.attach.qdfuns.com/notes/pics/201611/11/151959fk785n6hnktjhk8n.jpg">
- <div class="content">
大家好久好久放贷款将快速返回结果决定飞机快睡觉时方可恢复就会对房价开始
- </div>
- <div class="screen" data-source-url="http://cdn.attach.qdfuns.com/notes/pics/201611/11/152302bcabckccobkapatq.png"></div>
- <div style="width: 100%;height: 400px;background: rgba(255,255,255,0.7);position: absolute;top:400px;z-index: 999999;">sssssssssssssss</div>
- </div>
- <div class="para2" data-source-url="http://cdn.attach.qdfuns.com/notes/pics/201611/11/152015q08b6za91han98qa.jpg">
- <div class="content">
大家好久好久放贷款将快速返回结果决定飞机快睡觉时方可恢复就会对房价开始
- </div>
- <div class="screen" data-source-url="http://cdn.attach.qdfuns.com/notes/pics/201611/11/152307vo3q1jtxjzsdejtq.png"></div>
- </div>
- <div class="para3" data-source-url="http://cdn.attach.qdfuns.com/notes/pics/201611/11/151959fk785n6hnktjhk8n.jpg">
- <div class="content">
大家好久好久放贷款将快速返回结果决定飞机快睡觉时方可恢复就会对房价开始
- </div>
- <div class="screen" data-source-url="http://cdn.attach.qdfuns.com/notes/pics/201611/11/152316z2gkaa8hha8a29ke.png"></div>
- </div>
- <div class="para4" data-source-url="http://cdn.attach.qdfuns.com/notes/pics/201611/11/152015q08b6za91han98qa.jpg">
- <div class="content">
大家好久好久放贷款将快速返回结果决定飞机快睡觉时方可恢复就会对房价开始
- </div>
- <div class="screen" data-source-url="http://cdn.attach.qdfuns.com/notes/pics/201611/11/152320chzrhnnhq36gbb6r.png"></div>
- <div class="screena" data-source-url="http://cdn.attach.qdfuns.com/notes/pics/201611/11/152323ywwbbzp0xq9qrl0x.png"></div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/18271/7d43b3e0aaf65ad80a100f29907c3277.html