【问题标题】:How to create a image slide show with scroll function?如何创建具有滚动功能的图像幻灯片?
【发布时间】:2021-03-04 10:46:39
【问题描述】:

我想为一个包含 HTML、JS 和 CSS 的项目创建不同图像的幻灯片。我想创建一个滚动功能,该功能将根据鼠标滚动的移动将图像幻灯片从左向右移动。

如果这听起来令人困惑,此链接准确地显示了我正在尝试做的事情,但由于我缺乏经验,我不知道如何完成此操作。任何想法都会有所帮助。

链接:https://robbiecrenshaw.com/ 大约一半

谢谢

(我是编程初学者)

【问题讨论】:

    标签: javascript html css


    【解决方案1】:

    本站使用的动画称为基于滚动的动画,其中动画进度直接由滚动位置控制。

    它们是通过监听用户滚动时触发的滚动事件并根据滚动位置动态更新某些元素的样式来实现的。

    您可以使用 JavaScript 从头开始​​创建滚动动画,也可以使用 GSAP ScrollTrigger 之类的库来实现它们(这是这个特定网站使用的)。

    我在这里创建了一个类似于您正在寻找的效果的演示:https://codepen.io/nickcil/pen/yLVEZPa

    此示例使用 ScrollMagic 跟踪滚动位置并更新元素的 transform 属性,以使方块在您向下滚动页面时向左移动。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-11-27
      • 1970-01-01
      • 2018-02-20
      • 1970-01-01
      • 2015-01-11
      • 2016-05-04
      相关资源
      最近更新 更多