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

弄清楚（paralax？）滚动效果

1 个答案: