CSS-Tricks / MovingBoxes

Simple horizontal slider which grows up the current box when it's in focus (image, title & text) and back down when it's not in focus.
http://css-tricks.github.io/MovingBoxes/
GNU Lesser General Public License v3.0
280 stars 147 forks source link

Overlap? #48

Closed cwulff closed 12 years ago

cwulff commented 12 years ago

Rather than having the images spaced apart, I'd like to have them overlapping, with the .current over laying its neighbours on either side. Giving the li a negative margin seems to work fine to make them overlap, but the "next"

  • always overlaps the .current one (regardless of the z-index applied to both li and li.current).

    Not a really a bug obviously, but I'd appreciate any thoughts on how to approach this.

  • Mottie commented 12 years ago

    Hmmm, instead of going in and modifying the plugin, I think the easiest solution would be to slap some css3 animation in there... I'm still learning css3 stuff so I can almost bet there's a better way to do this - I did try using translateX() and transform:scale(1.2); but it just didn't look right. I'm sure this could use a bit of tweaking, but I didn't spend a lot of time fussing over it. This is what I ended up with (demo):

    CSS

    .mb-panel .grow {
        padding: 10px;
        border: 1px solid #999;
        position: relative;
        width: 120%;
        left: -30px; /* adjust this position as needed - just trying to recenter the panel after it has grown */
        z-index: 999; /* needed to overlap the non-current panels */
        background: white; /* needed to hide the non-current panels behind the current */
        -webkit-animation: .5s ease; /* adjust time to match the plugin speed option */
        -moz-animation: .5s ease;
        -ms-animation: .5s ease;
        -o-animation: .5s ease;
        animation: .5s ease;
        -webkit-animation-name: grow;
        -moz-animation-name: grow;
        -ms-animation-name: grow;
        -o-animation-name: grow;
        animation-name: grow;
    }
    
    @-webkit-keyframes grow {
        0%   { left: 0;     width: 100%; }
        100% { left: -30px; width: 120%; }
    }
    @-moz-keyframes grow {
        0%   { left: 0;     width: 100%; }
        100% { left: -30px; width: 120%; }
    }
    @-ms-keyframes grow {
        0%   { left: 0;     width: 100%; }
        100% { left: -30px; width: 120%; }
    }
    @keyframes grow {
        0%   { left: 0;     width: 100%; }
        100% { left: -30px; width: 120%; }
    }

    And I used this callbacks in the initialization code

    $('#slider').movingBoxes({
    
        // **** Callbacks ****
        // e = event, slider = MovingBoxes Object, tar = current panel #
        // callback when MovingBoxes has completed initialization
        initialized: function(e, slider, tar){
            // increase heights by 130% - doesn't seem to work for all panels in the demo (all different heights)
            slider.heights = slider.$panels.map(function(i,e){
                return $(e).outerHeight(true) * 1.3;
            }).get();
            // set starting panel
            slider.$panels.eq(tar-1).find('.mb-inside').addClass('grow');
        },
        // callback before any animation occurs
        beforeAnimation: function(e, slider, tar){
            /* start css animation at the same time as the panel animation */
            slider.$el.find('.grow').removeClass('grow');
            slider.$panels.eq(tar-1).find('.mb-inside').addClass('grow');
        }
    
    });
    Mottie commented 12 years ago

    It's been a month, I'm guessing this solution worked for you. Please feel free to reopen this issue if you are still having problems.

    cwulff commented 12 years ago

    Aw geez... I completely forgot to come back and say thanks! What a jerk.

    This worked perfectly.