Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
How would you go about animating (and creating) the circles as shown in the image with javascript? I'm not sure what to call this, so I just said "border".
You'll need to animate svg elements bound to some data. Have a look at the D3 Radial Progress Component. This component is based on d3.js which is "a JavaScript library for manipulating documents based on data".
Please note that d3 is really complete and might be an overkill if you are just dealing with one graphic. But at least now you know what to search for.
There is a lot ways to do it, here are some
JS/Canvas:
http://p.ar2oor.pl/cprogress/
http://anthonyterrien.com/knob/
CSS3:
http://fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar
http://www.alessioatzeni.com/blog/css3-loading-animation-loop/
SVG:
http://raphaeljs.com/
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
How can I create something like a profile card where I will modify some text and colors and then make it an image? I have no idea where to start.
The best thing to use in this case is SVG. You're combining data with a variety of elements and then putting them all together. SVG is much like HTML, but with a tighter focus on the image itself. You can combine raster elements, your data, and vector elements, to make the final image. From there you can either use this image directly or render it to a PNG.
I strongly recommend leaving it in SVG if at all possible, to preserve the text nature of a lot of this data. Not everyone can see the screen. If you burn text into a raster image, screen readers won't be able to read it.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I found this site Storj.io. I really like the design of the site and was looking at the header. There is a background-image and then on top of this there are those points that are moving. How can such a animation be achieved? Is this done with html5 and how or is JavaScript used?
Inspection reveals they are using Particles.js
Particles JS
They provide documentation to get you started and achieve the effect you are looking for.
Your question is too broad for a complete answer. Try asking about smaller parts of it when you get stuck.
From Scratch: In essence you'll want to look into using the <canvas> element to draw particles. Take a look at this simple example of what can be done. Here is a blog post on particles with canvas to get you going (which culminates with the previous example).
With a library: https://storj.io is using particles.js. But that doesn't tell you how it's accomplished. On the plus side though, the library can easily be included from https://github.com/VincentGarreau/particles.js/ (see the demo on codepen).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I wasn't sure if this question has already been asked before but I was wondering how you produce the interactive dotted text and the running tiger animation you see in the middle of the run4tiger website?
http://run4tiger.com/
Any information would be appreciated.
They are using canvas elements to achieve this.
The canvas will catch the mouse over events and then react accordingly.
The loading tiger screen was drawn using SVG.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Can any please suggest how to draw a bar chart using only HTML DIV with all features like legends, animation(each bar should animate from 0(Y axis value 0), etc.
Take a look at the d3 introductory tutorials. The second tutorial shows how to make bar charts using divs. You could create static barcharts with some html and css but since your question is tagged with javascript this might be a good place to start.
The same or better can be achieved by applying the same principles to SVG.
Good luck!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want to create a image gallery using Html 5 Canvas and when I hover a image, it must grow and change opacity. In addition to image selectable and draggable?
How can I do this? Any ideas?
Well sir, first try to code anything and then come to ask for assistance with particular problem. For now it looks like you have no clue about subject and not even tried. I can anwser a question like how to manipulate opacity in canvas, how to implement drag and drop, etc...
but NOT I need someone to implement my whole idea for me
I should also point out that Canvas isn't probably the best technology for this task (in the meaning of both performance and implementation difficulty).
If you insist, you will have to rewrite all functionality which is already easily accessible with DOM and libraries like jQuery.