translate-animateプロパティに関して助けが必要です。 ページを下にスクロールすると、上方向に翻訳したい画像があります。 今私はそれを移動するためにtranslateY（px）プロパティを使用することができますが、私はスクロールしながらtranslateYする方法を知らないことを知っています。 私はあなたがスクロールダウンしたときに画像がスムーズな流れと上向きに変換さ見ることができるように私のウェブページはこのjqueryのスクロールで翻訳
https://www.apple.com/uk/iphone/
のように見えるようにしたいです。 スクロールダウン時にイメージをスムーズに上に翻訳できるようなコードが必要です。
P.s-これは私の最初の質問です。申し訳ありませんが、私は明確ではない場合。
これは私が自分自身を作ったが、動作するように特別な魔法を必要とせず、むしろ安い視差効果である... Link to my original demo page
let $scrollPrev = 0;
const $viewBottom =() => $(window).scrollTop() + $(window).innerHeight(),
$parallaxIllusion =() => {
const $pxTop = $(".parallaxTop"),
$pxMid = $(".parallaxMiddle"),
$pxBottom = $(".parallaxBottom"),
$scrollCurr = $viewBottom(),
$bodyTop = $("body").offset().top,
$bodyBottom = $bodyTop + $("body").outerHeight(true),
$pxspeed = $scrollCurr - $bodyTop;
if ($bodyTop > 0 && $viewBottom() > $bodyTop && $(window).scrollTop() <= $bodyBottom) {
$pxTop.css({
"top": 40 + -$pxspeed/4
});
$pxMid.css({
"top": $pxspeed/2
});
$pxBottom.css({
"top": ($pxspeed/4)
});
$scrollPrev = $scrollCurr;
};
};
$(document).ready(() => {
$(window).scroll(() => {
$parallaxIllusion();
});
});body{
height:700px;
}
.parallaxTop {
background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxHand.png') center center/cover no-repeat;
position: absolute;
left: 50%;
-ms-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
width: 403px;
height: 298px;
z-index: 2;
}
.parallaxMiddle {
background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxCaps.png') center center/cover no-repeat;
position: absolute;
right: 50%;
-ms-transform: translate(50%, 0);
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
width: 109px;
height: 117px;
z-index: 4;
}
.parallaxBottom {
background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxBeer.png') center center/cover no-repeat;
position: absolute;
right: 50%;
-ms-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
width: 406px;
height: 443px;
z-index: 2;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="parallaxTop"></div>
<div class="parallaxMiddle"></div>
<div class="parallaxBottom"></div>
</body>あなたは1をピークに、コードを編集することができます。注画像。速度または方向は、ifレベルで制御されます。
https://stackoverflow.com/questions/30378722/jquery-animate-translatey-based-on-scroll-percentage –