Question

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

在移动设备上，文字在这个“视差”中停止运作。这就是为什么我在我的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。

每次idCon为scrollContent的元素顶部超过带有.post类的元素顶部的位置时，将获取带有类.description的元素中的文本并用于替换center元素的内容。带有要在某个滚动位置显示的文本的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
    });
})

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

1 个答案: