Skip to content

Instantly share code, notes, and snippets.

@turbodrive

turbodrive/ae-to-css-workflow-part1.html

Last active August 29, 2015 14:06
Show Gist options
  • Save turbodrive/4c4d2df4c1e8d760bfb0 to your computer and use it in GitHub Desktop.
Save turbodrive/4c4d2df4c1e8d760bfb0 to your computer and use it in GitHub Desktop.
Download ZIP
AE to CSS Workflow - Part 1 - Introduction
Raw
ae-to-css-workflow-part1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="language" content="en" />
<title>AE to CSS Workflow - Part 1 - Introduction</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
<script src="js/Sprite3D.js" type="text/javascript"></script>
</head>
<body>
<div id="scene3D"></div>
<div id="page-template">
<div class="face"></div>
<div class="page-name">{pageName}</div>
</div>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>
Raw
main.js
(function() {
var targets = [
{name:"Page 1",x:452,y:-169,z:-110,rotationX:10,rotationY:0,rotationZ:0},
{name:"Page 2",x:-72,y:1416,z:20,rotationX:55,rotationY:-10,rotationZ:25},
{name:"Page 3",x:-1250,y:0,z:500,rotationX:20,rotationY:50,rotationZ:2},
{name:"Page 4",x:-400,y:-1800,z:-420,rotationX:-5,rotationY:-35,rotationZ:170}
]
var nbrPages = targets.length;
var pagesColorClass = ["green","orange","pink","blue"];
var targetPositions, stage, interactContainer, targetsContainer, rangeInput, templatePageContent;
var pageTemplate = document.getElementById("page-template");
var targets3D = [];
var viewportWidth = 1280;
var viewportHeight = 720;
var halfViewportWidth = viewportWidth*.5;
var halfViewportHeight = viewportHeight*.5;
var globalCamProgression = 0;
var getValueForProp = function(propName){
if(globalCamProgression == parseInt(globalCamProgression)){
return -targets3D[parseInt(globalCamProgression)][propName];
}
var t0 = Math.ceil(globalCamProgression-1);
var t1 = Math.ceil(globalCamProgression);
var v0 = targets3D[t0][propName];
var v1 = targets3D[t1][propName];
return -(v0 + ((v1-v0)*(globalCamProgression-(parseInt(globalCamProgression)))));
};
var updateFCamera = function(){
targetsContainer.setRotation(getValueForProp("rotationX"),getValueForProp("rotationY"),getValueForProp("rotationZ"));
targetsContainer.setPosition(getValueForProp("x"),getValueForProp("y"),getValueForProp("z"));
targetsContainer.update();
}
var rangeInputCallBack = function() {
globalCamProgression = rangeInput.value;
updateFCamera();
}
var createTarget3D = function(id){
var targetInfo = targets[id];
var name = targetInfo.name;
var pageContent = templatePageContent.replace("{pageName}", name);
var target3D = new Sprite3D()
.setInnerHTML(pageContent)
.setRotateFirst(false)
.addClassName("page")
.addClassName(pagesColorClass[id])
.setPosition(targetInfo.x, targetInfo.y, targetInfo.z)
.setRotation(targetInfo.rotationX, targetInfo.rotationY, targetInfo.rotationZ)
.setRegistrationPoint(640,360,0) // half the size of the pages (1280x720).
.update();
return target3D;
}
var createTargets = function() {
templatePageContent = pageTemplate.innerHTML;
pageTemplate.remove();
// pages/targets
for(var i = 0; i<nbrPages; i++){
var target3D = createTarget3D(i);
targets3D.push(target3D);
targetsContainer.addChild(target3D);
}
}
var createScene = function() {
// containers
stage = Sprite3D.createCenteredContainer();
interactContainer = stage.addChild(new Sprite3D().setRotateFirst(false))
.setRegistrationPoint(0, 0, 0);
targetsContainer = interactContainer.addChild(new Sprite3D().setRotateFirst(true))
.setRegistrationPoint(0, 0, 0);
document.getElementById("scene3D").appendChild(stage.domElement);
stage.domElement.style.left = halfViewportWidth;
stage.domElement.style.top = halfViewportHeight;
stage.domElement.style.position = "fixed";
stage.domElement.style.width = "1280px";
stage.domElement.style.height = "720px";
stage.setPosition(halfViewportWidth, halfViewportHeight, 0);
stage.update();
var p = String(Number(-halfViewportWidth)) + "px " + String(Number(-halfViewportHeight)) + "px";
stage.domElement.style["-webkit-perspective-origin"] = p;
stage.domElement.style["-moz-perspective-origin"] = p;
stage.domElement.style["perspective-origin"] = p;
stage.domElement.style["-webkit-transform-origin"] = String(Number(halfViewportWidth)) + "px " + String(Number(halfViewportHeight)) + "px";
interactContainer.setPosition(-halfViewportWidth, -halfViewportHeight, 0).update();
}
var addControls = function() {
rangeInput = document.createElement("input");
rangeInput.className = "range"
rangeInput.setAttribute("type", "range");
rangeInput.min = 0;
rangeInput.max = nbrPages-1;
rangeInput.step = 0.01;
rangeInput.oninput = rangeInputCallBack;
rangeInput.value = 0;
document.body.appendChild(rangeInput);
rangeInputCallBack();
}
createScene();
createTargets();
addControls();
})();
Raw
main_interpolation_excerpt.js
var globalCamProgression = 0;
var getValueForProp = function(propName){
if(globalCamProgression == parseInt(globalCamProgression)){
return -targets3D[parseInt(globalCamProgression)][propName];
}
var t0 = Math.ceil(globalCamProgression-1);
var t1 = Math.ceil(globalCamProgression);
var v0 = targets3D[t0][propName];
var v1 = targets3D[t1][propName];
return -(v0 + ((v1-v0)*(globalCamProgression-(parseInt(globalCamProgression)))));
};
var updateFCamera = function(){
targetsContainer.setRotation(getValueForProp("rotationX"),getValueForProp("rotationY"),getValueForProp("rotationZ"));
targetsContainer.setPosition(getValueForProp("x"),getValueForProp("y"),getValueForProp("z"));
targetsContainer.update();
}
var rangeInputCallBack = function() {
globalCamProgression = rangeInput.value;
updateFCamera();
}
Raw
styles.css
@font-face {
font-family: 'texgyreadventor';
src: url('fonts/texgyreadventor-bold-webfont.eot');
src: url('fonts/texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/texgyreadventor-bold-webfont.woff') format('woff'),
url('fonts/texgyreadventor-bold-webfont.ttf') format('truetype'),
url('fonts/texgyreadventor-bold-webfont.svg#texgyreadventorbold') format('svg');
font-weight: bold;
font-style: normal;
}
html, body {
overflow: hidden;
}
body {
background-color: #28192C;
padding: 0px;
margin: 0px;
font-family: 'texgyreadventor';
font-weight: bold;
text-transform: uppercase;
width:100%;
height: 100%;
}
div#scene3D {
width: 100%;
height: 100%;
display: block;
overflow: hidden;
position: absolute;
}
/* PAGES */
.page {
pointer-events: none;
width:1280px;
height:720px;
}
.page .face {
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
transform: translate3d(0px,0px,0px);
-webkit-transform: translate3d(0px,0px,0px);
width:1260px;
border: 10px solid white;
position: fixed;
height:700px;
}
.page .page-name {
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
transform: translate3d(0px, 0px, -250px);
-webkit-transform: translate3d(0px, 0px, -250px);
display: inline-block;
font-size: 150px;
line-height: 110px;
}
.page.green .face {
border-color: #0DFF9B;
}
.page.orange .face {
border-color: #FF7A00;
}
.page.pink .face {
border-color: #FF0B67;
}
.page.blue .face {
border-color: #0383FF;
}
.page.green {
color: #0DFF9B;
}
.page.orange {
color: #FF7A00;
}
.page.pink {
color: #FF0B67;
}
.page.blue {
color: #0383FF;
}
/* CONTROLS */
input.range {
display: block;
position: absolute;
bottom: 50px;
left: 5%;
padding: 0px;
margin: 0px;
width: 90%;
z-index: 2000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment