search

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

Opacity - once again #113

Closed antony-k1208 closed 11 years ago

antony-k1208 commented 11 years ago

Hey, I do not know if it's a good Idea to open a new issue for that as it might be a duplicate of this issue:

https://github.com/CSS-Tricks/MovingBoxes/issues/69

but anyhow,

the CSS3-Solutions and the image-overlay-solutions are both impracticable because of two reasons:

1.) The CSS3 just animates the fade-out of images correctly, but the current image is not faded in, because the current-class is applied after the animation is completed.

2.) Not all Browsers and of course not all mobile browsern support css3 transition

3.) The solution with an image-overlay is more a workaround and not very flexible.

So:

Is it not possible to somehow include jQuery.animate: Opactiy while scrolling? Fading the current image to full opacity and fading the "other" images out?

Any help is welcome. I tried my luck with the JavaScript of moving boxes but it seems more complicated than I thought...

Cheers Thinklabs

antony-k1208 commented 11 years ago

wow - and solved. by myself:

http://stackoverflow.com/questions/16066563/jquery-movingboxes-add-opacity-transition/16067278#16067278

this is a Javascript-pure solution by editing moving boxes code directly.