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/
Related
Animated Motion Background Effect
i have tried the answers from the question above, but not exactly what am looking for, i am looking for a way to create the same background effect like the one on this webpage: https://fonoapi.freshpixl.com/ any tips or how-to on how i can create it? i came across it and wanted to know how i can achieve the same effect or create a new one.
That effect has been created using a particle api that can be found on GitHub https://github.com/VincentGarreau/particles.js
It has nothing to do with css and/or css animations, it is basically a particle simulation rendered to a html canvas element.
I'd like to circle mask the following:
See on maphttp://a.tiles.mapbox.com/v3/sinan.map-l9wtmm6y.html#15/41.00996511838453/28.974809646606428'>
I checked the previous topics but since I am very new to html I couldn't find the answer.
appreciate your helps.
It would depend on how you want to go about it, the simplest and unfortunately the least robust route would be to create a large .png with the alpha in the center transparent.
There are also ways to do it using html5 canvas, CSS3, etc. but I think the more important question is what you are trying to do with it before you decide the route to take. (do you need it to resize, do you need it to change colors, etc.) Here is a link to another stack overflow post that may get you on your way.
Best way to mask an image in HTML5
The problem I have about using the map & area tag is that I havent been able to find out a solution to having "holes" in the area, for example imagine a lake on map, you dont want that area to be clickable.
Example code:
http://jsfiddle.net/WbKqS/
In this example I have placed 3 lakes on the map but I dont want the lakes to have the hovereffect/being clickable, is this possible? Maybe with another technique?
HTML areas don't support having holes or multiple sets of coords, so you'll need to go with a workaround.
How about a solution based on the approach illustrated below?
I don't think this is a good idea to develope this using area map. I would use Raphael instead. a map example with Raphael
You could position other 'hidden' (div) elements over the lakes, preventing the hover effect from being triggered. Disadvantage is shape of the elements (square). Using canvas could be a solution for that, but not all browsers support it.
I wish it worked that way, but it does not as of right now. Try using SVG format instead. That's Scalable Vector Graphics technology. SVGs support holes and multiple shapes or islands if you will.
Hope this helps, it helped me in Firefox.
If that method fails, I'll look into using <canvas> tag.
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.
I have a banner at the top of my website that is blue with a light radial gradient on the left side.
I want to have white text animated that scrolls up on the right side of the banner. I want it to fade in as it appears and then fade back out. I would like to do this without the use of Flash, and as little Java as possible. I can work my way through CSS and set up the layout, but I don't know how to code it so that the animation will work.
I'd also like the white text will be the titles and a very brief summary of recent blog posts for the site. (probably the RSS summary) I don't know if that's easy to code into it or if I'll need to hand code that every time I have a new blog post.
After some basic research I think what I'm looking for is HTML 5 canvas, but I'm not sure.
Update: 10/21/2015: The following answer required you to explicitly provide values such as 100em in order to achieve offsets. This is not ideal. Instead, you can translate the element.
Update
You can indeed do this today without flash or JavaScript. You can use the keyframes feature in modern browsers to move text in modern browsers. I took the liberty to work up a quick demo demonstrating the concept: (horizontal) http://jsfiddle.net/jonathansampson/XxUXD/, and (vertical) http://jsfiddle.net/jonathansampson/h7SYp/.
Essentially we set the initial starting-point of the animation to text-indent: 100% to set it out of view and to the right. Then we set the last frame to text-indent: -100%, or whatever is needed to hide the text (will vary depending on character-length).
Old Answer
You won't be able to do this without flash or Javascript. HTML is structure, while CSS is presentation. Neither of the two provide animation-capabilities. I would suggest you go a route that includes a small javascript framework like jQuery, as this can convert standard HTML into the animated effect that you desire.
I would encourage you to look into the Cycle Plugin for jQuery.
What you need is JavaScript rather than flash or java.
JQuery is ideal for this type of animation. It's a JavaScript library that simplifies writing such JavaScript functions. There are many plug-ins available for jQuery that give similar functionality to what you require - have a look at JQuery Marquee
You'll certainly need to use JavaScript, unless you want to use Flash. You cannot do it without a program.
Your best bet is to look into an animation library.
Scriptaculous can do everything you describe, but doing what you describe is not for a JavaScript beginner.