javascript - Advanced Material Design Transition with JS & CSS - Where to start? -


i'm working on animation prototyping web right , noticed material design packs pretty advanced stuff. while many examples of animations visible online, found 1 got me real interested due it's fluid motion. there's video of transition in music player, container breaks free grid, information slides out behind , coloured bubble grows , cover screen while dissolving show background image.

you can find video here, under "visual continuity" (displaying use on tablet, non-the less) http://www.google.com/design/spec/animation/meaningful-transitions.html

this pretty far stuff i'm used to, , after 5 failed attempts i'd see how else approach problem. ideas on structure, positioning rules or else?

you can use structure this:

<div class="container">   <div class="image-container"></div>   <img src="coolimage.png">  </div> 

the image-container has background-color , border-radius of 50% remains circle (you may have change height/width this).

then during click event on image, raise z-index of elements , transform: scale() image-container fills larger container (needs overflow:hidden). during this, move image wherever want it. make sure apply easeout transition material design specifies.


Comments

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -