Question

我正在尝试创建一种效果，其中将徽标分解为多个图像，并希望使用滚动效果将徽标拼凑在一起。我遇到的问题是该页面不是滚动页面。使用CSS网格，页面的一半是徽标（从徽标的轮廓开始），另一半是<h1>，用于描述徽标的内容。徽标的每个部分都有单独的<h1>，标题不同，并且在用户滚动时会更改。

我如何使用滚动效果使页面像演示文稿一样进行幻灯片放映，同时将徽标粘贴完成？

Answer 1

如果您可以共享样机或屏幕截图，将很有帮助。根据您的描述，我了解到，您不需要网格。

您可以将徽标部分设置为position: fixed

然后滚动h1标签时，可以轻松地将动画添加到徽标中。为此，您可以像下面的代码一样使用javascript;

$(function() { 
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
      //do the first part merge
    } else if(scroll >= 1000) {
      //do the second part merge
    } else {
      //logo starting point
      }
  });
});

此外，对于页面滚动，我为您找到了一个很酷的小型图书馆：https://github.com/CodyHouse/page-scroll-effects

*关键部分正在计划中。您需要计算h1完成滚动的时间以及它们的重复版本何时开始与徽标合并。您也可以使此过程具有响应性和动态性，但这取决于您的代码。如果您可以共享您的代码，我们可能会帮助将其动态转换。

在全屏页面上滚动显示将图像添加到页面

1 个答案: