文本上的视差效果
文本上的视差效果
提问于 2017-01-04 07:18:58
我想要实现的一个完美的例子就是你一登陆这个页面(视差BG，文本淡入淡出，文本视差)：themenectar.com
我正在使用parallax.js作为我的背景，它工作得很好。我也在使用下面的代码片段，它使我的标题在滚动条上淡出：
function scrollBanner() {
$(document).scroll(function(){
var scrollPos = $(this).scrollTop();
$('.page-title, .breadcrumbs').css({
'opacity' : 1-(scrollPos/200),
});
});
}
scrollBanner();一切都很好，除了我对如何在我的标题上实现视差效果感到困惑。
现在，当我滚动我的标题时，它只是向上滚动，就像其他任何元素一样。我怎样才能让我的文本也变得视差呢？例如在themenectar.com上的示例中
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-04 08:13:11
我将使用您的scrollPos变量来操作CSS属性transform: translateY(n);，如下所示：
var transY = scrollPos / 2;
$('.page-title').css('transform':'translateY(' + transY + ')');当然，通过玩弄数字来获得想要的效果。
由于性能原因，Transform CSS属性很好用(https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41453849
复制相关文章
相似问题
腾讯云开发者
