Skip to content
This repository has been archived by the owner on Nov 24, 2021. It is now read-only.

simulating 3D planes with 2D physics engine #10

Open
urbien opened this issue Dec 25, 2013 · 0 comments
Open

simulating 3D planes with 2D physics engine #10

urbien opened this issue Dec 25, 2013 · 0 comments

Comments

@urbien
Copy link
Owner

urbien commented Dec 25, 2013

2D Games have been using parallax effect to create a depth of field feeling. Web sites recently started to use this technique. Some mobile apps do that too. See for example Pandora using content as a layer that is closer revealing menu in a background that is moving as well (note menu text changing its distance to the edge):

photo 1
photo 2
photo 3

There seems to be a simple way to create parallax with css (and it works fast as actual transformations are performed by the GPU):

  1. give depth to brick on Z axis, e.g.:
    translateZ: -30px
  2. set perspective on a container:
    -webkit-perspective: 500; -webkit-perspective-origin: 0 0;
  3. change perspective origin on a container as we scroll/transition:
    container.style.webkitPerspectiveOrigin = scrollXdelta + "px " + scrollYdelta + "px";

So, how does one utilize physics engine to help with this, or do we need to do it outside of it?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

1 participant