Material design list element to card transition - javascript

I read elevation section in the material design docs and there are various issues for the implementation.
I try understand, how this elevation can be implemented (html+css+js).. I have little experience with html+css , so I will be glad of any hint that will clarify the issues.
It is especially unclear how the list item is excluded from the list and expanded to the full screen while the other elements remain in place.
It is also unclear how the animation is implemented first elevating then expanding.

May be this will be useful for someone
Container transform spec
Material elevation
Performant Expandable Animations
requestAnimationFrame boilerplate with tutorial
Google Material Design Easings and spec
bezier-easing by JavaSctipt

Related

Material Design Lite Layout similar to Google Support webpage

Is there an existing Material Design Lite template that provides a rendering similar to Google Developer Console Help?
You'd do best to learn the Materials Grid, and check out some of the individual components. Everything else will flow from there.
The example you have should work fine. Just adjust the columns to allow for your sidebar. See Layouts
The primary content can be housed in a card, which will provide all the spacing and margin you are looking for, as well as have a configurable shadow (e.g mdl-shadow--2dp) See Cards
You can compare against the Text-Heavy Webpage Template for how to nest elements within cards.

Growing tree/fractal type animation

this is a more "what technology to learn/use" question. Basically I'm a web designer/developer currently in my 2nd year at University and wanting to start developing my owe personalized portfolio website.
I've recently been getting into CSS3 animation and god is that stuff awesome. Anyway my new portfolio idea is to create a website that is essentially animation based. I know CSS animation is currently a limited option and thus want to know if I need to dig my head into some JavaScript to get the desired result. Essentially the website will be like a "garden" or just nature. I to use vector based graphics and have trees grow out of the "ground" upon load, clouds sweep across and other such things.
The most complicated thing I will be animating will be the tree as the clouds and such can be transformed and animated using CSS. Here's an example of how I want the tree to grow and to look like Pythagoras tree.
http://andrew-hoyer.com/experiments/fractals/
I won't be wanting or needing it to grow based on mouse movement or bend to the right or left. Just go from box to pythagoras tree.
Thanks for the help.
You can use three or d3 or a similar geometry library.

HTML/CSS - Floating images based on browser size

I'm trying to create a HTML5 app with cross-browser compatibility - ideally for mobiles. I'm using HTML5/CSS3/JavaScript/jQuery(with mobile).
My homepage needs to be six square buttons(images) that are centered to the page, so if you imagine a mobile screen with two columns, three squares in each, in the center.
I was hoping someone with more experience might be able to guide me to which is the best way to tackle this problem? It would be cool if the screen was turned horizontally that the images would float into 3 columns of 2.
If anyone has any ideas I'd very much appreciate it. I apologize that my description is a bit brief but I haven't wrote the code just yet, I wanted to see what people thought first of all. Thanks.
If you make the buttons display:inline-block they'll flow across the page. Then you just need to center everything and you're done. Check out this fiddle for an example.
Use the concept called web responsive design
refer
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
http://johnpolacek.github.io/scrolldeck.js/decks/responsive/
http://smallbiztrends.com/2013/05/what-is-responsive-web-design.html
Example sites
http://socialdriver.com/2013/06/50-best-responsive-website-design-examples-of-2013/
http://socialmediatoday.com/jacey-gulden/1687451/10-examples-inspiring-responsive-web-design
To make your app for multiple device screen sizes...you can make use of css media queries
Also you can specify the layout/btn sizes in percentages along with the usage of the media queries.

Magnifier effect for D3/GraphGL force directed network visualization?

Is it possible to create a smooth animated magnifying effect (similar to the dock on Mac OS X) when hovering over nodes in a force-directed graph visualization using the D3 or GraphGL libraries?
The nodes would need to expand and displace the others around it, while maintaining the force-directed layout.
If someone could fork this to demonstrate, that would be great! Thanks
note, this is different from a simple zoom as in this question
Great question. To answer it, I implemented a D3 plugin for fisheye distortion. It's roughly based on previous work in Flare and Sigma.js, which are in turn based on the work of Sarkar and Brown, "Graphical Fisheye Views of Graphs", CHI'92.
Here's a quick demo with the Misérables dataset. View source for the code. I'll do a writeup later today when I have time.
Note: this uses a static force layout; the layout is computed on startup and doesn't change. I think this is probably what you want in conjunction with fisheye distortion, or else the distortion will compete with your ability to move nodes around dynamically. But in theory it's possible to combine them, if that's what you want.
It'd be amazing if you could do this with pure CSS, but unfortunately it looks like attributes for various SVG elements (ie, circles) aren't reachable via CSS. Specifically 'radius', but I think this is true for a whole slew of SVG element properties.
But its not super hard to do via d3. Here is my example jsfiddle. Basically you do the following:
Use transitions (see Tutorial #2 to learn how to use these). Basically do a d3element.transition().delay(300).attr(...) to make the changes happen.
To keep the 'blown up' circles from overlapping the best I could figure out to do was to modify the force layout's charge setting. Increasing the repulsive forces when circles are larger.
Hopefully thats what you are looking for...
Pure css can do this if you accept it.
.app{
-webkit-transition-property:-webkit-transform;
-moz-transition-property:-moz-transform;
-transition-property:-transform;
-webkit-transition-duration:.15s;
-moz-transition-duration:.15s;
-transition-duration:.15s;
}
.app:hover{
-webkit-transform:scaleX(1.2) scaleY(1.2);
-moz-transform:scaleX(1.2) scaleY(1.2);
-transform:scaleX(1.2) scaleY(1.2);
}
It's used on my home page tuoxie.me

can Ext JS do snap-to-grid for drag/drop/resize UI?

Currently planning for a time-line application. Each elements on the time line will need to be resizable and draggable with a snap-to-grid positioning similar to jQuery UI's
http://jqueryui.com/demos/draggable/#snap-to
http://jqueryui.com/demos/resizable/#snap-to-grid (the snap to 20x20 kinda thing)
Is this feature available with Ext JS? Been googling around without any results. Can anyone point me to some examples please?
You may get some inspiration from http://ext.ensible.com/deploy/dev/examples/calendar/custom-views.html
Edit
Source code on Github

Categories