Learnfamo.us spinning & circling logos

main.js

/* globals define */
define(function(require, exports, module) {
    'use strict';
    // import dependencies
    var Engine = require('famous/core/Engine');
    var Modifier = require('famous/core/Modifier');
    var StateModifier = require('famous/modifiers/StateModifier');
    var Transform = require('famous/core/Transform');
    var View = require('famous/core/View');
    var RenderController = require('famous/views/RenderController');
    var ImageSurface = require('famous/surfaces/ImageSurface');

    // create the main context
    var mainContext = Engine.createContext();

    // the app here
    var circle1 = new ImageSurface({
        size: [300, 300],
        content: '/content/images/learnfamous-circle_300-v2.png'
    });

    var circle2 = new ImageSurface({
        size: [300, 300],
        content: '/content/images/learnfamous-circle_300-v2.png'
    });

    var circle3 = new ImageSurface({
        size: [300, 300],
        content: '/content/images/learnfamous-circle_300-v2.png'
    });

    var circle4 = new ImageSurface({
        size: [300, 300],
        content: '/content/images/learnfamous-circle_300-v2.png'
    });

    var lfLogo1 = new ImageSurface({
        size: [109, 136],
        content: '/content/images/learnfamous-lf-logo_300.png',
        classes: ['backfaceVisibility'],
        properties: {
            backfaceVisibility: 'visible',
            webkitBackfaceVisibility: 'visible'
        }
    });

    var lfLogo2 = new ImageSurface({
        size: [109, 136],
        content: '/content/images/learnfamous-lf-logo_300-ltblue.png',
        classes: ['backfaceVisibility']
    });

    var lfLogo3 = new ImageSurface({
        size: [109, 136],
        content: '/content/images/learnfamous-lf-logo_300-dkblue.png',
        classes: ['backfaceVisibility'],
        properties: {
            backfaceVisibility: 'visible',
            webkitBackfaceVisibility: 'visible'
        }
    });

    var lfLogo4 = new ImageSurface({
        size: [109, 136],
        content: '/content/images/learnfamous-lf-logo_300.png',
        classes: ['backfaceVisibility']
    });

    var initialTime = Date.now();

    var centerZSpinModifier1 = new Modifier({
        origin: [0.5, 0.5],
        transform : function() {
            return Transform.rotateZ(-.0017 * (Date.now() - initialTime));
        }
    });

    var centerZSpinModifier2 = new Modifier({
        origin: [0.5, 0.5],
        transform : function() {
            return Transform.rotateZ(.0017 * (Date.now() - initialTime));
        }
    });

    var centerZSpinModifier2a = new Modifier({
        origin: [0.5, 0.5],
        transform : function() {
            return Transform.rotateZ(-.0017 * (Date.now() - initialTime));
        }
    });

    var centerZSpinModifier3 = new Modifier({
        origin: [0.5, 0.5],
        transform : function() {
            return Transform.rotateZ(.0017 * (Date.now() - initialTime));
        }
    });

    var centerZSpinModifier4 = new Modifier({
        origin: [0.5, 0.5],
        transform : function() {
            return Transform.rotateZ(-.0017 * (Date.now() - initialTime));
        }
    });

    var centerZSpinModifier4a = new Modifier({
        origin: [0.5, 0.5],
        transform : function() {
            return Transform.rotateZ(.0017 * (Date.now() - initialTime));
        }
    });

   var centerYSpinModifier1 = new Modifier({
        origin: [0.5, 0.5],
        transform : function() {
            return Transform.rotateY(-.0017 * (Date.now() - initialTime));
        }
    });
/*
   var centerYSpinModifier4 = new Modifier({
        origin: [0.5, 0.5],
        transform : function() {
            return Transform.rotateY(.0017 * (Date.now() - initialTime));
        }
    });
*/
   var centerXSpinModifier3 = new Modifier({
        origin: [0.5, 0.5],
        transform : function() {
            return Transform.rotateX(-.0017 * (Date.now() - initialTime));
        }
    });
/*
   var centerXSpinModifier4 = new Modifier({
        origin: [0.5, 0.5],
        transform : function() {
            return Transform.rotateX(-.0017 * (Date.now() - initialTime));
        }
    });
*/
     var bg = new ImageSurface({
        size: [true, true],
        content: '/content/images/Blue_Pond_50.jpg'
    });

    var middleModifier1 = new StateModifier({
        transform: Transform.translate(0,0,5)
    });

    var middleModifier2 = new StateModifier({
        transform: Transform.translate(0,0,10)
    });

    var middleModifier3 = new StateModifier({
        transform: Transform.translate(0,0,11)
    });

    var middleModifier4 = new StateModifier({
        transform: Transform.translate(0,0,16)
    });

    var frontModifier1 = new StateModifier({
        transform: Transform.translate(0,0,79)
    });

    var frontModifier2 = new StateModifier({
        transform: Transform.translate(0,0,80)
    });

    var frontModifier3 = new StateModifier({
        transform: Transform.translate(0,0,89)
    });

    var frontModifier4 = new StateModifier({
        transform: Transform.translate(0,0,90)
    });

    var towardsTopModifier = new StateModifier({
        transform: Transform.translate(100,-200,1)
    });

    var towardsLeftModifier = new StateModifier({
        transform: Transform.translate(-100,-100,2)
    });

    var towardsRightModifier = new StateModifier({
        transform: Transform.translate(300,-100,3)
    });

    var towardsBottomModifier = new StateModifier({
        transform: Transform.translate(100,0,4)
    });

    var rc1 = new RenderController();
    var rc2 = new RenderController();
    var rc3 = new RenderController();
    var rc4 = new RenderController();

    var comboView1 = new View();
    var comboView2 = new View();
    var comboView3 = new View();
    var comboView4 = new View();

    comboView1.add(middleModifier1).add(centerZSpinModifier1).add(circle1);
    comboView1.add(frontModifier1).add(centerYSpinModifier1).add(lfLogo1);

    comboView2.add(middleModifier2).add(centerZSpinModifier2).add(circle2);
    comboView2.add(frontModifier2).add(centerZSpinModifier2a).add(lfLogo2);

    comboView3.add(middleModifier3).add(centerZSpinModifier3).add(circle3);
    comboView3.add(frontModifier3).add(centerXSpinModifier3).add(lfLogo3);

    comboView4.add(middleModifier4).add(centerZSpinModifier4).add(circle4);
    comboView4.add(frontModifier4).add(centerZSpinModifier4a).add(lfLogo4);

    mainContext.add(bg);

    mainContext.add(towardsTopModifier).add(rc1);
    mainContext.add(towardsLeftModifier).add(rc2);
    mainContext.add(towardsRightModifier).add(rc3);
    mainContext.add(towardsBottomModifier).add(rc4);
    rc1.show(comboView1);
    rc2.show(comboView2);
    rc3.show(comboView3);
    rc4.show(comboView4);
});