搞清楚（paralax？）滚动效果

Question

有没有人知道this效果如何实现？我无法弄清楚它是否是一个基本上以一个卷轴或图像或其他方式播放的视频。

Answer 1

$(window).scroll(function(e){ 
parallax(); 
}); 
function parallax(){ 
var scrolled = $(window).scrollTop(); 
$('.bg').css('top',-(scrolled*0.1)+'px'); 
$('.bg2').css('top',-(scrolled*0.2)+'px'); 
} 

这个函数调用的视差效果

，这增加了相应的CSS改变，其非常相似，你的例子中，简单一些。

$(document).ready(function() { 
$(window).scroll(function() { 
if ($(this).scrollTop()> 500) { 
$(".bg2").css({ 
'-webkit-transform' : 'rotateX(' + "180deg" + ')', 
'-moz-transform' : 'rotateX(' + "180deg" + ')', 
'-ms-transform'  : 'rotateX(' + "180deg" + ')', 
'-o-transform'  : 'rotateX(' + "180deg" + ')', 
'transform'   : 'rotateX(' + "180deg" + ')'}); 
$(".bg").css({ 
'-webkit-transform' : 'rotateY(' + "180deg" + ')', 
'-moz-transform' : 'rotateY(' + "180deg" + ')', 
'-ms-transform'  : 'rotateY(' + "180deg" + ')', 
'-o-transform'  : 'rotateY(' + "180deg" + ')', 
'transform'   : 'rotateY(' + "180deg" + ')' + 'scale(' + "0.5,0.33" + ')'  +  'translateY('  + "-1250px" + ')' 
}); 

} 

}); 
}); 

链接到codepen页：

http://codepen.io/damianocel/pen/yYKyaN