Clever Geek Handbook

Make 3d effect with jquery

When I was surfing the internet I saw this: http://www.enter-the-void.co.uk/#/menu Do you have an idea to do this with jquery / html5?

Thanks in advance.

EDIT:

Finally, I think the best way is to use this method:

  • Create a div container with 100% height and 1200px width for example
  • Create and fix many small divs on this container
  • When jQuery gets the mouse position and moves the div container to the right or left
  • When dragging a container adds a "perspective" style with a CSS 3D conversion to small divs

What do you think?

+3


source to share


4 answers


There are obviously several creative ways to figure this out. BUT, at the moment, no browser supports 3d rendering natively. However, webkit, opera and mozilla support 2d rendering

This means that through javascript and css only you can create a 3d appearance. But beyond what has already been mentioned (WebGL, 3 .js library, canvas tricks), no browser supports 3D rendering.



Read my day's blog post about this: Simple '3D' rendering with CSS3 and Javascript

+1


source


At the top of your head, Three.js can help you with this. Its a javascript library for rendering 3D objects. I think the objects themselves would not be too complex; a bunch of flat surfaces with custom textures. The camera can be more difficult to execute.



+1


source


You can use Webgl or canvas to create this effect

0


source


As rori mccrossan said in a comment.

check for jquery parallax, this is exactly what is happening on void site.

place your divs on different parallax layers and see the magic happen; -)

http://stephband.info/jparallax/

https://github.com/IanLunn/jQuery-Parallax

http://www.sequencejs.com/themes/sliding-horizontal-parallax/

0


source






More articles:


All Articles