I've discovered ways to transform css shapes using animations like the ones demonstrated here: http://matthewlein.com/ceaser/
Does anyone know if it is possible to get more advanced with CSS or other non-flash code, to create animations more complex - even along the lines of the effect you see when minimizing or maximizing windows on Mac OS toolbar?
Is that possible or out of the realm of possibility using css?
Thanks,
This should be enough to get you started:
http://jsfiddle.net/9BTPy/
Notice that I only made a sample for Firefox for simplicity. Otherwise the code would get too big. It is also not the effect from your question, but you should get the idea.
Also see the following links for documentation and other examples:
http://css3please.com/
http://www.w3schools.com/cssref/css3_pr_keyframes.asp
http://www.w3schools.com/cssref/css3_pr_animation.asp
Additional Notes:
If you really have to do it this way, you are off way better with jQuery-Animations. The support over the different browsers is better, and it may be even simpler to do the effect you describe. It's also way nicer to maintain. :)
Related
Is it possible to add a glow to the outline of an Image? I know I can do this by adding an additional "glowed" version of the image and switching to it when desired, but since there are many different shapes in my game, I would prefer the glow to be done programmatically. How can I do this?
As #Metaphore mentioned, shaders are indeed the best option I found. I've succeeded in adding an outline to any desired image in my game by following this article and by getting crucial information from asking a follow up question.
The only way to do this is to use your own pixel shader when drawing this particular image.
You can find a lot of glow effect shaders on the net and there are may tutorials how to use them as well. You may check official LibGDX article on this topic https://github.com/libgdx/libgdx/wiki/Shaders
However, I'd not recommend you follow that way, because using different shaders for drawing single images will make you render cycle code much more complicated and less optimal. So either you will compromise on it, or just find easier way to achieve such behavior without shaders (I mean draw it statically somehow).
I am trying to create an effect like what I have shown in the video below:
http://www.youtube.com/watch?v=gSk4AWvnG8Y&feature=youtu.be
this effect was created in Flash, but I wanted to replicate it (to as much as possible) in HTML5 and CSS3.
I have not done any thing like this before. So wanted to see if someone can help me suggested how I can do it.
Thanks
Zeeshan
Well Spider is kinda right. There are tons of canvas demos describing such particle effects:
http://codepen.io/soulwire/pen/Ffvlo (found here: >)http://davidwalsh.name/canvas-demos)
http://gwtcanvasdemo.appspot.com/
-https://developer.cdn.mozilla.net/media/uploads/demos/b/o/boblemarin/5cfea13ba1397f696bea7b2ff62c0188/fluid_1339407870_demo_package/index.html (found in mozilla labs: https://developer.mozilla.org/en-US/demos/detail/fluid)
etc. (just do a quick google Search).
Doing this with CSS is not possible since you can't track the exact position of the mouse can't create this dependend effect, etc.... and Canvas is HTML5.
For our website, we are developing a "component" that would display images in a similar fashion to Time Machine on Mac OS X. So it will be many images on top of each other, positioned slightly differently and with a smooth animation as you scroll forward and backward.
We have a spike implementation with CSS3 animations but it's not very smooth in Firefox and IE9 is not supported at all (though we may live with it if the other options are even worse).
We are considering implementation in SVG or Canvas but don't have much experience with it so I thought we'd ask first. So:
Requirements:
It must be fast. The animation must be smooth and that is a hard requirement.
It should be supported in as many browsers as possible.
Required browsers are Chrome 20+, Firefox 14+ and IE10+.
We would very much like to have support for IE9 too but can live without it if absolutely necessary.
Opera is nice to have but not necessary.
Options and our current experience / opinion on them:
CSS3 - seems like the "appropriate" technology for the task but unfortunately the implementation doesn't work so well. Maybe we have inefficiencies in our prototype code but the support seems quite different between different browsers at the moment.
SVG - at least it's vector graphics / DOM elements but we don't have any experience with it.
Canvas - we hope that it should perform well as it is used even for games but we can't quite imagine how would all the pixel redrawing work. Maybe we should use some libraries like processingjs?
Flash or other plugins - I happen to know Flash quite well and I know that the Time Machine-like effect would be quite an easy task there but we'd rather stay away from plugins at the moment.
Thanks for advice.
If the size of the component does not have to be very large, but can be limited to say around 800x600 pixels, then it sounds like Canvas should be up to the job.
If you only draw (scaled) bitmaps to the Canvas then performance is very good in my experience, even on iPad2. Performance only really starts to suffer at higher resolutions (1920x1080 and above), so if you use it for a fullscreen feature you need to watch out! Also, fancy features such as drop shadow etc. can slow down performance considerably as well.
Canvas has very few quirks between browsers, so it will almost certainly be less painful than using CSS3 or SVG in terms of getting it to work as expected across a wide range of browsers.
I would recommend whipping together a quick and dirty prototype with Canvas to see if it will meet your first requirement regarding performance.
If you decide to go with Canvas, I would definitely recommend using a library. Since you know Flash quite well you might want to take a look at EaselJS. It has a display list inspired by Flash, and the performance cost of using it is negligible in most cases. You also get basic events for interactivity. Also, if you go with EaselJS, it would be quite simple to port the code to Flash later if you decide to.
Are you looking for something like this? It uses SMIL animation so you'd have to integrate something like fakesmile to get IE support.
I'm a newbie in html5/CSS3/jquery, and I'm making this (not finished yet):
http://catherinearnould.sio4.net/autres/kat/
The problem is that, because of the large canvas with particles, the animations are not as fluid as it could.
So if you're bored, don't hesitate to have a look at my code and give me some advice to improve the fluidity ^^
Many thanks!
For one using RequestAnimationFrame() instead of setTimeout() is likely to make things smoother. See Paul Irish his blog post requestAnimationFrame for smart animating.
The big performance hits are most likely caused by live calculated/rendered CSS attributes such as transparency, shadows and rounded corners.
Also be aware of that changes to DOM elements which cause reflow is costly (such as animations), see http://code.google.com/speed/articles/reflow.html.
I see a big difference just after running this:
$('*').css({backgroundColor:'transparent', opacity:1, boxShadow:'none'});
If you can, replace all (semi-)transparent and rounded graphics with equivalent png images.
You could also think of using css3 transition for some of your animation and removing and adding new classes to the elements to changes their styles rather than doing it with javascript(jQuery). Use jQuery as a fallback for older-browsers and IE.
http://www.w3.org/TR/css3-transitions/
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
This gives the browser the power to do the rendering, and in some cases like in the iOS you can get hardware accelerated for the rendering.
For the canvas element, I have little experience with that, but I'm interested in that effect you're creating. But I think the massive canvas animation at the start is a bit much, there is so much going on already, maybe there is no need for that effect? Just my opinion as a user.
I was wondering, without using images, how can I show a diagram in an html page? From a 3rd party, I am getting data with coordinates, labels, etc. I need to convert this into something graphic. I suppose SVG is doable but IE has problems with SVG in IE < 9... or so I read. What about canvas? Problems?
Any other options out there?
And, to make things more complicated, at some point, users should also be able to manipulate the diagram. That is, move 'objects' within the diagram around to make it look 'better.'
Thanks
both SVG and canvas are options, but you will probably want to just use a diamgram javascript library without having to write the SVG or canvas code yourself, like raphael, http://raphaeljs.com/
I'd suggest checking out a few of the existing js libraries for drawing graphs. I've listed a bunch of them here.
These libraries have already solved the crossbrowser issues for you, and are usually compatible with all browsers down to IE6.