20.css实现视差滚动——软设问题总结

• 20.1 视差滚动
• 20.2 视差滚动主要要点
• 20.3 代码

20.1 视差滚动

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

20.2 视差滚动主要要点

1. 把背景的宽高铺满一个浏览器可视区：
   width = 100%; height = 浏览器可视高度
2. 将背景设置为相对于视口固定：
   background-attachment: fixed;

20.3 代码

    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

        * { 
            margin: 0;
            padding: 0;
        }
        
        div { 
            width: 100%;
            background: url(1.jpg) no-repeat center;
            background-attachment: fixed; /*背景设置为相对于视口固定*/
            background-size: cover;
        }
        
        .two { 
            background-image: url(2.jpg);
        }
        
        .three { 
            background-image: url(3.jpg);
        }

//js版本 将每个div的高度设置为浏览器可视窗口的高度
        let divs = document.querySelectorAll('div');
        for (let i = 0; i < divs.length; i++) { 
            divs[i].style.height = window.innerHeight + 'px';
        }

//jQuery版本 将每个div的高度设置为浏览器可视窗口的高度
	    $(function() { 
            $('div').css("height", window.innerHeight + 'px');
        })

本文地址：https://blog.csdn.net/piaoliangj/article/details/113964330