我正在尝试重现在 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
}
最佳答案
这应该可以解决问题: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
});
})
关于jquery - 响应视差或分层垂直文本效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29455702/