javascript - 页面周围的静态框架随着滚动改变颜色

Question

我有一个难以描述的设计，我花了几个小时在谷歌上搜索它，但一无所获。该设计基本上使用了一个固定的边框框架，当内容在其中滚动时，它始终停留在页面上，多个完整的视口(viewport)“幻灯片”垂直堆叠。每张幻灯片都有一个不同的背景图像，它也是固定的，用于 background-size:cover 的视差效果。当您向下滚动内容到下一张幻灯片时，边框颜色应随内容变化以与下一张幻灯片的背景图像一起使用。所以本质上，侧边框需要同时是两种颜色，或者用一种颜色覆盖另一种颜色。所附图片应该使事情更清楚。

我必须开始的是我称之为幻灯片的内容:http://jsfiddle.net/4wtRv/

HTML

    <section class="dark" style="background:url('http://www.mccullagh.org/db9/10d-2/new-york-city-at-night.jpg') no-repeat fixed;background-size:cover;">
        <div class="brdr_out">
            <div class="brdr_in">
                <div class="content" style="height:10em;margin-top:-5em;">
                    <div class="title1">TITLE 1</div>
                </div>
            </div>
        </div>
    </section>
    <section class="light" style="background:url('http://images.nationalgeographic.com/wpf/media-live/photos/000/004/cache/african-elephant_435_600x450.jpg') no-repeat fixed;background-size:cover;">
        <div class="brdr_out">
            <div class="brdr_in">
                <div class="content" style="height:10em;margin-top:-5em;">
                    <div class="title2">Title 2</div>
                    <div class="title3">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
                </div>
            </div>
        </div>
    </section>

CSS

body, html
{
    height: 100%;
}
body
{
    font-size: 16px;
    margin: 0;
}
.brdr_in, .brdr_out
{
    bottom: 0;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.brdr_in
{
    margin: .25em;
    padding: 1em;
}
.brdr_out
{
    margin: 1em;
    padding: .25em;
}
.clr1, .dark
{
    color: #fff;
}
.clr2, .light
{
    color: #000;
}
.dark .brdr_in
{
    border: 3px solid #d5d7a1;
}
.dark .brdr_out
{
    border: 5px solid #d5d7a1;
}
.light .brdr_in
{
    border: 3px solid #000;
}
.light .brdr_out
{
    border: 5px solid #000;
}
section
{
    height: 100%;
    position: relative;
    text-align: center;
}
section .content
{
    position: absolute;
    top: 50%;
    width: 100%;
}
.title1, .title2
{
    display: inline-block;
    letter-spacing: .25em;
    line-height: 1.875em;
    padding-bottom: .8em;
}
.title2
{
    border-bottom: 1px solid #4a4639;
    margin-bottom: 3em;
}

但棘手的部分是在滚动时让它看起来像这样:

此外，文本需要隐藏在框架外的边缘。

非常感谢您的帮助!当我告诉设计师我可以做到时，这比我预想的要困难得多。 Javascript 和它的任何库都很好。谢谢!

Answer 1

很难将框架分成两种颜色。我能想到的最简单的方法是制作两个框架副本。给两者一个固定位置，一个顶部:0，另一个底部:0，并在滚动时调整两者的高度，使它们恰好在中间相遇。

另一种解决方案(不符合您的规范，但可能看起来更好)是将边框颜色从一张幻灯片淡化到下一张幻灯片。您将需要一个颜色插值函数、一个 JavaScript 幻灯片颜色列表，以及一个滚动处理函数，用于确定哪张幻灯片可见以及滚动到下一张幻灯片的距离。有点像这样(假设是 Jquery 和 1000px 幻灯片):

$(window).on('scroll', function(){
    var slide_distance = window.scrollY / 1000, slide = Math.floor(slide_distance)
    var color = color_interp(slide_colors[slide], slide_colors[slide + 1], slide_distance - slide)
    $('#border').css('color', color)
})