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>