我正在使用parallax.js在首页上设置一系列元素的动画。我搜索了允许我向元素添加简单的“滑块”效果的代码。
一切似乎都工作正常,除了第一个li之后,视差效果仅在水平方向起作用。在li#1上,元素按预期方式悬停,在各个方向上都跟随鼠标。
这是jsfiddle的链接:http://jsfiddle.net/sdeviva/t6uwq/1/
这是修改后的jsfiddle的链接:http://jsfiddle.net/sdeviva/t6uwq/5/
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
var scene = document.getElementById('scene2');
var parallax = new Parallax(scene2);
(function($) {
$.fn.ezslide = function ( options ) {
var defaults = {
fadeIn : 1000,
fadeOut : 1000,
delay : 500
},
settings = $.extend( defaults, options ),
$this = this,
cur = 0,
fadeIt = function( which ) {
var li = $this.find('li');
cur = which = (which >= li.length) ? 0 : which;
li.fadeOut( settings.fadeOut );
li.eq( which )
.delay( settings.fadeOut )
.fadeIn( settings.fadeIn, function(){
setTimeout(function() {
cur++;
fadeIt( cur );
}, settings.delay);
});
};
fadeIt( cur );
};
$('ul.scene').ezslide({
fadeIn : 600,
fadeOut : 600,
delay : 3000
});
})(jQuery);
编辑:我解决了这个问题。我真的不知道我在做什么,所以可能有一种更清洁的方法。但是,我意识到视差效果只对第一个列表项应用了一次。使每个项目淡入的脚本没有获得parallax.js脚本的好处。
如此-我将每个衰落元素放入自己的ul中,具有唯一的ID和一个共享的类。奇迹般地,这确实有效。但是,让我知道是否有更好的方法。
最佳答案
这是一个有趣的。问题是视差代码将第一层设置为position: relative
,所有其他层设置为position: absolute
。这样的效果是使父ul
仅具有第一层的尺寸。通常,这很好,但是当您显示除第一个元素以外的任何元素时,第一个元素将被隐藏。这导致ul
的高度为0。视差取决于场景的高度,因此没有高度意味着没有垂直移动。
您可以通过将固定高度应用于ul
来解决此问题:
#scene{
height: 128px;
}
http://jsfiddle.net/t6uwq/7/
您可以在documentation on github中找到有关运动计算的更多详细信息。
关于javascript - parallax.js + js fadein/out =第一个<li>之后没有喜悦,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24199331/