如何在屏幕上可见 div 应用视差滚动
How to apply Parallax Scroll in div visible on screen
我有多个 div 里面有图片。我想将视差应用于 div 内的图像。
但是,如果我将视差滚动设置为图像,则屏幕底部的图像会在 div 内变成白色 space,因为图像向上滚动到高处。
到目前为止,这是我的代码。
HTML
<div class="workImg">
<img class="inWorkImg" src="img/08.png"/>
</div>
<div class="workImg">
<img class="inWorkImg" src="img/09.png"/>
</div>
<div class="workImg">
<img class="inWorkImg" src="img/10.png"/>
</div>
<div class="workImg">
<img class="inWorkImg" src="img/11.png"/>
</div>
CSS
.workImg{
position: absolute;
width: 80%;
height: 230px;
bottom: 15px;
overflow: hidden;
}
.inWorkImg {
object-fit: cover;
height: 110%;
}
JQUERY
var parallaxElements = $('.inWorkImg'),
parallaxQuantity = parallaxElements.length;
var visible = isInViewport(this)
$(window).on('scroll', function () {
if(visible) {
window.requestAnimationFrame(function () {
for (var i = 0; i < parallaxQuantity; i++) {
var currentElement = parallaxElements.eq(i);
var scrolled = $(window).scrollTop();
currentElement.css({
'transform': 'translate3d(0,' + scrolled * -0.06 + 'px, 0)'
});
}
});
}
});
实际上你不必为此使用 jQuery,而是像那样使用纯 css -
而不是 img
标签,这些 div 将得到一个 background-image
属性.
<div class="workImg1"></div>
<div class="workImg2"></div>
<div class="workImg3"></div>
<div class="workImg4"></div>
而 CSS 看起来像那样 -
.workImg1, .workImg2, .workImg3, .workImg4 {
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.workImg1 {
/* The image used */
background-image: url("IMG_URL");
}
.workImg2 {
/* The image used */
background-image: url("IMG_URL");
}
.workImg3 {
/* The image used */
background-image: url("IMG_URL");
}
.workImg4 {
/* The image used */
background-image: url("IMG_URL");
}
我有多个 div 里面有图片。我想将视差应用于 div 内的图像。 但是,如果我将视差滚动设置为图像,则屏幕底部的图像会在 div 内变成白色 space,因为图像向上滚动到高处。
到目前为止,这是我的代码。
HTML
<div class="workImg">
<img class="inWorkImg" src="img/08.png"/>
</div>
<div class="workImg">
<img class="inWorkImg" src="img/09.png"/>
</div>
<div class="workImg">
<img class="inWorkImg" src="img/10.png"/>
</div>
<div class="workImg">
<img class="inWorkImg" src="img/11.png"/>
</div>
CSS
.workImg{
position: absolute;
width: 80%;
height: 230px;
bottom: 15px;
overflow: hidden;
}
.inWorkImg {
object-fit: cover;
height: 110%;
}
JQUERY
var parallaxElements = $('.inWorkImg'),
parallaxQuantity = parallaxElements.length;
var visible = isInViewport(this)
$(window).on('scroll', function () {
if(visible) {
window.requestAnimationFrame(function () {
for (var i = 0; i < parallaxQuantity; i++) {
var currentElement = parallaxElements.eq(i);
var scrolled = $(window).scrollTop();
currentElement.css({
'transform': 'translate3d(0,' + scrolled * -0.06 + 'px, 0)'
});
}
});
}
});
实际上你不必为此使用 jQuery,而是像那样使用纯 css -
而不是 img
标签,这些 div 将得到一个 background-image
属性.
<div class="workImg1"></div>
<div class="workImg2"></div>
<div class="workImg3"></div>
<div class="workImg4"></div>
而 CSS 看起来像那样 -
.workImg1, .workImg2, .workImg3, .workImg4 {
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.workImg1 {
/* The image used */
background-image: url("IMG_URL");
}
.workImg2 {
/* The image used */
background-image: url("IMG_URL");
}
.workImg3 {
/* The image used */
background-image: url("IMG_URL");
}
.workImg4 {
/* The image used */
background-image: url("IMG_URL");
}