0
我对我制作的视差动画有问题。的效果的原理如下：视差效果 - 去除部分之间的空隙
周围有一个视差元件2层的部分。 如果滚动事件被触发，这个视差元素将被移动。
如何快速的元素将会移动由速度值来定义。此值应介于-1和1之间。因此，如果速度为正值，元素将向下移动，如果为负值，则元素向上移动。
为了防止部分和一个新的高度将为移动元件来计算视差元件之间的间隙中，因此它不会显示出间隙，直到元件不再在视口内可见。
如果速度值为正值且元素向下移动，则此功能正常，但我的问题是：如果将速度更改为负值，则视差元素的高度和位置的计算不再有效，差距仍然存在。
我的想法是，为了这个元素的高度的计算是错误的，因为它太小了，但我不能让它的工作:(
也许你们当中有些人确切地知道问题出在哪里。我真的很感激答案:) 坐在这个问题上好几天。
小提琴：https://jsfiddle.net/xs74pmvq/
预先感谢您。
var parallaxElement = document.querySelector('#parallax-element');
var parallaxContainer = parallaxElement.parentNode;
var containerHeight = parallaxContainer.offsetHeight;
/**
* The speed of the parallax element. Currently ony working
* with positive values.
*
* Change this to -[0-1] to see the gap between the parallax
* element and the surrounding sections.
*
* @todo(Hero): Make negative values working.
*/
var parallaxSpeed = 0.5;
/**
* This calculates the new height of the given parallax element.
* The height is used to fill up the gap between the two sections.
* It allows the parallax element to move without showing a space.
* The height is calculated by the given speed
*/
function setParallaxHeight(element) {
var gapHeight = containerHeight - window.innerHeight;
var newHeight = containerHeight + gapHeight * Math.abs(parallaxSpeed);
// @todo(Hero): Maybe change the calculation for negative speed values.
element.style.height = newHeight + 'px';
}
/**
* This simply sets the translation value of the parallax element.
*/
function updateElement() {
var scrollY = window.scrollY;
var elementOffset = parallaxElement.getBoundingClientRect();
var elementTop = elementOffset.top + scrollY;
/**
* This is the translation value on the y axis. This will start
* the element moving above the lower bound of the viewport after
* the user scrolled to the edge of the element.
*/
var translateY = parallaxSpeed * (scrollY - elementTop);
// @todo(Hero): Maybe change the calculation for negative speed values.
parallaxElement.style.transform = 'translate3d(0,' + translateY + 'px,0)';
}
setParallaxHeight(parallaxElement);
window.onscroll = updateElement;.section {
width: 100vw;
height: 100vh;
}
.section1 {
background-color: gray;
}
.section2 {
height: 1000px;
}
.section3 {
height: 3000px;
background-color: green;
}
.parallax-container {
height: 100%;
width: 100%;
overflow: hidden;
}
#parallax-element {
width: 100%;
height: 50%;
background: url('https://static.vecteezy.com/system/resources/previews/000/093/696/original/vector-yellow-abstract-background.jpg') no-repeat center;
background-size: cover;
}<div class="section section1">Scroll down</div>
<div class="section section2">
<div class="parallax-container">
<div id="parallax-element"></div>
</div>
</div>
<div class="section section3">Section2</div>