響應視差或分層垂直文字效果

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顯示屏隱藏：無。

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 
    }); 
})