Question

我正在尝试制作带有文本（我的徽标）的标题，并且在您向下滚动时将此文本缩放，所有这些都是渐进的，直到身体高度的特定部分为止。

像这样：https://gph.is/g/ZObxbja 如果有人知道怎么做，请写点东西。

这是CSS中的代码。

#header {
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

#logo-nav {
    top: 0;
    z-index: 2;
    padding: 22px 0;
    height: 35px;
    display: block;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: all;
    overflow: hidden;
    text-align: center;
    align-items: center;
    font-family: "nimbu";
    background-color: white;
    position: fixed;
    font-size: 36px;
    line-height: 40px;
}

#logo {
    margin-top: 0px;
    overflow: hidden;
    height: 32px;
    width: 100%;
    z-index: 2;
    position: relative;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}

Answer 1

您可以使用JQuery查看这个工作示例：https://stackoverflow.com/a/39216430/7517148

但是，如果您不想使用JQuery这个非常繁重的库，则可以使用诸如aos

之类的工具

您没有指定要在项目中使用的框架，因此我为您提供了一些不需要特定框架的解决方案，但是有很多用于此类动画的工具。

缩放内容向下滚动

1 个答案: