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.
Related
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. :)
I have an SVG logo made up predominatly of elements. I want to animate this, or more specifically drop it into a "gravity world". I was hoping to use Box2D (web port).
I'm a noob to Box2D and Canvas really, but I've got as far as converting my SVG into HTML5 canvas using canvg and I'm now reading through the getting started tutorials for Box2dWeb and I can see how to create a world with gravity, but I can't find any examples of walking an existing SVG or Canvas and simply adding the shapes to that world.
It looks like you need to use the Box2D drawing methods. Can anyone point me at a simple example that takes an existing set of shapes (SVG or on Canvas) and simply drops them onto a Box2DWeb gravity world so they simply collapse to the bottom, much like nearly all the existing Box2D demos and tutorials?
Note that with CanVG I'm not adding the shapes to Canvas myself, it is creating the Canvas for me from the SVG.
You can add whatever you want on top of box2d. If you wanted to draw dancing elephants instead of a box shape, that's up to you. Otherwise games would look pretty boring.
Nothing prevents you from using either SVG, canvas, WebGL or even HTML with box2d, you don't need to use the box2d drawing methods if you don't want to.
See this blogpost (and code) for using box2d together with raphaël (SVG). Dmitry Baranovskiy (the author of Raphaël) has also shown some demos of a custom box2d port/wrapper called newton.js. It's not yet released AFAIK, but it promises a simpler and more javascript-like API.
Please check out these links,
1) Box2D orientation for the JavaScript developer
2) Box2dweb Study Notes Series
3) BOX2D JS – PHYSICS IN HTML5 & JAVASCRIPT GUIDE
Regarding the html elements to apply box2d effects i also can't find any other links expect the one you mentioned in your answer.
I had been hoping that with a bounty somebody would be able to illustrate for me the "hello world" of 'gravity demos' that could animate some arbitrary shapes. Articles and links I've been shown (and found) so far are much more complicated than I'm looking for.
Whilst I hate to answer my own question, I'd just like to set the bar. This is EXACTLY what I'm looking for;
http://mrdoob.com/projects/chromeexperiments/google-gravity/
This script for this code is licensed under GPL3 I understand and I've tried it out successfully on my site. In fact, it just causes all the DIVs on my page to drop, so it's just the ticket, and I could use it.
It's not however, a simple script. I'd have preferred a simple stand-alone sample if it were possible. Failing that, hopefully this answer will help anyone else looking for something similar.
[Updated]
I've also since found this plugin, although it's a little CPU intensive and crashed Chrome for me.
http://tinybigideas.com/plugins/jquery-gravity/
I'd still be delighted to award the bounty for any better answers.
I'm pretty sure that this is what you want, it uses Gravity Script (the file's so large because it includes jQuery and Box2d.js):
Demo: http://jsfiddle.net/SO_AMK/Cf7jn/
JavaScript: None! It's in it's default configuration.
I don't really know 'Box2d', and I'm not sure if this is what you mean but just to clarify if it comes to where you need it, in HTML5, it works like having the background or style to a <table>, Which if you don't know is just about the same thing as a table in MS Word.
Sample Canvas:
<canvas id="myCanvas" width="200" height="100"></canvas>
More Color & Style:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
And If Allowed in 'Box2d' add some javascript:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Well, Dmitry's newton.js is not yet public. But like #cirrus, I needed something similar. So I've gone ahead and created my own newton.js. It is not well tested, but has API similar to what I can see in Dmitry's video + my own requirement (I wanted to create a game engine on top of Raphael as a renderer)
Please fork at - https://github.com/dbose/newton.js
#cirrus, it also has a simple test.html, which takes a simple Raphael element and add it to the Box2D "world"
Contextually, I needed this because the core of my app (Mixow) was a Raphael editor and later I wanted to create a game maker out of it. (http://www.mixow.com)
I am trying to create a similar effect as seen here:
http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/
However, I can't seem to get this to work on my page and I would like to apply this effect in a div that contains an image. Is this possible or does everything have to happen on the canvas?
When I try to recreate the effect described in the tutorial I get lots of errors such as variables not being defined etc.
You could re-create this using Canvas, or using CSS transformations and shadows, or a mixture of the two. As for the undefined variables, I can't help as you've not posted your code.
A clean approach would be to do everything within the canvas, using JavaScript. You can draw both the foreground grass, and background mountains to the canvas. However if you want to partly use a <div>, you can overlay the div on top of the canvas using CSS position:fixed or position:absolute, also using CSS z-index to set their order.
I recommend the following link, scroll down for the image drawing:
http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
I don't know how else I can help, as the tutorial that you've provided explains everything quite well. But if you've got any further queries, feel free to comment, or update your question.
You can use the proton particle engine easily achieve the effect you want, Its API is very simple.http://a-jie.github.io/Proton/
I'm trying to create a pure css Venn diagram like this
Where the circle gets highlighted on mouse hover. But the problem is: using the border-radius property if I mouse over the corner of the circle (outside the circle) , it triggers hover as well.
for a demo see this jsfiddle link and hover over the red area
is there any CSS solution to avoid this or am I ganna have to calculate it using javascript?
EDIT: Thanks to all for the responses.
I should have posted the browser information as well. I'm using Chrome 12
So far it seems this bug exists in chrome. I will update this page with any further findings.
UPDATE Aug 2013: Just tested this again on Chrome 28 and the issue no longer exists.
I know it's possible to draw circles with border-radius:50%, but it really is a bit of a hack. And it doesn't work in IE8 or lower, without using even more hacks, like CSS3Pie.
So while I accept that you've produced a good-looking Venn diagram in your fiddle example, I don't think it's the best way to do this.
A much better solution would be to use a proper graphics library to draw the diagram using either Canvas or SVG.
For Canvas, you could try this library: http://www.canvasxpress.org/venn.html
For SVG, I would recommend Raphael, which will produce hover-able Venn diagrams in about four lines of code.
I know that neither Canvas nor SVG are supported by IE8, but then neither is border-radius, so I assume that isn't a criteria for you.
In any case, Raphael does actually work in all versions of IE, as it detects the browser and renders VML instead of SVG if it's running in IE. Canvas support can also be hacked into older IEs if you really need it.
I'm creating a web page, and I can't (with html code) add a draw box*?
*It's a box, like a Microsoft Paint, only with one brush, where the user make a draw by a click draged.
The following links may be helpful:
Doodle, A Demo Drawing Program
Raphaël
DojoX
Canvas
Also, have a look at this StackOverflow thread: Drawing on top of an image in Javascript.
Steve
I'm afraid there is no simple way to do what you want to do. The current version of HTML (4.01, I believe) does not support this at all. HTML 5, which is still in development, has a <canvas> element that can be used with javascript to create the kind of thing you are looking for, but only the latest versions of Firefox, Chrome, Opera, and Safari support it.
See: w3schools.com/tags/html5_canvas.asp for an explanation of the <canvas> element and dev.w3.org/html5/spec/#the-canvas-element for the full (uncompleted) specs.
See: http://devfiles.myopera.com/articles/649/example1.html for an example of the kind of design you are looking for.
There's no HTML element that's a "draw box". You'll need to find something built in JavaScript/Flash/Java and drop it into your page.
Try CanvasPaint or this other Canvas Painter.