多方向、多图像、视差滚动

发布于 2024-11-18 23:28:31 字数 277 浏览 3 评论 0原文

我正在创建一个采用“桌面”设计的网站，换句话说，是一个单页面，div 页面遍布整个页面。

我使用scrollTo进行导航，在导航动画期间，我希望背景上方的图像进行视差滚动，以帮助产生深度和运动的感觉。

此时我已经使用了许多插件，但没有发现任何插件可以提供我正在寻找的内容，所有图像都将在页面的各个区域具有不同的起始位置和不同的速度，因此我需要能够在页面加载时有一个固定的位置。可能会有大量图像需要执行此操作。

我已经在这方面坚持了很长时间，现在我必须使用你们互联网天才来拯救我！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

挖鼻大婶 2024-11-25 23:28:31

视差滚动相当简单，不需要插件，但您可以轻松地将其附加到 $.fn 以使其成为 jQuery 插件：

<img src="foo.jpg" id="parallax1" class="parallax">

<style>
.parallax {
    position : fixed;
    top      : 0px;
    left     : 0px;
}
</style>

<script>
var scroller = $('#parallax1');
$(window).bind('scroll', function(){
   var top = this.scrollTop;
   $('#parallax1').css('top', top * someMultiplier);
});
</script>

parallax scrolling is fairly simple, no real need for a plugin, though you can easily attach this to $.fn to make it a jQuery plugin:

<img src="foo.jpg" id="parallax1" class="parallax">

<style>
.parallax {
    position : fixed;
    top      : 0px;
    left     : 0px;
}
</style>

<script>
var scroller = $('#parallax1');
$(window).bind('scroll', function(){
   var top = this.scrollTop;
   $('#parallax1').css('top', top * someMultiplier);
});
</script>

回复收藏 0 原文

~没有更多了~