A Pen by famo.us.

index.html

<!--


Famo.us is a free, open source Javascript development platform that can build apps, games and interfaces using HTML5 and WebGL.

Check out how this is made: https://vimeo.com/83814887


NOTE: This is a demo based on an old version of the framework.  For an updated version of the framwork, and more demos, visit http://famo.us.


-->

script.js

//CodePen Evaluation License
//
//Copyright (c) 2013 Famous Industries, Inc.
//
//Non-sublicensable permission is hereby granted, free of charge, to any person obtaining a 
//copy of this software and associated documentation files directly from codepen.io (the 
//"Software"), solely to internally make and internally use copies of the Software to test, 
//explore, and evaluate the Software solely in such person’s non-commercial, non-
//production environments, provided that the above copyright notice and this permission 
//notice shall be included in all copies or substantial portions of the Software. 
//
//THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
//EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
//MERCHANTABILITY, FITNESS FOR A ARTICULAR PURPOSE AND 
//NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
//HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 
//IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR 
//IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
//SOFTWARE.
//

//  CodePen Evaluation License
//  
//  Copyright (c) 2013 Famous Industries, Inc.
//  
//  Non-sublicensable permission is hereby granted, free of charge, to any person obtaining a 
//  copy of this software and associated documentation files directly from codepen.io (the 
//  "Software"), solely to internally make and internally use copies of the Software to test, 
//  explore, and evaluate the Software solely in such person’s non-commercial, non-
//  production environments, provided that the above copyright notice and this permission 
//  notice shall be included in all copies or substantial portions of the Software. 
//  
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
//  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
//  MERCHANTABILITY, FITNESS FOR A ARTICULAR PURPOSE AND 
//  NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
//  HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 
//  IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR 
//  IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
//  SOFTWARE.
//


Famous(function(require,exports,module)
{       
    var SceneController = require('app/SceneController');
    var SpringButton = require('famous-ui/Buttons/SpringButton');

    // Animation Registry
    var Transitionable  = require('famous/Transitionable');
    var PhysicsTrans    = require('famous-physics/utils/PhysicsTransition');
    Transitionable.registerMethod('physics', PhysicsTrans);
    require('famous-animation/RegisterEasing');
    
    // Engine
    var Engine   = require('famous/Engine');

    // Scenes
    var TiltScene = require('app/scenes/TiltScene');

    var mainCtx = Engine.createContext();
    mainCtx.setPerspective( 1000 );
    mainCtx.add( SceneController );

    SceneController.addScenes({
        'Tilt' : TiltScene
    });

    SceneController.setScene('Tilt');

});

style.css

/* begin styling */
html { 
    background-color: #ccc;
    color: white;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14px;
}

#main {
    -webkit-perspective: 500px;
    perspective: 500px; 
}


h1, h2, h3 {
    font-family: 'Avenir Next W10 Medium';
    font-size: 24px;
}

p { 
    font-family: 'Avenir Next W01 Thin';
    font-size: 18px;
    line-height: 24px;
}
a { 
    font-family: 'Avenir Next W10 Medium';
}

.backfaceVisible {
    backface-visibility: visible;
    -webkit-backface-visibility: visible; /* Chrome and Safari */
    -moz-backface-visibility: visible; /* Firefox */
}
.white              { color: white; }

.bor_clear  { border: 0; }
.bor_clear:focus { outline: 0 }

.left       { float: left; }
.right      { float: right; }
.inline     { display: inline; }
.block      { display: block; } 
.clear      { clear: both; }
.absolute   { position: absolute }



.description-panel {
    background-color: rgba(77, 77, 77, 0.5);
}
.description-closing-tab {
    border: 1px solid white;
}

.no-user-select { 
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.textinput
{        
    height:40px; 
    width:100%; 
    padding-left: 6px;     
    padding-top: 0px;     
    color: rgba(255, 255, 255, .750);
    font-size: 24px; 
    font-family: 'Avenir Next W10 Thin';
    background-color:rgba(0, 0, 0, 0.0); 
    border: 1px solid rgba(255, 255, 255, .750);   
    outline-width: 0px;
}

.textinput:focus
{
    color: rgba(255, 255, 255, 1.0);
    border: 1px solid rgba(255, 255, 255, 1.0);   
    outline-width: 0px;    
}

.submit
{
    padding-top: 9px;
    padding-left: 4px;
    line-height: 24px;
    font-size: 24px; 
    font-family: 'Avenir Next W10 Thin';   
}

.progress-fill { 
    background-color: #222;
}

.progress-back { 
    border: 1px solid #333;
}

TiltShift---Car.markdown

TiltShift - Car

To produce the results in this image, depth was created by meticulously slicing and painting distinct layers that can be shifted in space to produce a three-dimensional effect.

Check out how it's made: https://vimeo.com/83814887

A Pen by famo.us on CodePen.

License.