js滚动横幅_固定滚动消失横幅

js滚动横幅

I recently saw a very interesting visual effect that I can only describe in a series of antonyms: a fixed, scrolling, disappearing banner. This article details my recreation and explanation of the effect.

最近，我看到了一个非常有趣的视觉效果，只能用一系列反义词来描述：固定的，滚动的，消失的横幅。 本文详细介绍了我的观点并解释了其影响。

画一条线 (Drawing A Line)

In principle, execution of this kind of effect could be achieved by making the front image an alpha-masked 32-bit PNG. The problem with that is two fold: the file size of the PNG will be enormous for a full-width page hero image, and we’d need another copy of the image for the background. I addressed that problem by making only part of the image - the section that the text will slide behind - a transparent PNG.

原则上，可以通过使正面图像成为具有alpha遮罩的32位PNG来实现这种效果。 问题是两方面的：对于全角页面英雄图像，PNG的文件大小将很大，而我们需要将图像的另一个副本作为背景。 一个透明的PNG -该文本将后面滑动部分-我通过制作仅仅图像的一部分解决这个问题。

The PNG section of the banner

横幅的PNG部分

The text of the banner is placed before the PNG in a <header> element:

标语的文本放在<header>元素中的PNG 之前 ：

<header>
    <h1>Land <span>of the</span> Lost</h1>
    <img src="mountain-range-front.png" alt>
</header>

The text of the page (from Xenophon’s Anabasis) is placed below the <header>, in a <main> element:

页面的文本(来自Xenophon的Anabasis )放在<header> 下面的<main>元素中 ：

<main>
  <p>From this point he marched two stages…
</main>

The full version of the image is saved as a JPG, and is applied as the background of the element with CSS. Since the background image won’t size it’s containing element by itself, and the PNG image will need to be responsive, we size the <header> using padding-top. To determine the correct value, we divide the full image’s height by its width:

图像的完整版本另存为JPG ，并通过CSS用作元素的背景 。 由于背景图片不会自行调整其包含元素的大小，并且PNG 图片需要响应 ，因此我们使用padding-top调整<header>大小。 为了确定正确的值，我们将整个图像的高度除以其宽度：

926 / 1500 = 0.6193333333

The CSS for the header becomes:

headerCSS变为：

header { 
    background: url(mountain-range.jpg) no-repeat;
    padding-top: 61.73333333%;
    background-size: cover;
}

The PNG image is 45.8% of the width of the full-size version of the image. It’s placed at the right of the <header>, and styled appropriately:

PNG图片是全尺寸图片宽度的45.8％。 它位于<header>的右侧，并具有适当的样式：

header img {
    position: absolute;
    top: 0;
    right: 0;
    width: 45.8%;
}

The heading is provided with a fixed position, and styled using vw units so that the text is always the same width as the covering PNG:

标题具有fixed位置 ，并使用vw单位设置样式，以便文本始终与覆盖的PNG宽度相同：

header h1 { 
    position: fixed;
    top: 2rem;
    right: 2rem;
    font-size: 12vw;
    line-height: .8;
    margin-top: 0;
    text-align: center;
}
header h1 span {
    display: block;
    font-size: 8.75vw;
}

无限的视野 (A Unlimited Horizon)

There’s a problem with providing anything with fixed: while the affected element will respect the automatic layering and slide behind the mountain range of the PNG, it will reappear again below the <header> as the page continues to scroll, obscuring the body text. The fixed element will even ignore overflow: hidden placed on the container.

提供fixed内容存在一个问题：虽然受影响的元素将尊重自动分层并在PNG的山脉后面滑动，但随着页面继续滚动，它会再次出现在<header> 下面 ，从而遮盖了正文文本。 fixed元素甚至会忽略overflow: hidden在容器上。

The easiest solution is the most straightforward: place a relative position on the <main> element below the <header> so that it is automatically layered higher, then provide it with a white background and border to ensure that it covers all the way to the bottom edge of the <header>:

最简单的解决方案是最直接的方法：在<header>下面的<main>元素上放置一个relative位置 ，以使其自动分层，然后为其提供白色背景和border以确保覆盖到<header>底部边缘：

main { 
    background: #fff;
    position: relative;
    border: 1px solid #fff;
    padding: 2rem 25%;
}

Many mobile browsers still don’t support fixed positioning for a variety of reasons, meaning that the heading won’t move independently on iOS. However, there’s still a need to adjust the layout at smaller screen sizes:

由于种种原因，许多移动浏览器仍然不支持fixed位置，这意味着标题不会在iOS上独立移动。 但是，仍然需要在较小的屏幕尺寸下调整布局：

@media all and (max-width: 400px) {
    main { padding: 2rem; }
}

结论 (Conclusion)

The result works very well for full-width page designs, while the file size of the images could be reduced further by using WebP formats and / or srcset and image-set().

结果对于全角页面设计非常有效，而图像的文件大小可以通过使用WebP格式和/或srcset和image-set()进一步减小。

翻译自: https://thenewcode.com/1157/Fixed-Scrolling-Disappearing-Banner

js滚动横幅