【问题标题】:Smooth vertical page scrolling using mouse wheel and scroll bar使用鼠标滚轮和滚动条平滑垂直页面滚动
【发布时间】:2012-05-18 01:10:54
【问题描述】:

我正在尝试建立一个视差网站 - 是的,我知道它们是一种令人讨厌的时尚,但我仍然想尝试一下。因此,为了获得灵感,我一直在查看各种优秀视差网站的示例,并遇到了这个:https://victoriabeckham.landrover.com/INT

它可以使用鼠标滚轮、滚动条和锚链接平滑滚动。我一直在寻找能够实现这种效果的 jQuery 插件,但似乎只能找到使用内部页面链接的插件——锚点或 ID(详见下文)——但不是鼠标滚轮和滚动条。我很有可能使用错误的关键字进行搜索。有谁知道找到这些插件的正确术语或知道任何可以实现此效果的插件?

顺便说一句,我目前正在学习 jQuery 和 Javascript,但还处于早期阶段 - 仍在通过 codeacademy 进行搜索,还没有进入任何真实世界的代码。所以目前我正在使用插件作为一种学习方式,但希望在几个月内我可以构建自己的东西!

平滑滚动到锚标记或 ID:

还有,另一个使用类似滚动技术的视差网站示例:

【问题讨论】:

    标签: javascript jquery scrollbar mousewheel parallax


    【解决方案1】:

    我认为您必须将其中几种效果结合起来才能制作出类似于 Landrover 网站的东西。平滑滚动脚本、滚动路径脚本和视差脚本。

    对于该网站的路径元素,这是一个有趣的网站: http://joelb.me/scrollpath/

    虽然了解这些网站如何运作的最佳方法是检查它们!一些使用视差的酷网站: http://www.awwwards.com/?s=parallax&post_type=all&search=Ok

    我希望这是一些帮助/启发!

    【讨论】:

    • 感谢您的信息 - joelb.me/scrollpath 对我来说是新的,看起来非常适合视差站点。我认为你对结合脚本来实现平滑滚动是正确的——我正在检查他们的代码,看起来他们可能结合了一些东西,但遗憾的是超出了我对 js 和 jQuery 的了解。
    【解决方案2】:

    试试这个。 https://nicescroll.areaaperta.com/

    得到了

    $().scrollTop() 
    

    jQuery 事件监听器,因此您可以使用视差脚本配置滚动路径。

    【讨论】:

    • 看起来很完美,非常感谢。会去快速尝试一下。这就是我喜欢stackoverflow的原因! *编辑:像梦一样工作:)
    • 链接不工作“建立数据库连接时出错”
    猜你喜欢
    • 2013-02-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多