Question

我有一个难以描述的设计，我花了几个小时搜索它，什么都没发现。该设计基本上使用固定边框框架，当内容滚动时，该框架始终保留在页面上，垂直堆叠多个全视口“幻灯片”。每个幻灯片都有一个不同的背景图像，这个背景图像固定用于具有背景大小的视差效果：封面。向下滚动内容到下一张幻灯片时，边框颜色应随内容一起变化，以便与下一张幻灯片的背景图像一起使用。因此，侧边框基本上需要同时是两种颜色，或者一种覆盖另一种颜色。附图可以使事情更加清晰。

我必须首先将这些内容安排在我正在调用的幻灯片中：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;
}

但是，当你滚动时，棘手的部分是让它看起来像这样： enter image description here

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

非常感谢您的帮助！当我告诉设计师我能做到这一点时，这比我预想的要困难得多。 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)
})

Answer 2

以下是解决此问题的粗略示例代码。我必须让每个边框片段成为一个单独的div，因此它不会覆盖文本，链接等。要在框架上方和下方滚动时阻止文本，我添加一个元素，显示相同的背景图像，具有更高的z-因此，它涵盖了框架外的部分。

<强> 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="content" style="height:10em;margin-top:-5em;">
            <div class="title1">TITLE 1</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="content" style="height:10em;margin-top:-5em;padding:0 20%;width:60%">
            <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>
   </section>

    <div id="top" style="background:url('http://www.mccullagh.org/db9/10d-2/new-york-city-at-night.jpg') no-repeat fixed;background-size:cover;display:none;height:24px;position:fixed;top:0;left:0;right:0;z-index:3;"></div>
    <div id="bottom" 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;display:none;height:24px;position:fixed;bottom:0;left:0;right:0;z-index:3;"></div>

    <div class="brdr_out">
        <div class="dark">
            <div class="top"></div>
            <div class="right"></div>
            <div class="bottom"></div>
            <div class="left"></div>
        </div>
        <div class="light">
            <div class="top"></div>
            <div class="right"></div>
            <div class="bottom"></div>
            <div class="left"></div>
        </div>
    </div>
    <div class="brdr_in">
        <div class="dark">
            <div class="top"></div>
            <div class="right"></div>
            <div class="bottom"></div>
            <div class="left"></div>
        </div>
        <div class="light">
            <div class="top"></div>
            <div class="right"></div>
            <div class="bottom"></div>
            <div class="left"></div>
        </div>
    </div>

<强> CSS

body, html
{
    height: 100%;
}
body
{
    font-size: 16px;
    margin: 0;
}
.clr1, .dark
{
    color: #fff;
}
.clr2, .light
{
    color: #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;
}

/*The Frame Styles*/
.brdr_in .bottom
{
    bottom: 24px;
}
.brdr_in .bottom, .brdr_in .top
{
    height: 3px;
    left: 24px;
    right: 24px;
}
.brdr_in .dark div, .brdr_out .dark div
{
    background-color: #e4d7b0;
}
.brdr_in div, .brdr_out div
{
    position: fixed;
    z-index: 4;
}
.brdr_in .left
{
    left: 24px;
}
.brdr_in .left, .brdr_in .right
{
    bottom: 24px;
    top: 24px;
    width: 3px;
}
.brdr_in .light div, .brdr_out .light div
{
    background-color: #434345;
}
.brdr_in .right
{
    right: 24px;
}
.brdr_in .top
{
    top: 24px;
}
.brdr_out .bottom
{
    bottom: 15px;
}
.brdr_out .bottom, .brdr_out .top
{
    height: 5px;
    left: 15px;
    right: 15px;
}
.brdr_out .left
{
    left: 15px;
}
.brdr_out .left, .brdr_out .right
{
    bottom: 15px;
    top: 15px;
    width: 5px;
}
.brdr_out .right
{
    right: 15px;
}
.brdr_out .top
{
    top: 15px;
}

<强> JS

       function borders() {
            var viewportHeight = $(window).height();
            var scrollY = window.scrollY;
            var distance = viewportHeight - scrollY;

            //Once we start scrolling, the top border of the next slide needs to be hidden so it doesn't appear over content
            if (scrollY >= 0) {
                $('.light .top').css('display', 'none');
            }
            if (scrollY < 27) {
                $('.brdr_in .light .bottom').css('display', 'none');
            }
            else {
                $('.brdr_in .light .bottom').css('display', 'block');
            }
            if (scrollY < 20) {
                $('.brdr_out .light .bottom').css('display', 'none');
            }
            else {
                $('.brdr_out .light .bottom').css('display', 'block');
            }

            var outerTop = distance;
            var innerTop = distance;

            //We've scrolled enough so that the top of the bottom slide reaches the top of the viewport, need to add top border back in
            if (outerTop < 15) {
                $('.brdr_out .light .top').css('display', 'block');
                outerTop = 15;
            }
            if (innerTop < 24) {
                $('.brdr_in .light .top').css('display', 'block');
                innerTop = 24;
            }

            $('.brdr_out .light .left, .brdr_out .light .right').css('top', outerTop);
            $('.brdr_in .light  .left, .brdr_in .light .right').css('top', innerTop);


            //Add the background image to top/bottom to hide the text as it scrolls under/above it
            if ($('#light .brdr_out').css('border-top-width') == '0px') {
                $('#top').css('display', 'block');
            }
            else {
                $('#top').css('display', 'none');
            }
            if (scrollY > 24) {
                $('#bottom').css('display', 'block');
            }
            else {
                $('#bottom').css('display', 'none');
            }
       }

       $(window).load(function () {
            borders();
       });

       $(window).scroll(function () {
            borders();
        });

页面周围的静态框架将颜色更改为滚动

2 个答案: