CSS3实现滚动视觉差效果

在网上看到过一个比较有趣的动画效果实现，就趁空闲时间也做着玩玩，顺便回顾下css3的一些相关属性。

css滚动视差.gif

1、背景图的相关css3属性

• background-size：规定背景图片的尺寸
• background-position： 属性设置背景图像的起始位置，其中x% y%中的第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%，如果仅规定了一个值，另一个值将是 50%。
• ackground-origin： 属性规定 background-position 属性相对于什么位置来定位
• background-image： 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角

重点属性

• background-clip： 属性规定背景的绘制区域
  

  MDN.png
  MDN.png

• text-fill-color：text-fill-color是CSS3中的属性，表示文字颜色填充，主要是用来做镂空文字或者是那种渐变的文字效果的，目前仅webkit核心的浏览器下支持此属性，类似的还有一个属性就是text-stroke，这个属性是指的文本描边。

• font：font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写

2、HTML代码片段

<div class="background"><span>Learn</span></div>

3、CSS片段

            html,
            body {
                margin: 0;
                padding: 0;
                height: 200vh;
                overflow-x: hidden;
            }

            .background {
                background-image: url(img/dep.jpeg);
                background-size: cover;
                background-position: 50% 80%;
                height: 200vh;
                line-height: 200vh;
                font: 600 20rem '';
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                position: relative;
                text-align: center;
                overflow: hidden;
            }

            .background::before {
                content: '';
                background-size: cover;
                background-image: inherit;
                background-position: 50% 80%;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                z-index: -99;
            }

3、JavaScript部分

        const background = document.querySelector('.background');
        // 给文档添加滚动事件
        document.addEventListener('scroll', () => {
            var scrollY = window.scrollY;  
            // debugger
            if (scrollY !== 0) {
                background.style.backgroundPosition = `calc(50% + ${scrollY}px) calc(50% + ${scrollY}px)`;
            } else {
                background.style.backgroundPosition = '';
            }
        })