I would like to implement an image collage, where the photos are arranged on the page within a 'Word' object.
This is really hard to explain, this maybe why I haven't found any examples on the web. But as an example, let's take the word 'HTML'.
I would like to create a shape on a canvas on the screen, and then have photos transition onto the screen (easing, sliding, flying) and then arranging themselves sporadically around that shape. Then have the images clickable/zoomable. If possible, draggable as well within the shape.
Now, my first question, is this achievable, and how would I go about doing something like this?
I don't know too much surrounding HTML5 canvas, and am using this project to get my teeth into it. So I would really like to know briefly how something like this could be done.
thanks!
You can do something like a mask in photoshop you would get an image with invisible area with the shape you want to mark and then put the world image in the background.
This might also be of help http://www.html5rocks.com/en/tutorials/masking/adobe/
Related
There is a video of concept desktop. https://www.youtube.com/watch?v=4ftpcHD3378
Well, may there is a way to make curved shape div... or at least to fake it. All I want to do is to bend div as it looks like a bit curved in 3D. I don't need any features as in video. If there is a way to do this in javascript/jquery tell me plz.
Another possibility is to use the perspective CSS property, I created a web photo gallery wall using this method, with similar results that you are looking for.
I used this website to help me build my gallery:
https://css-tricks.com/almanac/properties/p/perspective/
I'm trying to do something that seems simple, but I just can't do it.
I want to have an image that can be zoomed in and out, probably in a canvas (this I can do it).
But, I want to be able to put annotations on this image, like annotations on a map. I could also do this, with an html list positioned on the image.
Problem is, I have no idea how to merge these two concept into one, I know I can't really put html in the canvas, so forget about the li there.
Example of what I would like to be able to do (this is done in flash): http://www.digitalwanderer.net/darksun/
Any one has any ideas of the way to go to reproduce something like that in html?
I'm looking for this particular effect, like green screen, but without a green screen :P
So, you set a camera at a fixed place, then you take one photo that will be the "green screen" so you doesn't really need one.
Any plugin, easy-way, to do it with canvas/webgl?
Seriously.js is really nice, but only work's with a green background or a fixed color
Thanks!
Simply check each pixel against the "green-screen" image and and if they're equal by some threshold make them transparent, or set them to what ever you want.
Depending on the resolution of the image you want to process, using a normal canvas(2D) will probably be too slow to do this.
If you would like to process video content in "realtime" you would need to go with a webgl approach with a simple glsl shader.
I dont know of any libraries doing this for you. Using the canvas approach should be fairly simple, using webgl you would need to learn some webgl using framebuffers, textures, basic geometry rendering(a library like threejs could handle the aforementioned) as well as some basic glsl.
I am looking to animate an image onto a canvas via a circle 'brush' [Think Photoshop default brush] wherever the circle moves on a path the image is revealed.
The image would be a bitmap, not a vector file.
The brush will not have any additional detail beyond displaying the image its 'painting'
As additional clarification, the circle brush is moving automatically the user does not move the brush. It is just animated along a path.
I am really curious to see how this can be done with Raphael.
Thanks in advance!
If you want to achieve something like that, you better think of using Canvas. Since Raphael is a library oriented exclusively to SVG. You can use non-svg images, but you are going to face lots of limitations.
On the other hand, Canvas is pixel oriented, so what you are trying to do is going to be easier.
Raphael is great when it comes to SVG and user interaction, because the elements you create, are nodes inside the DOM, and you can easily bind them to events.
If you still want to achieve something like that with Raphael, you are going to need to start digging a bit into Raphael's methods. Is to difficult for someone to explain the whole process. You better start trying, and ask some question on more particular problems.
Apart from Raphael's documentation, I recommend this exaggeratedly colorful, but useful site which have some working examples.
Either way I think you should reconsider using Raphale over Canvas!
I hope that helps!!
I'd like to know how to make the faces of a 3D slideshow interactive i.e adding links on it.If creating multiple faces or walls is the way to go does that mean I put a layer over each wall and is so how would I do that?
In the end each wall should be able to be treated individually but all still in this cube form.
This is the slideshow I'm talking about
http://www.script-tutorials.com/html5-3d-cube-slideshow/
Thanks alot for your time!!
Well, they aren't really html objects. The "walls" are created using the canvas tag - which basically just means javascript. If you want to make it more interactive, I'd recommend that you look into CSS animation instead. You could probably achieve the same results using CSS. Search google for CSS animated cube or something like that.