img to animate
Hey all, I was wondering if you can recommend me way to animate the droplets of rain?
Also, make it in a way without the eagle. Plus, to make droplets splash upon contact with the ground(which is the line)
I am a bit of beginner to javascript, but finished 9 months course and reading eloquent javascript. I need some practice, so I came up with this picture (found it on youtube) as a means of practice.
Appreciate all the help.
Considering that you are relatively new to JavaScript, this would be very hard to do. You can check out the HTML Canvas element and use JavaScript to animate using using classes and arrays for the raindrops, but without enough knowledge in JavaScript you would probably be better off using animation software
Related
I am trying to make my website a live background of space. I am attempting to get the stars to spawn on the left of the screen and slowly move over. And occasionally their will be stars that come in from other directions. My question is, how should I go about doing this?
Would it be smartest to make a Javascript, script that would make a LOT of <div>'s and then move them all randomly? Or would it be smartest to use a canvas? I've never used a canvas before so I don't know all it's uses yet.
Here's a link to the effect I'm trying to emulate (It's a YouTube video with music) - https://www.youtube.com/watch?v=y8MsE-4dygY&list=PL21A7A915E7020E73&index=16
I'm trying to emulate what the stars or partices are doing in the background of that video, so how should I go about this? (I'm not asking for all the code, I'm just making that clear.) Thanks in advance! :)
well, you can obviously use a Parallax background with some overlays for an easy effect, but you can go further by using any of the many scripts out there, search Google for that. Or you can learn how to do it via scripting with this great tutorial that makes use of HTML5 and CSS3
Canvas may be more performant than adding lots of divs as you won't need to create a large DOM tree. DOM operations are expensive and can cause memory thrashing if you repeatedly create and destroy lots of elements. Using multiple overlaid images and CSS3 translate transitions should be more performant still, but may make it harder to achieve all the effects that you want - randomized movement, separation of stars on the same plane, etc. etc.
I am curious as to where to start to make something similar to HERE as I cannot find any information about it. It may be fairly simple and im sorry if it is.
What I am hoping to replicate is the colour grid that generates based on the colours and size of the lines. I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line and it will then calculate the image. I have been looking around but cannot find information about how to replicate it. I may be searching for the wrong thing as javascript is not my strongest language.
I know of a roundabout way to do it with svg but where would I start for javascript/jquery?
I know of a way to do it with svg but where would I start for javascript/jquery?
Well, SVG would involve javascript as well, wouldn't it? You're just looking for different ways to display an image. None is native the javascript, that is just a programming language, you'd have to consider which API to use:
There's nothing wrong with SVG! It even seems to be the easiest solution, maybe wrapping DOM code in some nice drawing library.
It has been demonstrated that such is possible with CSS3 background patterns, although I would consider this rather unusable
Use the <canvas> element! This would be the most genuine HTML5 approach, and even though the api is rather simple there exist mighty libraries.
I want to make a moving man in css/html/javascript, also detect collisions with other objects. Any idea how to do it? or any pointers to the same will do great.
The first try is look at rapahel js project it uses canvas, second it is a pretty hard thing to do as you want your own physics engine at 2 D level, but i guess with some math formulas you could do it, but everything that you need as an object should be scripted in js to be sure to get the collision effect.
Some design patterns should help you to make your code better.
Good luck.
Pretty much any basic game tutorial covers the topics you asked.
If you can't find a javascript version of that, just get anything in a language you are familiar and try to code the same thing in javascript.
to draw things somewhat in the same way these tutorials probably do, use a div with "position:relative" and its children with "position:absolute" and use "top" and "left" css style proprieties to position the boxes/sprites/whatever.
I am pretty sure you can figure out what to do if you follow these tips.
http://www.html5canvastutorials.com/webgl/html5-canvas-webgl-plane-with-three-js/
In this example its just a rotating plane.
I'm an html 5 beginner :)
However, look at how many calculation does the JS code.
I dont have any trouble with it.
but this is how its gonna be ? ( while learning html5)
for every animation I should look for the js code ? ( and try to custom it to my needs) ??
and if so , is there any centrelized place of general scripts for html 5 animations ?
Depends.
Using canvas and JS, probably. The code is just a raw drawing board, so it is subject to the same drawing code you would using in most similar scenarios. three.js (as used in that example) is used to make things easier, and having a 3d drawing context for canvas will help, but it will be pretty much the same thing as three.js (it may be even using it, I don't know. Haven't used it before).
However, that said, for simple things like that, CSS 3 3D animations will make things possible. You can modify things like perspective and rotation and get effects like that. So it depends on what you will be using it for.
If you can get away with CSS and elements, than it can be pretty easy (keyframes and CSS styles). But if you're looking for more complicated 3d effects, than yes, it will be more complicated.
I'm searching for a plugin, library or just a custom JS function that will enable the manipulation of images so that they look like they're winding around a roll of paper.
If it's hard to imagine, think of a paper towel roll standing up spinning. I already know of jQuery Roundabout but that only moves the images. I need them to actually be distorted as they roll around. I can't seem to find anything of the sort.
Thanks!
I'm not sure of any plugin that does that, but I'd recommend learning about the canvas element and its JavaScript API.