【问题标题】:Multi-directional and Multiple image, parallax scrolling多方向和多图像,视差滚动
【发布时间】:2011-07-06 12:05:35
【问题描述】:

我正在创建一个基于“桌面”设计的网站,换句话说,就是一个页​​面,其中 div 页面分布在整个页面中。

我正在使用 scrollTo 进行导航,并且在导航动画期间,我希望背景上方的图像进行视差滚动以帮助获得深度和运动的感觉。

此时我已经使用了许多插件,但没有找到可以提供我正在寻找的东西,所有图像都将在页面的各个区域具有起始位置和不同的速度,因此我需要能够在页面加载时设置位置。可能会有大量(ish)图像需要这样做。

我在这方面已经很久了,现在我必须使用你们 互联网天才来拯救我!

【问题讨论】:

  • 您能否发布一些精简的 HTML,让我们了解页面的布局方式?

标签: javascript jquery scroll jquery-animate parallax


【解决方案1】:

视差滚动相当简单,不需要插件,尽管您可以轻松地将其附加到 $.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>

【讨论】:

    猜你喜欢
    • 2019-02-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-23
    • 2018-09-27
    • 1970-01-01
    • 2012-06-24
    相关资源
    最近更新 更多