Overlap? #48

Activity

1. Mottie commented on Nov 22, 2011

   

   Mottie

   on Nov 22, 2011

   Contributor

   More actions

   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');
       }
   
   });
2. Mottie commented on Dec 21, 2011

   

   Mottie

   on Dec 21, 2011

   Contributor

   More actions

   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.
3. Mottie

   closed this as completedon Dec 21, 2011
4. cwulff commented on Dec 22, 2011

   

   cwulff

   on Dec 22, 2011

   Author

   More actions

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

   This worked perfectly.