在jquery上滚动翻译

我需要关于translate-animate属性的帮助。当我在页面上向下滚动时，我想向上翻译图像。现在我知道我可以使用属性translateY（px）来移动它，但是我不知道如何在滚动时翻译Y. 我要让我的网页看起来像这样在jquery上滚动翻译

https://www.apple.com/uk/iphone/

正如你可以看到当你向下滚动的图像与畅通向上平移。我需要一个代码，以便我可以平滑向上翻译图像。

P.s-这是我的第一个问题，对不起，如果我不清楚。

来源

2017-05-30 Kashii

https://stackoverflow.com/questions/30378722/jquery-animate-translatey-based-on-scroll-percentage –

这是我自己做，但不需要任何特殊的魔法工作，而便宜的视差效果... 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的水平。

来源

2017-05-30 18:43:02 NightKn8

在jquery上滚动翻译

回答

相关问题