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

Question

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

在移动设备上，文本以这种“视差”方式停止运行，这就是为什么我试图在我的 JS 中测试下面的移动设备。听起来像是 very bad idea to attach handlers to the window scroll event ，所以我也必须看看它，但我需要先让效果发挥作用。

当我浏览 Balmain 网站上的代码时，我真的很困惑如何解决这个问题，但我确信它可以比那里更简单地完成，所以我想在这里问一下，以防有人谁可以分享他们的方法以便我学习？

密码本

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 的元素的顶部超过 class 为 .post 的元素的顶部位置时，就会从 class 为 .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
    });
})