Html 5 Canvas image Gallery [closed] - javascript

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.

Related

How to create images using JavaScript/Node.js? [closed]

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.

Small tiles that get bigger when clicked [closed]

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 want to create a webpage with several small tiles that enlarge when clicked (And show more/different content, but that's not a part of this question).
This is what I have now: http://puu.sh/nX929.png
When I click on the first tile, it looks exactly like I want it to: http://puu.sh/nX9l9.png
But when I click the second tile it looks like this: http://puu.sh/nX95G.png (gap on the left)
That's not what I want, I want to other (small) tiles to float around it. To fill the empty space.
The source code (+ live example) can be found here (but I wouldn't mind doing it in a completely different way): https://www.crescendosassenheim.nl/Hugo/Training/
I don't even know what to Google, because I have absolutely no idea what kind of technique I can use to achieve what I want. Any suggestions?
http://masonry.desandro.com/methods.html Take a look at this I am sure this will help you, what you want is even displayed at the bottom of the page i am linking.
Download masonry in your computer link to it and follow the little guide in their website.

HTML/CSS for an infographic page [closed]

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
I'm looking to create a web page that incorporates an image of a house - with various parts of the house responsive to mouse clicks. The house would be the single primary element on the page.
Given that I will probably employ an illustrator to make an image, should I:
try and make it 'box-like' so that I can do it in HTML5/CSS3
use SVG to get as close to the design as possible
use an imagemap and Javascript for detecting the clicks on the image
if it was a chart-type infographic, I would use a charting JS library but it's more of a custom image.
Links to informative URLs or example pages would be greatly welcomed.
I'd suggest using SVG.
In this way you don't compromise on the quality of the image yet you retain an easy way to 'assign' certain parts of the image to have event handlers attached to them.

track eye by tracking.js [closed]

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 8 years ago.
Improve this question
I recently found recently the JavaScript library - tracking.js
Is there any way to detect what div I see now by image or camera?
I have two elements on the desktop, the left and right columns, and I would like to check if I see left div ( with console.log() ) or right div. This library is simple, and I know how to add a script, but I don't know how to detect my eye and detect what element I see.
Maybe there are other ways to detect this.
Thats a bit complicated because you need detect minimal ocular movements and the common webcams, haven't resolution enough, but with some hardware like this project http://pupil-labs.com/pupil/, could do that.
A good solution is tracking.js because this library simulate human behavior with a some algorithms and should be enough to make simple decisions like the columns position.

Film strip image gallery [closed]

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 9 years ago.
Improve this question
This is the layout of what I want to do.
2 divs are there.
Below one(rectangle shaped) should be used for image thumbnails which can be scrolled horizontally
Square on above is for the image that will be shown when clicked on thumbnail
Can anyone guide me how to proceed for thumbnails and scrolling.
Building something like this can be quite straight forward but can be time consuming. I think that the best way you should go around this would be to use something that is already been developed and is already out there and is free.
If you take a look there seems to be a lot of people who already have the code built and ready for download similar to what you are asking for
Hope this helps!

Categories