<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动视差实例</title>
<style>
*{margin:0;padding:0;list-style-type:none;}
/* PARALLAX */
.body {
margin: -5px;
}
.keyart, .keyart_layer {
height: 1000px;
}
#parallax {
display: block;
}
.keyart {
position: relative;
z-index: 10;
}
.keyart_layer {
background-position: bottom center;
background-size: auto 1038px;
background-repeat: repeat-x;
width: 100%;
position: absolute;
}
.keyart_layer.parallax {
position: fixed;
}
#keyart-0 {
background-image: url("img/parallax0.png");
background-color: #ffaf1b;
}
#keyart-1 {
background-image: url("img/parallax1.png");
}
#keyart-2 {
background-image: url("img/parallax2.png");
}
#keyart-3 {
background-image: url("img/parallax3.png");
}
#keyart-4 {
background-image: url("img/parallax4.png");
}
#keyart-5 {
background-image: url("img/parallax5.png");
}
#keyart-6 {
background-image: url("img/parallax6.png");
}
#keyart-7 {
background-image: url("img/parallax7.png");
}
#keyart-8 {
background-image: url("img/parallax8.png");
}
#keyart-scrim {
background-color: #ffaf00;
opacity: 0;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
#keyart-0 {
background-image: url("img/parallax0@2x.png");
background-color: #ffaf1b;
}
#keyart-1 {
background-image: url("img/parallax1@2x.png");
}
#keyart-2 {
background-image: url("img/parallax2@2x.png");
}
#keyart-3 {
background-image: url("img/parallax3@2x.png");
}
#keyart-4 {
background-image: url("img/parallax4@2x.png");
}
#keyart-5 {
background-image: url("img/parallax5@2x.png");
}
#keyart-6 {
background-image: url("img/parallax6@2x.png");
}
#keyart-7 {
background-image: url("img/parallax7@2x.png");
}
#keyart-8 {
background-image: url("img/parallax8@2x.png");
}
}
</style>
</head>
<body>
<div class="keyart" id="parallax">
<div class="keyart_layer parallax" id="keyart-0" data-speed="2"></div>
<!-- 00.0 -->
<div class="keyart_layer parallax" id="keyart-1" data-speed="5"></div>
<!-- 12.5 -->
<div class="keyart_layer parallax" id="keyart-2" data-speed="11"></div>
<!-- 25.0 -->
<div class="keyart_layer parallax" id="keyart-3" data-speed="16"></div>
<!-- 37.5 -->
<div class="keyart_layer parallax" id="keyart-4" data-speed="26"></div>
<!-- 50.0 -->
<div class="keyart_layer parallax" id="keyart-5" data-speed="36"></div>
<!-- 62.5 -->
<div class="keyart_layer parallax" id="keyart-6" data-speed="49"></div>
<!-- 75.0 -->
<div class="keyart_layer" id="keyart-scrim"></div>
<div class="keyart_layer parallax" id="keyart-7" data-speed="69"></div>
<!-- 87.5 -->
<div class="keyart_layer" id="keyart-8" data-speed="100"></div>
<!-- 100. -->
</div>
<script>
function castParallax() {
var opThresh = 350;
var opFactor = 750;
window.addEventListener("scroll", function(event) {
var top = this.pageYOffset;
var layers = document.getElementsByClassName("parallax");
var layer, speed, yPos;
for (var i = 0; i < layers.length; i++) {
layer = layers[i];
speed = layer.getAttribute('data-speed');
var yPos = -(top * speed / 100);
layer.setAttribute('style', 'transform: translate3d(0px, ' + yPos + 'px, 0px)');
}
});
}
document.body.onload = castParallax();
</script>
</body>
</html>
html5实现的伴随页面滚动呈现出图片视差滚动效果源码.zip
版权申诉
166 浏览量
2022-11-04
23:39:29
上传
评论
收藏 456KB ZIP 举报
html5实现的伴随页面滚动呈现出图片视差滚动效果源码.zip （9个子文件） 
132689892266570751 img 
parallax8.png 35KB parallax4.png 41KB parallax7.png 56KB parallax2.png 29KB parallax6.png 46KB parallax3.png 108KB parallax1.png 74KB parallax5.png 85KB
index.html 3KB资源评论
