gpt4 book ai didi

javascript - 我怎样才能解决这个视差

转载 作者:太空宇宙 更新时间:2023-11-04 14:36:51 25 4
gpt4 key购买 nike

这是我第一次在 jQuery 中使用视差类型的东西...我已经到了崩溃的边缘,我不知道如何修复它。

Click here for JSFiddle

我的代码是...HTML

<div id="bannerText" style="margin-top: 0px; opacity: 1;">
<center>Text, blah blah blah</center>
</div>

Javascript

 function scrollBanner() {
//Get the scoll position of the page
scrollPos = jQuery(this).scrollTop();

//Scroll and fade out the banner text
jQuery('#bannerText').css({
'margin-top' : -(scrollPos/3)+"px",
'opacity' : 1-(scrollPos/300)
});
}

CSS

#bannerText {
position: fixed;
top: 250px;
text-align: center;
width: 100%;
}

我试图做到这一点,当用户向下滚动时,文本会随着他们慢慢下降(但比他们慢,所以它会离开屏幕)并淡出。

现在,它做得很好,没什么。屏幕上只有我的文字...

编辑:trying to make it somewhat like this websites, for example, Click here

最佳答案

这是一个工作示例

您可以使用参数来获得您想要的效果。确保在您的页面中也包含 jQuery,如 this fiddle :

$(window).on('scroll', function() {
//Get the scoll position of the page
scrollPos = $(this).scrollTop();

//Scroll and fade out the banner text
$('#bannerText').css({
'margin-top' : (scrollPos/3)+"px",
'opacity' : 1-(scrollPos/100)
});

});

关于javascript - 我怎样才能解决这个视差,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18687106/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com