纯CSS中非全宽div的视差滚动

Question

我有两个并排的div，它们不是页面上的全宽。左边的div包含背景图像，而右边的div将包含文本等。左边的高度基于右边的内容量，但两者的宽度相等。

我的目标是让他们做一种视差滚动，左边的div移动得比右边快。此外，我希望左边的背景图像稍微向相反的方向移动，这样图像本身就可以滚动到视图中，直到它的中心。

我已经使用javascript实现了这个版本，并对滚动事件执行操作。然而，我觉得这不是一个有效的方法，因为滚动被经常调用，而且这段html可能多次出现在同一页面上。调节器/去模糊器不是一个选项，因为它会对动画的平滑度产生负面影响。此外，我开始看到移动和桌面视图之间的差异在某些地方逐渐显现。在CSS中很容易覆盖这一点的地方，JS/JQuery更麻烦因此，我想知道是否可以只使用CSS来实现这种效果

我看过很多纯粹使用CSS的视差教程，但我看到的几乎所有教程都是针对页面宽度项目的，我很难将其翻译成更小的块。我能得到的最好的结果是背景图像是视差的，在那里你可以看到它滚动，但容器块本身实际上并没有移动任何不同。

如果您能提供任何纯CSS和CSS动画的帮助，我们将不胜感激。

当前使用JS的代码：JSFiddle或

function parallaxScroll() {
var parallaxElement = $(".imageside"),
parallaxQuantity = parallaxElement.length;
window.requestAnimationFrame(function () {
for (var i = 0; i < parallaxQuantity; i++) {
var currentElement = parallaxElement.eq(i),
windowTop = $(window).scrollTop(),
elementTop = currentElement.offset().top,
elementHeight = currentElement.height(),
viewPortHeight = window.innerHeight * 0.5 - elementHeight * 0.5,
scrolled = windowTop - elementTop + viewPortHeight,
wrapperScrolled = scrolled * -0.4,
backgroundScrolled = scrolled * 0.15;
if (backgroundScrolled <= 0) {
currentElement.css({
transform: "translateY(" + scrolled * -0.4 + "px)" //Make image div scroll up the way. 
});
currentElement.css('background-position-y', scrolled * 0.3); //Put background image the opposite way to create animation effect.
}
else {
currentElement.css({
transform: "translateY(" + scrolled * -0.4 + "px)" //Make image div scroll up the way.  
});
}
}
});
}

$(window).on("load scroll", function () {
parallaxScroll();
});

.demo-wrapper {
padding: 500px 20px;
}
.row {
display: flex;
}

.column {
flex: 1;
position: relative;
}
.right-side-wrapper {
background-color: #E5E5E5;
}

.imageside {
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
.right-side {
background-color: #E5E5E5;
margin: 50px 50px;
text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="demo-wrapper">
<div class="row">
<div class="column">
<div class="imageside" style="background-image: url(https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg);"></div>
</div>


<div class="column right-side-wrapper">
<div class="right-side">
<h2 class="quote-title"></h2>

<div class="right-side-item quote-wrapper">
<blockquote class="quoted-text">
Lorem ipsumdas d ds asd asd asd 
asd asda dasdasd a
as dasd asdsd a
</blockquote>
</div>
</div>
</div>
</div>
</div>

Answer 1

我认为这是不可能的，因为我们没有基于滚动位置的单元
您可以使用某些样式更改元素的方向(例如转换(，但不能通过滚动来移动它