滚动视觉差

最新推荐文章于 2022-04-20 01:12:23 发布

望京十三兄

最新推荐文章于 2022-04-20 01:12:23 发布

阅读量1.5k

点赞数

文章标签：滚动视差

本文链接：https://blog.csdn.net/qq_27401917/article/details/81216340

版权

什么是滚动视觉差呢？

视差滚动是从英文（Parallax Scroller）翻译过来，是近年来比较流行的一些网页设计应用，它是利用多层背景加上利用鼠标拖动滚动条来形成一些像动画一样的视觉效果，非常有感觉。

应用实例

线上demo ：https://codyhouse.co/demo/alternate-fixed-scroll-background/index.html

下面说说实现方式。。。。。
监听滚动事件产生视觉差
早期大部分视差滚动效果的实现就是监听滚动事件，然后控制图片滚动的距离与真正滚动的距离产生偏差。滚动事件是前提，然后要么是直接改变图片位置，要么使用了背景图片，改变背景图片的 background-position，不过实际上这种方法是存在缺陷的。

监听滚动事件，要想做到尽可能地流畅渲染效果，就不可以让滚动事件节流防抖动(Throttle debounce Immediate)，必须要时刻紧跟滚动事件才行，显然是有些耗费性能的。
JS是单线程的，存在事件轮询概念，滚动事件并不一定会立刻在滚动的每一帧执行，这取决于主线程是否繁忙，也就是说并不能保证视差滚动与页面滚动位置同步。
改变一个非绝对定位元素的位置，是很有可能会触发页面的重绘，而改变 background-position 同样是会出现这种情况，比较 耗费性能，会对动画造成明显的破坏。

纯CSS 实现

基于高清大图

一、background-attachment属性的使用

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>滚动视觉差示例</title>
    <style>
        *{
            padding:0;
            margin:0
        }
        body{
            text-align:center;
            /*background-attachment:fixed;*/
        }
        #main{
            width: 1280px;
            margin:auto
        }
        .header{
            background:#fff;
            padding: 0;
            /*height: 500px;*/
        }
        .bg-attachment{
            background:url("https://50jia-website.oss-cn-beijing.aliyuncs.com/MB/mbimgs/MB_01.png") center center no-repeat;
            background-size: 750px 1356px;
            /*box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;*/
            /*-webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;*/
            /*-moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;*/
            /*-o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;*/
            /*-ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;*/
            background-attachment:fixed;
        }
        .bg-attachment .shadow{
            display: flex;
            align-items: center;
            justify-content: center;
            width:60%;
            height:500px;
            overflow:hidden;
            margin:auto;
            color: blue;
            background: rgba(0,0,0,.3);
        }
        .div2{
            background:url("https://50jia-website.oss-cn-beijing.aliyuncs.com/tuiguang/qz0721/M_05.jpg") center center repeat-y;
            background-attachment:fixed;
        }
    </style>
</head>
<body>
<div id="main">
    <div class="header">
        <img src="https://50jia-website.oss-cn-beijing.aliyuncs.com/tuiguang/qz0721/M_01.jpg">
    </div>
    <div class="bg-attachment">
        <div class="shadow">
            往shadow里面写一写字是什么效果呢
        </div>
    </div>
    <div class="header">
        <img src="https://50jia-website.oss-cn-beijing.aliyuncs.com/tuiguang/qz0721/M_04.jpg">
    </div>
    <div class="bg-attachment div2">
        <div class="shadow"></div>
    </div>
</div>
</body>
</html>

二、是 CSS3中的 perspective 以及 translate3D或者 translateZ属性的应用。

// html
<div class="container">
<div class="box2">正常滚动元素</div>
<div class="box1">视觉差元素</div>
</div>

// CSS
.container { width: 300px; height: 400px; overflow-y: scroll;
// 主要是下面这句
perspective: 1px; background-color: pink;}
.box1 {width: 100px; height: 300%;
// 主要是下面这句
transform: translateZ(-2px) scale(3);
background-color: skyblue; }
.box2 { width: 100px; height: 300%; background-color: indianred; float: right; }

真正产生视觉差关键的属性就两句，分别在 container父容器中和视觉差元素中，其中，transform: translateZ(-2px) scale(3);中，translateZ(-2px)让元素拥有透视效果，而 scale(3)则是为了保证元素不因为透视而产生视觉上的缩放效果才设置的，这里的数字3，可根据以下公式计算得来：
（透视距离-移动距离）/ 透视距离

这里的透视距离就是父容器中 perspective: 1px;中的 1，移动距离指的是在 z轴上的移动距离，也就是 translateZ(-2px)中的 -2，由此得到了 3，这样就能保证视觉差元素不缩放变形。

视觉差元素经过 3D变换后，视觉上的位置发生了偏移，为了保持元素停留在原先的位置上，我们可以为父容器container设置 perspective-origin属性，并且同时为 box1设置 translate-origin，以保证缩放原点与透视原点保持同步。

另外，需要注意的是， perspective 和 perspective-origin作用的元素并不是设置了这两个属性的元素本身，而是作用在这个元素的子元素上，也就是说其子元素才能获得透视效果，并且这两个属性只影响 3D转换元素，例如 translateZ 或者translate3D。

三、一个开箱即用的 jQuery插件 parallax.js

四、还有一个由 GoogleChrome出品的原生JS库 parallax.js

文章引用 https://blog.csdn.net/DeepLies/article/details/76648854

望京十三兄

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
滚动视觉差

什么是滚动视觉差呢？视差滚动是从英文（Parallax Scroller）翻译过来，是近年来比较流行的一些网页设计应用，它是利用多层背景加上利用鼠标拖动滚动条来形成一些像动画一样的视觉效果，非常有感觉。应用实例 http://www.putzengel.at/ http://wootten.com.au/process/线上demo ：https://codyhou...
复制链接

扫一扫