1
私は視差効果を作成しようとしています。それによって、絶対配置された子要素は、スクロール時の親の速度よりも遅い速度で移動する必要があります。視差効果 - スクロールで親に対する子オフセットを計算する
子は常に親の130％の高さになりますが、親は任意の高さになります
HTML：
<div class="parallax-window lg">
<div class="parallax-image image-1"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window">
<div class="parallax-image image-2"></div>
<div class="parallax-content">Hello World</div>
</div>CSS：
.parallax-window {
min-height: 300px;
position: relative;
overflow: hidden;
}
.parallax-window.lg {
min-height: 600px;
}
.parallax-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
transform: translate3d(0, 0, 0);
z-index: -1;
}
.image-1 {
background-image: url(https://i.ytimg.com/vi/TbC-vUPMR7k/maxresdefault.jpg);
}
.image-2 {
background-image: url(https://i.ytimg.com/vi/xi5-YrAEChc/maxresdefault.jpg);
}私は、画像を移動するための式を有するが、私の数学は遠く離れて、明らかである：
var win = $(window),
win_h = win.height(),
parallaxers = $('.parallax-window');
function scroll_events() {
var win_top = win.scrollTop(),
win_btm = win_top + win_h;
parallaxers.each(function() {
var cont = $(this),
cont_top = cont.offset().top,
cont_h = cont.height(),
cont_btm = cont_top + cont_h,
para = cont.find('.parallax-image'),
para_h = Math.round(cont_h * 1.3);
if (cont_btm > win_top && cont_top <= win_btm) {
var diff = (win_h - cont_h)/(win_h - para_h),
value = -Math.round((win_top * diff));
// para.css('transform', 'translate3d(0,' + value*-1 + 'px, 0)');
para.css('top', value + 'px');
}
});
}イメージはなく、正しい割合で移動します。
要素が最初にビューポートに入るとき、画像は親の一番上に並んでいる必要があります。次に、スクロールした後、ビューポートの上部に達すると、画像の下端が親の下端と一致するはずです。
大変ありがとうございます。
FIDDLE（https://jsfiddle.net/8dwLwgy7/1/）