我正在尝试创建一个包含2个div和2个图像的滚动动画。 由于缺乏更好的解释(正如你可能从标题中猜到的那样),我已经a quick animation展示了我想要实现的目标。
here是我之前制作的托管版本。我尝试在视差滚动的帮助下创建效果,但这不是我想要的。 这是Zeit Now部署,因此您可以将/_src附加到网址并查看源代码。
现在我不确定这是否是创建动画的正确方法,说实话我不会知道任何其他方法可以解决这个问题。 所以我并没有要求一个没有任何缺陷的完全成熟的答案(虽然会非常感激),而是在正确的方向上轻推。
答案 0 :(得分:1)
快速做到这一点可能存在一些问题,我试图让变量以某种方式变通用,这样你就可以玩弄东西(查看fiddle)
const body = document.body,
html = document.documentElement;
const targetImg = document.querySelector('.second');
// our image's initial height
const imgHeight = targetImg.clientHeight;
// the final value for image height (at scroll end)
const imgTargetHeight = 0;
// total height of our document
const totalHeight = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
// visible window height
const windowHeight = window.innerHeight;
// starting scroll position we want to start calculations from (at this point and before, our image's height should equal its initial height 'imgHeight')
const fromScroll = 0;
// final scroll position (at this point and after, our image's height should equal 'imgTargetHeight')
const toScroll = totalHeight - windowHeight;
window.addEventListener('scroll', function() {
// get current scroll position, these multiple ORs are just to account for browser inconsistencies.
let scrollPos = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
// force the scroll position value used in our calculation to be between 'fromScroll` and 'toScroll'
// In this example this won't have any
// effect since fromScroll is 0 and toScroll is the final possible scroll position 'totalHeight - windowHeight',
// but they don't have to be, try setting fromScroll = 100 and toScroll = totalHeight - windowHeight - 100 for example to see the difference.
// the next line is just a shorthand for:
// if (scrollPos <= fromScroll) {
// scrollPos = fromScroll;
// } else if (scrollPos >= toScroll) {
// scrollPos = toScroll;
// } else {
// scrollPos = scrollPos;
// }
scrollPos = scrollPos <= fromScroll ? fromScroll : (scrollPos >= toScroll ? toScroll : scrollPos);
// our main calculation, how much should we add to the initial image height at our current scroll position.
const value = (imgTargetHeight - imgHeight) * (scrollPos - fromScroll) / (toScroll - fromScroll);
targetImg.style.height = imgHeight + value + "px";
});
.container {
height: 200vh;
}
.img-container {
position: fixed;
width: 100vw;
height: 100vh;
text-align: center;
background: white;
overflow: hidden;
}
.second {
background: tomato;
}
img {
position: absolute;
left: 50vw;
top: 50vh;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="img-container first">
<img src="https://fixedscrollingtest-takidbrplw.now.sh/luigi.png" alt="">
</div>
<div class="img-container second">
<img src="https://fixedscrollingtest-takidbrplw.now.sh/mario.png" alt="">
</div>
</div>