HTML+CSS实现——精美视差效果图

2022-12-15 146

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本篇文章，主要讲解一下如何创建一个精美视差效果图

精美视差效果

HTML部分（index.html）

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Moon Light</title>
    <link
        rel="stylesheet"
        href="style.css"
    >
</head>
<body>
    <section>
        <img
            src="http://175.178.184.206/usr/uploads/2022/05/681507058.jpg"
            id="bg"
        >
        <img
            src="http://175.178.184.206/usr/uploads/2022/05/878243794.png"
            id="moon"
        >
        <img
            src="http://175.178.184.206/usr/uploads/2022/05/2155695319.png"
            id="mountain"
        >
        <img
            src="http://175.178.184.206/usr/uploads/2022/05/455978369.png"
            id="road"
            road
        >
        <h2 id="text">
            Moon Light
        </h2>
    </section>
    <script>
        let bg = document.querySelector('#bg')
        let moon = document.querySelector('#moon')
        let mountain = document.querySelector('#mountain')
        let road = document.querySelector('#road')
        let text = document.querySelector('#text')
        window.addEventListener('scroll', () => {
            var value = window.scrollY;
            bg.style.top = value * 0.5 + 'px';
            moon.style.left = -value * 0.5 + 'px';
            mountain.style.top = -value * 0.15 + 'px';
            road.style.top = value * 0.15 + 'px';
            text.style.top = value * 1 + 'px';
        })
    </script>
</body>
</html>

CSS部分（style.css）

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #0a2a43;
  min-height: 1500px;
}
section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
section:before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top #0a2a43 transparent);
  z-index: 10000;
}
section:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0a2a43;
  z-index: 10000;
  mix-blend-mode: color;
}
section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
#text {
  position: relative;
  color: #ffffff;
  font-size: 10em;
  z-index: 1;
}
#road {
  z-index: 2;
}