Ниже приведен демонстрационный код, который полностью представляет действительный код
Я поместил некоторый контент на красный div, который я хочу, чтобы пользователи видели при загрузке страницы. Проблема в том, что я использую scrollmagi c. js анимации на этой странице. Все работало идеально, но когда я попытался использовать smoothscroll , функции .setPin scrollmagi c перестали работать. Анимации все еще работают, но красный div прокручивается вместе с другими элементами. Я хочу, чтобы красный div оставался на своем месте, пока анимация не закончилась sh. плавная прокрутка выдвигает красный div вдоль других делений до завершения анимации.
Можете ли вы помочь мне расположить зеленый и синий div под красным один, в то время как позиция красного div фиксирована и остается чувствительной, так что все будет работать на всех размерах экрана?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Code</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
</head>
<style>
.viewport {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.scroll-container {
position: absolute;
overflow: hidden;
z-index: 10;
display: flex;
justify-content: center;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.div1 {
width: 70%;
height: 70vh;
border: 5px solid red;
position: fixed;
transform: translateX(20%);
}
.div2 {
width: 70%;
height: 70vh;
border: 5px solid green;
transform: translateX(20%);
}
.div3 {
width: 70%;
height: 70vh;
border: 5px solid blue;
transform: translateX(20%);
}
</style>
<body>
<div class="div1"></div>
<div class="viewport">
<div id="scroll-container">
<div class="div2"></div>
<div class="div3"></div>
</div>
</div>
</body>
<script>
var html = document.documentElement;
var body = document.body;
var scroller = {
target: document.querySelector("#scroll-container"),
ease: 0.05, // <= scroll speed
endY: 0,
y: 0,
resizeRequest: 1,
scrollRequest: 0,
};
var requestId = null;
TweenLite.set(scroller.target, {
rotation: 0.01,
force3D: true
});
window.addEventListener("load", onLoad);
function onLoad() {
updateScroller();
window.focus();
window.addEventListener("resize", onResize);
document.addEventListener("scroll", onScroll);
}
function updateScroller() {
var resized = scroller.resizeRequest > 0;
if (resized) {
var height = scroller.target.clientHeight;
body.style.height = height + "px";
scroller.resizeRequest = 0;
}
var scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;
scroller.endY = scrollY;
scroller.y += (scrollY - scroller.y) * scroller.ease;
if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
scroller.y = scrollY;
scroller.scrollRequest = 0;
}
TweenLite.set(scroller.target, {
y: -scroller.y
});
requestId = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
}
function onScroll() {
scroller.scrollRequest++;
if (!requestId) {
requestId = requestAnimationFrame(updateScroller);
}
}
function onResize() {
scroller.resizeRequest++;
if (!requestId) {
requestId = requestAnimationFrame(updateScroller);
}
}
</script>
</html>