i'm trying interactive version of this:
it's not easy because want make responsive, , should zoom item on click.
i had 3 ideas doing this: 1) every item placed in container transformed separately, , on click "reverse" transform, center it, zoom 80% of window's size. good, wasn't responsive, couldn't position these items because of percentage widths.
example: dl.dropboxusercontent.com/u/19864640/port/layout.html
2) container contains these items transformed. way can put items in 1 div, set percentage width of them, set padding in px. may responsive.
i decided change perspective "in front" make bit easier.
unfortunately time have problem. can't configure zooming now. because of transformed container can't use standard centering method.
i tried make "reverse transform" too, still cant center screen instead of transformed container.
example: dl.dropboxusercontent.com/u/19864640/portfolio/index.html
here's jsfiddle: jsfiddle.net/c76qek4z/1/
first 2 blocks in js plugins: first keep ratio of item, , second 1 easier transitions: ricostacruz.com/jquery.transit/
3) it's based on second idea, wanted append clicked item body, , center , zoom, again... time won't have transform animation.
i've been trying 20 hours, still can't this... have ideas? if not clear please ask - that's important me.

Comments
Post a Comment