Is it possible to make curved shape in 3d perspective div? - javascript

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/

Related

How can I do complex animations within JavaScript?

so I'm wanting to have various sized triangle particles fly in from a random direction (all over the screen) and then assembles to spell the word "Zoid". I have been looking and three.js looks to be the API that I should use for this kinda stuff.
What three.js example should I be looking at?
I am not looking for someone to make this for me, I am only wanting the name of the technique/animation.
http://anime-js.com/ take a look at this seems like a pretty good framework for animated javascript

Implementing Image collage to a 'Word' shape using HTML5/JS

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/

Animating "Painting" of an image onto the paper in RaphaelJS over a path

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!!

html5 cube slideshow

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.

Which js library to use for creating not complicated animation with html5 canvas?

I want to write some animation with html5 canvas element. I found that there are some js libraries that help to leverage canvas functionality. For example KineticJS, FabricJS. But I don't know which library to use.
What is pros and cons when using this libraries? Or may be you know even better implementation?
edit
I'm going to create something similar to static picture, but with piece оf animation. For example floating clouds on the sky, flower where you can tear off a petal and throw it. May be some animation with sun. This is general description, hope this helps.
There is Processing.js, which is a port of Processing for Java. Processing.js is ideal for 2d images.
Raphaël uses svg to draw images, which results in more compatibility.
For 3d there is Three.js, which uses both canvas and webgl.
There are a lot of different libraries around, you should first find out what you want to draw.
http://javascript.open-libraries.com/utilities/drawing/10-best-javascript-drawing-and-canvas-libraries/
cgSceneGraph is a javascript animation framework providing a full animation engine with timelines, animation keys, ...
It also provides helper methods to easily add animations on every attribute of an element.
The example on the home page of the website is exactly what you talk about, so it should fit your need :)
For simple animations forget the canvas and use position: absolute div elements with background image that you can move around with CSS transform translate3d and scale3d.

Categories