在jquery中滚动翻译
在jquery中滚动翻译
提问于 2017-05-31 02:11:20
我需要关于翻译动画属性的帮助。当我在页面上向下滚动时，有一个图像想要向上平移。现在我知道我可以使用属性translateY(px)来移动它，但是我不知道如何在滚动时使用translateY。我想让我的网页看起来像这样
https://www.apple.com/uk/iphone/
正如你所看到的，当你向下滚动时，图像会顺畅地向上平移。我需要一个代码，使我可以翻译我的图像向下滚动平滑向上。
附言-这是我的第一个问题，如果我不清楚，很抱歉。
回答 1
Stack Overflow用户
发布于 2017-05-31 02:43:03
这是我自己制作的相当便宜的视差效果，但不需要任何特殊的魔法。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级别进行控制。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44269125
复制相关文章
相似问题
腾讯云开发者
