在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上滾動翻譯

回答

相關問題