HTML/JS:暂停垂直滚动并为元素设置动画
HTML/JS: Pause vertical scrolling and animate an element instead
我的网站包含一个水平溢出的 <div>
元素。当用户从上到下垂直滚动网站时,我希望 div 从左到右水平滚动。在那个阶段,主要内容不应该移动,只有 div 应该滚动。一旦 div 完全向右滚动,网站的垂直滚动应该会继续正常进行。反过来也应该如此。
我尝试将 ScrollMagic 与固定结合使用,但是在尝试固定主内容容器时遇到卡顿问题:
https://codepen.io/oelrim/pen/ZEGWvOK
有没有其他插件可以达到我想要的效果?
试试这个:
var scene = document.querySelector('#sec-2');
var rect = document.querySelector('#rect');
var startEffect = scene.getBoundingClientRect().top + window.scrollY;
var effectLength = 500;
scene.style.marginBottom = effectLength +'px';
window.addEventListener('scroll', function(e){
var effect = window.scrollY - startEffect;
if(effect > 0 && effect < effectLength) {
scene.style.marginTop = effect+'px';
scene.style.marginBottom = effectLength-effect+'px';
rect.style.left = effect * (scene.offsetWidth-rect.offsetWidth) /effectLength+'px';
} else if (effect < 0) {
scene.style.marginTop = 0;
scene.style.marginBottom = effectLength+'px';
rect.style.left = 0;
} else {
scene.style.marginTop = effectLength+'px';
scene.style.marginBottom = 0;
rect.style.left = (scene.offsetWidth-rect.offsetWidth)+'px';
}
});
html, body {padding:0;margin:0}
#sec-1 {
height: 100vh;
background: repeating-linear-gradient(yellow 0, yellow 10px, green 10px, green 20px);
}
#sec-2 {
position: relative;
height: 100vh;
background: repeating-linear-gradient(red 0, red 10px, green 10px, green 20px);}
#sec-3 {
height: 100vh;
background: repeating-linear-gradient(red 0, red 10px, blue 10px, blue 20px);}
h1 {
color: white;
text-shadow: 2px 2px 3px black, -2px -2px 3px black;
margin: 0;
}
#rect {
position: absolute;
width: 60px;
height: 60px;
background-color: white;
top: calc(50% - 30px);
left: 0;
}
<div id="sec-1">
<h1>This is section 1</h1>
</div>
<div id="sec-2">
<h1>This is section 2</h1>
<div id="rect"></div>
</div>
<div id="sec-3">
<h1>This is section 3</h1>
</div>
我的网站包含一个水平溢出的 <div>
元素。当用户从上到下垂直滚动网站时,我希望 div 从左到右水平滚动。在那个阶段,主要内容不应该移动,只有 div 应该滚动。一旦 div 完全向右滚动,网站的垂直滚动应该会继续正常进行。反过来也应该如此。
我尝试将 ScrollMagic 与固定结合使用,但是在尝试固定主内容容器时遇到卡顿问题:
https://codepen.io/oelrim/pen/ZEGWvOK
有没有其他插件可以达到我想要的效果?
试试这个:
var scene = document.querySelector('#sec-2');
var rect = document.querySelector('#rect');
var startEffect = scene.getBoundingClientRect().top + window.scrollY;
var effectLength = 500;
scene.style.marginBottom = effectLength +'px';
window.addEventListener('scroll', function(e){
var effect = window.scrollY - startEffect;
if(effect > 0 && effect < effectLength) {
scene.style.marginTop = effect+'px';
scene.style.marginBottom = effectLength-effect+'px';
rect.style.left = effect * (scene.offsetWidth-rect.offsetWidth) /effectLength+'px';
} else if (effect < 0) {
scene.style.marginTop = 0;
scene.style.marginBottom = effectLength+'px';
rect.style.left = 0;
} else {
scene.style.marginTop = effectLength+'px';
scene.style.marginBottom = 0;
rect.style.left = (scene.offsetWidth-rect.offsetWidth)+'px';
}
});
html, body {padding:0;margin:0}
#sec-1 {
height: 100vh;
background: repeating-linear-gradient(yellow 0, yellow 10px, green 10px, green 20px);
}
#sec-2 {
position: relative;
height: 100vh;
background: repeating-linear-gradient(red 0, red 10px, green 10px, green 20px);}
#sec-3 {
height: 100vh;
background: repeating-linear-gradient(red 0, red 10px, blue 10px, blue 20px);}
h1 {
color: white;
text-shadow: 2px 2px 3px black, -2px -2px 3px black;
margin: 0;
}
#rect {
position: absolute;
width: 60px;
height: 60px;
background-color: white;
top: calc(50% - 30px);
left: 0;
}
<div id="sec-1">
<h1>This is section 1</h1>
</div>
<div id="sec-2">
<h1>This is section 2</h1>
<div id="rect"></div>
</div>
<div id="sec-3">
<h1>This is section 3</h1>
</div>