响应式视差或分层垂直文本效果

Question

我正在尝试重现 http://www.balmain.com/en_eu/ 上的文本效果 - 文本在每个 div 中垂直和水平居中，但是当您向下滚动时，顶部位置会发生变化，因此它具有视差效果。当您向下滚动时，文本将被下一个 div / 图像替换。

在移动设备上，文本停止以这种“视差”方式运行，这就是我尝试在我的 JS 中测试移动设备的原因。听起来像是very bad idea to attach handlers to the window scroll event，所以我也得看看，但我需要先让效果生效。

当我查看 Balmain 网站上的代码时，我真的被困在如何解决这个问题上，但我确信它可以比那里更简单，所以我想我会在这里问以防有人有谁可以分享他们的方法以便我学习？

Codepen

http://codepen.io/anon/pen/gbJavv

HTML

<section class="slide slide-1">
    <img src="http://placehold.it/1200x800" />
    <a href="javascript:void(0);">
        <span class="slide--generic-title clearfix">Enter The Shop</span>
        <span class="slide--custom-title">One piece tees</span>
    </a>
</section>

<section class="slide slide-2">
    <img src="http://placehold.it/1200x800" />
    <a href="javascript:void(0);">
        <span class="slide--generic-title clearfix">Enter The Shop</span>
        <span class="slide--custom-title">Company</span>
    </a>
</section>

<section class="slide slide-3">
    <img src="http://placehold.it/1200x800" />
    <a href="javascript:void(0);">
        <span class="slide--generic-title clearfix">Enter The Shop</span>
        <span class="slide--custom-title">Values</span>
    </a>
</section>

<section class="slide slide-4">
    <img src="http://placehold.it/1200x800" />
    <a href="javascript:void(0);">
        <span class="slide--generic-title clearfix">Enter The Shop</span>
        <span class="slide--custom-title">Shoes</span>
    </a>
</section>

<section class="slide slide-5">
    <img src="http://placehold.it/1200x800" />
    <a href="javascript:void(0);">
        <span class="slide--generic-title clearfix">Enter The Shop</span>
        <span class="slide--custom-title">T-shirts</span>
    </a>
</section>

CSS

/* SECTIONS LAYOUT */
section {
    position: relative;
    text-align: center;
    overflow: hidden;
}
section img {
    width:100%;
    height:auto;
}
section a {
    position: absolute;
    left:50%;
    top:50%;
    display:block;
    width:400px;
    margin-left:-200px;
    font-size: 2em;
    color:#000;
}

/* GENERAL STYLING */
body {
    padding:0;
    margin:0;
    font-family:arial, helvetica, verdana, sans-serif;
    font-size:0.9em;
    color:#333;
}
a {
    text-decoration: none;
}
img {
    display:block;
}
.clearfix:after {
    content:".";
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0
}
section {
    border-bottom:1px solid #fff;
}

JQUERY

// Check for mobile (not perfect, but a good technique using Modernizr)
// Source: http://stackoverflow.com/a/17326467/621098
var deviceAgent = navigator.userAgent.toLowerCase();
var isTouchDevice = Modernizr.touch || 
    (deviceAgent.match(/(iphone|ipod|ipad)/) ||
     deviceAgent.match(/(android)/)  || 
     deviceAgent.match(/(iemobile)/) || 
     deviceAgent.match(/iphone/i) || 
     deviceAgent.match(/ipad/i) || 
     deviceAgent.match(/ipod/i) || 
     deviceAgent.match(/blackberry/i) || 
     deviceAgent.match(/webos/) || 
     deviceAgent.match(/bada/i)
    );

// Affect non-mobile devices on scroll
if (!isTouchDevice) {

    // On scroll
    $(window).scroll(function() {
        // Do stuff
    });

    // On resize
    $(window).resize(function() {
            // Do stuff
    });

} else {
    // Show the text centered in the section only
}

Answer 1

这应该可以解决问题：https://jsfiddle.net/668t37ym/2/

jQuery 的功劳归于@razzak，他在那里回答了一个类似的问题： Changing div content based on scroll position。

每次id为scrollContent的元素的顶部超过类.post的元素顶部的位置时，从类.description的元素中获取文本并用于替换中心元素的内容.带有您想要在某个滚动位置显示的文本的 div 将使用 CSS display: none 隐藏。

HTML：

<div>
    <div>
        <div style='height:300px;' class='post'>
            <p class="description" style="display: none;">---1. CONTENT AREA ONE---</p>
            Page Content / Image
        </div>
        <div style='height:250px;' class='post'>
            <p class="description" style="display: none;">---2. CONTENT AREA TWO---</p>
            Page Content / Image
        </div>
        <div style='height:350px;' class='post'>
            <p class="description" style="display: none;">---3. CONTENT AREA THREE---</p>
            Page Content / Image
        </div>
        <div style='height:200px;' class='post'>
            <p class="description" style="display: none;">---4. CONTENT AREA FOUR---</p>
            Page Content / Image
        </div>
        <div id='scrollContent'></div>
        <div style='height:800px;'></div>
    </div>
</div>

CSS：

.post {
    border: 4px ridge grey;
}

#scrollContent {
    position: fixed;
    top: 150px;
    right: 350px;
    height: 90px;
    width: 250px;
    background: grey;
    text-align: center;
}

.description {
    width: 200px;
    float: left;
    position: fixed;
    background: grey;
} 

JQUERY：

$(window).load(function () {
    $(window).on("scroll resize", function () {
        var pos = $('#scrollContent').offset();
        $('.post').each(function () {
            if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
                $('#scrollContent').html($(this).find('.description').text()); 
                return; //break the loop
            }
        });
    });

    $(document).ready(function () {
        $(window).trigger('scroll'); // init the value
    });
})