搞清楚（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