CODEWITHSUNDEEP
javascriptjquerysliderparallax.js
Sara
Sara

Reputation: 13

parallax.js + js fadein/out = no joy after first <li>

I am using parallax.js to animate a series of elements on a homepage. I searched for code that would allow me to add a simple "slider" effect to the elements as well.

Everything seems to be working properly, except that after the first li, the parallax effect only works horizontally. On li #1, the element hovers as expected, following the mouse in every direction.

Here's a link to jsfiddle: http://jsfiddle.net/sdeviva/t6uwq/1/

Here's a link to the revised 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);

EDIT: I sort of fixed this. I don't really know what I'm doing, so there's probably a cleaner way. But, I realized that the parallax effect was only being applied once to the first list item. The script that makes each item fade in wasn't getting the benefit of the parallax.js script.

SO - I put each fading element into its own ul, with a unique id, and a shared class. By some miracle, this actually works. But let me know if there's a better way.

Upvotes: 1

Views: 508

Answers (1)

James Montagne
James Montagne

Reputation: 78700

This is an interesting one. The issue is that the parallax code sets the very first layer to position: relative and all others to position: absolute. This has the effect of making the parent ul have the dimensions of only the first layer. This is normally fine, except that when you display any element other than the first, the first is hidden. This causes the ul to have 0 height. The parallax depends on the height of the scene, as a result no height means no vertical movement.

You can fix the issue by applying a fixed height to your ul:

#scene{
    height: 128px;    
}

http://jsfiddle.net/t6uwq/7/

You can find greater detail on the motion calculation in the documentation on github.

Upvotes: 1

Related Questions