3d Zoomable Website - Report

3d-html.html

<div id="wrap">
   <div id="container">
        
        <div id="environment">
        
            <div id="content">
                <section id="level-1">Level 1 Content</section>
                <section id="level-2">Level 2 Content</section>
                <section id="level-3">Level 3 Content</section>
            </div>
            
        </div>
        
    </div>
    
</div>

<div id="scroll-proxy"></div>

c1.css

#wrap{
    height: 100%;
    width: 100%;
    position: fixed;
}

#scroll-proxy {
    height: 2400px;
}

#container{
    height: 540px;
    width: 900px;
    position: relative;
    top: 50%;
    margin: -270px auto;
}

c2.css

#environment{
    perspective: 400px;
    perspective-origin: center 375px;
    transform: perspective(400px);
    width: 100%;
    height: 540px;
}

#content{
    transform-style: preserve-3D
    width: 100%;
    height: 100%;
    top: 20px;
    position: absolute;
}

section{
    width: 100%;
    height: 100%;
    position: absolute;
}

#level-2{
    transform: translate3d(0, 0, -1000px);
}

#level-3{
    transform: translate3d(0, 0, -2000px);
}

getScroll3DTransform.js

function getScroll3DTransform( scroll ) {
  var z = ( scroll * (levels - 1) * distance3d );
  
  // ie. Middle level would be (0.5 * 2 * 1000) = 1000
  // ie. Last (3rd) level would be (1 * 2 * 1000) = 2000
  
  return 'translate3d( 0, 0, ' + z + 'px )';
};

h.html

<div id="container" style="transform: translate3d(0, 0, 1000px);">

j.js

var transformProp = null,
    getScrollTransform = null,
    $window = null,
    $document = null,
    $content = null,
    scrolled = 0, // amount window has scrolled
    currentLevel = 0, // how deep in the stack are we?
    levels = 3, // number of zoomable sections
    distance3d = 1000, // amount each section is apart from eachother
    levelGuide = {
        '#level-1' : 0,
        '#level-2' : 1,
        '#level-3' : 2
    };

$(function(){
    transformProp = Modernizr.prefixed('transform'); // ie: WebkitTransform
    
    // cache some jQuery objects
    $window = $(window);
    $document = $(document);
    $content = $('#content');
    
    // Determines what CSS transform to use. Uses 3d if it's supported.
    getScrollTransform = Modernizr.csstransforms3d ? 
        getScroll3DTransform : getScroll2DTransform; 
        
    // Zoom when the window is scrolled
    if ( Modernizr.csstransforms ) {
        $(window).scroll(function(){
            zoom();
        });
    } else {
        // Provide a fallback for browsers that don't support transforms yet, likely through the CSS.
    }
});

function getScroll2DTransform ( scroll ) {
  // 2D scale is exponential
  var scale = Math.pow( 3, scroll * (levels - 1) );
  return 'scale(' + scale + ')';
};

function getScroll3DTransform( scroll ) {
  var z = ( scroll * (levels - 1) * distance3d );  
  return 'translate3d( 0, 0, ' + z + 'px )';
};

// applies transform to content from position of scroll
function transformScroll( scroll ) {
  var style = {};
  style[ transformProp ] = getScrollTransform( scroll );
  $content.css( style );
};

function zoom(){
     // normalize scroll value from 0 to 1
     /* Normally this would increase for each pixel (ie 1, 2,…,5400)
        but this turns it into a decimal (ie. 0.0016625103906899418, 0.003948462177888612,…,1)
    */
    scrolled = $window.scrollTop() / ( $document.height() - $window.height() );
    transformScroll( scrolled );
};

transformScroll.js

// applies transform to content from position of scroll
function transformScroll( scroll ) {
  var style = {};
  style[ transformProp ] = getScrollTransform( scroll ); // this calls getScroll3DTransform( scroll ); if 3D transforms are supported.
  $content.css( style );
};

zoom.js

function zoom(){
     // normalize scroll value from 0 to 1
     /* Normally this would increase for each pixel (ie 1, 2,…,5400)
        but this turns it into a decimal (ie. 0.1, 0.5,…,1)
    */
    scrolled = $window.scrollTop() / ( $document.height() - $window.height() );
    transformScroll( scrolled );
};