Skip to content

Instantly share code, notes, and snippets.

@chrisbolin

chrisbolin/index.html

Last active January 25, 2016 05:47
Show Gist options
  • Save chrisbolin/541f47e6accadba57c88 to your computer and use it in GitHub Desktop.
Save chrisbolin/541f47e6accadba57c88 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chrisbolin revised this gist Jan 25, 2016. No changes.
  2. chrisbolin revised this gist Jan 24, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>chris bolin</title>
    <title>chris bolin 2</title>


    <link rel="stylesheet" href="css/normalize.css">
  3. chrisbolin revised this gist Jan 24, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>test</title>
    <title>chris bolin</title>


    <link rel="stylesheet" href="css/normalize.css">
  4. chrisbolin revised this gist Jan 24, 2016. 1 changed file with 37 additions and 19 deletions.
    56 changes: 37 additions & 19 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ var ColorBar = React.createClass({
    render: function render() {
    var height = fx.limitUnit(this.props.x) * 100;
    return React.createElement('div', { style: {
    width: '20%',
    width: this.props.width,
    height: height + '%',
    backgroundColor: this.props.color,
    left: this.props.left,
    @@ -45,11 +45,11 @@ var CardFront = React.createClass({
    { className: 'scroll', style: scrollStyle },
    '(scroll)'
    ),
    React.createElement(ColorBar, { color: '#EDC919', left: '0%', x: x * 5.2 }),
    React.createElement(ColorBar, { color: '#76919A', left: '20%', x: x * 4.7 }),
    React.createElement(ColorBar, { color: '#257A97', left: '40%', x: x * 4.4 }),
    React.createElement(ColorBar, { color: '#7A486E', left: '60%', x: x * 4 }),
    React.createElement(ColorBar, { color: '#FD556F', left: '80%', x: x * 3.5 })
    React.createElement(ColorBar, { color: '#EDC919', left: '0%', width: '20%', x: x * 5.2 }),
    React.createElement(ColorBar, { color: '#76919A', left: '20%', width: '20%', x: x * 4.7 }),
    React.createElement(ColorBar, { color: '#257A97', left: '40%', width: '20%', x: x * 4.4 }),
    React.createElement(ColorBar, { color: '#7A486E', left: '60%', width: '20%', x: x * 4 }),
    React.createElement(ColorBar, { color: '#FD556F', left: '80%', width: '20%', x: x * 3.5 })
    );
    }
    });
    @@ -60,7 +60,22 @@ var CardBack = React.createClass({
    render: function render() {
    var x = this.props.x;
    var zIndex = x > 0.5 ? 1 : 0;
    return React.createElement('div', { className: 'card-face back', style: { zIndex: zIndex } });
    var colorH = 0.06;
    // if (!zIndex) return null;
    return React.createElement(
    'div',
    { className: 'card-face back', style: { zIndex: zIndex } },
    React.createElement(ColorBar, { color: '#EDC919', width: '10%', left: '0%', x: 2.5 * (1 - x) + colorH }),
    React.createElement(ColorBar, { color: '#76919A', width: '10%', left: '10%', x: 9 * (1 - x) + colorH }),
    React.createElement(ColorBar, { color: '#257A97', width: '10%', left: '20%', x: 4 * (1 - x) + colorH }),
    React.createElement(ColorBar, { color: '#7A486E', width: '10%', left: '30%', x: 6 * (1 - x) + colorH }),
    React.createElement(ColorBar, { color: '#EDC919', width: '10%', left: '40%', x: 5 * (1 - x) + colorH }),
    React.createElement(ColorBar, { color: '#76919A', width: '10%', left: '50%', x: 2 * (1 - x) + colorH }),
    React.createElement(ColorBar, { color: '#257A97', width: '10%', left: '60%', x: 4 * (1 - x) + colorH }),
    React.createElement(ColorBar, { color: '#7A486E', width: '10%', left: '70%', x: 8 * (1 - x) + colorH }),
    React.createElement(ColorBar, { color: '#EDC919', width: '10%', left: '80%', x: 7 * (1 - x) + colorH }),
    React.createElement(ColorBar, { color: '#76919A', width: '10%', left: '90%', x: 3 * (1 - x) + colorH })
    );
    }
    });

    @@ -105,16 +120,15 @@ var Typer = React.createClass({
    return agg;
    }, []);
    letters.push(' ');
    var cursor = x < 1 ? '|' : '';
    var childrenSubset = letters.slice(0, x * letters.length);
    return React.createElement(
    'span',
    null,
    childrenSubset,
    React.createElement(
    'span',
    null,
    '|'
    )
    ' ',
    cursor,
    ' '
    );
    }
    });
    @@ -124,13 +138,13 @@ var Arrow = React.createClass({

    render: function render() {
    var x = this.props.x;
    var arrowColorHex = Math.floor(255 * (1 - x)).toString(16);
    var grey = Math.floor(255 * (1 - x));
    var transform = 'translateY(' + 10 * x + 'px)';
    var style = {
    transform: transform,
    WebkitTransform: transform,
    opacity: 5 * (1 - x),
    color: '#' + arrowColorHex + arrowColorHex + arrowColorHex
    color: 'rgb(' + grey + ',' + grey + ',' + grey + ')',
    opacity: 10 * (1 - x)
    };
    return React.createElement(
    'div',
    @@ -154,7 +168,10 @@ var BackText = React.createClass({
    React.createElement('br', null),
    'wannabe polymath',
    React.createElement('br', null),
    'cambridge, mass, usa'
    'cambridge, mass, usa',
    React.createElement('br', null),
    React.createElement('br', null),
    '[email protected]'
    )
    );
    }
    @@ -167,7 +184,7 @@ var App = React.createClass({
    return { x: 0 };
    },
    appStyle: {
    height: window.innerHeight * 1.3
    height: window.innerHeight + 200
    },
    handleScrollChange: function handleScrollChange(e) {
    var x = fx.limitUnit(window.scrollY / (this.appStyle.height - window.innerHeight));
    @@ -180,8 +197,9 @@ var App = React.createClass({
    },
    render: function render() {
    var x = this.state.x;
    var planeX = fx.limitUnit(2 * x);
    var typerX = fx.limitUnit(-1 + 2 * x);
    var planeW = 0.9; // plane annimation weight (0-1)
    var planeX = fx.limitUnit(x / planeW);
    var typerX = fx.limitUnit(1 / (1 - planeW) * (-planeW + x));
    return React.createElement(
    'div',
    { className: 'app', style: this.appStyle },
  5. chrisbolin revised this gist Jan 24, 2016. 2 changed files with 64 additions and 44 deletions.
    82 changes: 51 additions & 31 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -31,14 +31,6 @@ var CardFront = React.createClass({
    var scrollStyle = {
    opacity: 1 - 10 * x
    };
    var arrowColorHex = Math.floor(256 * (1 - x) + 16).toString(16);
    var arrowTransform = 'translateY(' + 100 * x + 'px)';
    var arrowStyle = {
    transform: arrowTransform,
    WebkitTransform: arrowTransform,
    opacity: 3 - 3 * x,
    color: x ? '#' + arrowColorHex + arrowColorHex + arrowColorHex : 'white'
    };
    return React.createElement(
    'div',
    { className: 'card-face front', style: { zIndex: zIndex } },
    @@ -48,11 +40,6 @@ var CardFront = React.createClass({
    'chris bolin',
    React.createElement('hr', null)
    ),
    React.createElement(
    'div',
    { className: 'arrow', style: arrowStyle },
    '↓'
    ),
    React.createElement(
    'div',
    { className: 'scroll', style: scrollStyle },
    @@ -82,8 +69,7 @@ var CardPlane = React.createClass({

    getStyle: function getStyle() {
    var x = this.props.x;
    var x4 = Math.pow(x, 4);
    var transform = '\n rotateZ(' + 90 * x + 'deg)\n rotateX(' + 180 * x + 'deg)\n translate3d(' + -50 * x4 + 'px, 0, 0)\n ';
    var transform = '\n rotateZ(' + 90 * x + 'deg)\n rotateX(' + 180 * x + 'deg)\n translate3d(' + -50 * x + 'px, 0, 0)\n ';

    return {
    transform: transform,
    @@ -107,6 +93,9 @@ var Typer = React.createClass({

    render: function render() {
    var x = fx.limitUnit(this.props.x);
    if (!x) {
    return null;
    }
    var letters = this.props.children.reduce(function (agg, element) {
    if (element.length) {
    agg = agg.concat(element.split(''));
    @@ -130,14 +119,55 @@ var Typer = React.createClass({
    }
    });

    var Arrow = React.createClass({
    displayName: 'Arrow',

    render: function render() {
    var x = this.props.x;
    var arrowColorHex = Math.floor(255 * (1 - x)).toString(16);
    var transform = 'translateY(' + 10 * x + 'px)';
    var style = {
    transform: transform,
    WebkitTransform: transform,
    opacity: 5 * (1 - x),
    color: '#' + arrowColorHex + arrowColorHex + arrowColorHex
    };
    return React.createElement(
    'div',
    { className: 'arrow', style: style },
    '↓'
    );
    }
    });

    var BackText = React.createClass({
    displayName: 'BackText',

    render: function render() {
    return React.createElement(
    'div',
    { className: 'back-text' },
    React.createElement(
    Typer,
    { x: this.props.x },
    'chris bolin',
    React.createElement('br', null),
    'wannabe polymath',
    React.createElement('br', null),
    'cambridge, mass, usa'
    )
    );
    }
    });

    var App = React.createClass({
    displayName: 'App',

    getInitialState: function getInitialState() {
    return { x: 0 };
    },
    appStyle: {
    height: 1000
    height: window.innerHeight * 1.3
    },
    handleScrollChange: function handleScrollChange(e) {
    var x = fx.limitUnit(window.scrollY / (this.appStyle.height - window.innerHeight));
    @@ -150,27 +180,17 @@ var App = React.createClass({
    },
    render: function render() {
    var x = this.state.x;
    var typerX = 2 * x - 0.9; // only show back half
    var planeX = fx.limitUnit(2 * x);
    var typerX = fx.limitUnit(-1 + 2 * x);
    return React.createElement(
    'div',
    { className: 'app', style: this.appStyle },
    React.createElement(
    'div',
    { className: 'container' },
    React.createElement(CardPlane, { x: x }),
    React.createElement(
    'div',
    { className: 'back-overlay' },
    React.createElement(
    Typer,
    { x: typerX },
    'chris bolin',
    React.createElement('br', null),
    'wannabe polymath',
    React.createElement('br', null),
    'cambridge, mass, usa'
    )
    )
    React.createElement(CardPlane, { x: planeX }),
    React.createElement(Arrow, { x: x }),
    React.createElement(BackText, { x: typerX })
    )
    );
    }
    26 changes: 13 additions & 13 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -33,23 +33,14 @@ body {
    .card-plane .card-face.front .title hr {
    margin: 7px 0;
    }
    .card-plane .card-face.front .scroll, .card-plane .card-face.front .arrow {
    .card-plane .card-face.front .scroll {
    position: absolute;
    text-align: center;
    width: 100%;
    }
    .card-plane .card-face.front .scroll {
    color: #7D7D7D;
    bottom: -30px;
    font-size: 12px;
    }
    .card-plane .card-face.front .arrow {
    font-size: 24px;
    font-family: 'Times New Roman', serif;
    margin-bottom: 10px;
    bottom: 15px;
    z-index: 1;
    }
    .card-plane .card-face.back {
    color: white;
    background-color: #FD556F;
    @@ -60,12 +51,21 @@ body {
    transform: rotateZ(90deg) rotateX(180deg) translate3d(75px, -75px, 0px);
    }

    .back-overlay {
    .back-text {
    position: fixed;
    left: calc(50vw - 200px + 40px);
    top: 70px;
    top: 90px;
    font-family: Inconsolata, monospace;
    color: white;
    padding: 20px;
    font-size: 14px;
    width: 300px;
    }

    .arrow {
    font-size: 24px;
    font-family: 'Times New Roman', serif;
    position: fixed;
    text-align: center;
    width: 100%;
    top: 350px;
    }
  6. chrisbolin revised this gist Jan 24, 2016. 2 changed files with 32 additions and 26 deletions.
    52 changes: 27 additions & 25 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -29,12 +29,13 @@ var CardFront = React.createClass({
    var x = this.props.x;
    var zIndex = x < 0.5 ? 1 : 0;
    var scrollStyle = {
    transform: 'translateY(' + -350 * x + 'px)'
    opacity: 1 - 10 * x
    };
    var arrowColorHex = Math.floor(256 * (1 - x) + 16).toString(16);
    console.log(arrowColorHex);
    var arrowTransform = 'translateY(' + 100 * x + 'px)';
    var arrowStyle = {
    transform: 'translateY(' + 100 * x + 'px)',
    transform: arrowTransform,
    WebkitTransform: arrowTransform,
    opacity: 3 - 3 * x,
    color: x ? '#' + arrowColorHex + arrowColorHex + arrowColorHex : 'white'
    };
    @@ -72,24 +73,7 @@ var CardBack = React.createClass({
    render: function render() {
    var x = this.props.x;
    var zIndex = x > 0.5 ? 1 : 0;
    var typerX = 2 * this.props.x - 0.9; // only show back half
    return React.createElement(
    'div',
    { className: 'card-face back', style: { zIndex: zIndex } },
    React.createElement(
    'div',
    null,
    React.createElement(
    Typer,
    { x: typerX },
    'chris bolin',
    React.createElement('br', null),
    'wannabe polymath',
    React.createElement('br', null),
    'cambridge, mass, usa'
    )
    )
    );
    return React.createElement('div', { className: 'card-face back', style: { zIndex: zIndex } });
    }
    });

    @@ -99,9 +83,11 @@ var CardPlane = React.createClass({
    getStyle: function getStyle() {
    var x = this.props.x;
    var x4 = Math.pow(x, 4);
    var transform = '\n rotateZ(' + 90 * x + 'deg)\n rotateX(' + 180 * x + 'deg)\n translateX(' + -50 * x4 + 'px)\n ';
    var transform = '\n rotateZ(' + 90 * x + 'deg)\n rotateX(' + 180 * x + 'deg)\n translate3d(' + -50 * x4 + 'px, 0, 0)\n ';

    return {
    transform: transform
    transform: transform,
    WebkitTransform: transform
    };
    },
    render: function render() {
    @@ -120,6 +106,7 @@ var Typer = React.createClass({
    displayName: 'Typer',

    render: function render() {
    var x = fx.limitUnit(this.props.x);
    var letters = this.props.children.reduce(function (agg, element) {
    if (element.length) {
    agg = agg.concat(element.split(''));
    @@ -129,7 +116,7 @@ var Typer = React.createClass({
    return agg;
    }, []);
    letters.push(' ');
    var childrenSubset = letters.slice(0, this.props.x * letters.length);
    var childrenSubset = letters.slice(0, x * letters.length);
    return React.createElement(
    'span',
    null,
    @@ -162,13 +149,28 @@ var App = React.createClass({
    this.container = document.getElementsByClassName('main');
    },
    render: function render() {
    var x = this.state.x;
    var typerX = 2 * x - 0.9; // only show back half
    return React.createElement(
    'div',
    { className: 'app', style: this.appStyle },
    React.createElement(
    'div',
    { className: 'container' },
    React.createElement(CardPlane, { x: this.state.x })
    React.createElement(CardPlane, { x: x }),
    React.createElement(
    'div',
    { className: 'back-overlay' },
    React.createElement(
    Typer,
    { x: typerX },
    'chris bolin',
    React.createElement('br', null),
    'wannabe polymath',
    React.createElement('br', null),
    'cambridge, mass, usa'
    )
    )
    )
    );
    }
    6 changes: 5 additions & 1 deletion style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -59,7 +59,11 @@ body {
    -webkit-transform: rotateZ(90deg) rotateX(180deg) translate3d(75px, -75px, 0px);
    transform: rotateZ(90deg) rotateX(180deg) translate3d(75px, -75px, 0px);
    }
    .card-plane .card-face.back div {

    .back-overlay {
    position: fixed;
    left: calc(50vw - 200px + 40px);
    top: 70px;
    font-family: Inconsolata, monospace;
    color: white;
    padding: 20px;
  7. chrisbolin revised this gist Jan 24, 2016. 1 changed file with 16 additions and 6 deletions.
    22 changes: 16 additions & 6 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -28,6 +28,16 @@ var CardFront = React.createClass({
    render: function render() {
    var x = this.props.x;
    var zIndex = x < 0.5 ? 1 : 0;
    var scrollStyle = {
    transform: 'translateY(' + -350 * x + 'px)'
    };
    var arrowColorHex = Math.floor(256 * (1 - x) + 16).toString(16);
    console.log(arrowColorHex);
    var arrowStyle = {
    transform: 'translateY(' + 100 * x + 'px)',
    opacity: 3 - 3 * x,
    color: x ? '#' + arrowColorHex + arrowColorHex + arrowColorHex : 'white'
    };
    return React.createElement(
    'div',
    { className: 'card-face front', style: { zIndex: zIndex } },
    @@ -39,12 +49,12 @@ var CardFront = React.createClass({
    ),
    React.createElement(
    'div',
    { className: 'scroll' },
    React.createElement(
    'div',
    { className: 'arrow' },
    '↓'
    ),
    { className: 'arrow', style: arrowStyle },
    '↓'
    ),
    React.createElement(
    'div',
    { className: 'scroll', style: scrollStyle },
    '(scroll)'
    ),
    React.createElement(ColorBar, { color: '#EDC919', left: '0%', x: x * 5.2 }),
  8. chrisbolin revised this gist Jan 24, 2016. 1 changed file with 11 additions and 5 deletions.
    16 changes: 11 additions & 5 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,7 @@
    @import url(https://fonts.googleapis.com/css?family=Playfair+Display:400italic);
    body {
    background-color: white;
    margin: 0;
    }

    .container {
    @@ -32,17 +33,22 @@ body {
    .card-plane .card-face.front .title hr {
    margin: 7px 0;
    }
    .card-plane .card-face.front .scroll {
    .card-plane .card-face.front .scroll, .card-plane .card-face.front .arrow {
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
    }
    .card-plane .card-face.front .scroll {
    color: #7D7D7D;
    bottom: -30px;
    font-size: 12px;
    }
    .card-plane .card-face.front .scroll .arrow {
    font-size: 20px;
    .card-plane .card-face.front .arrow {
    font-size: 24px;
    font-family: 'Times New Roman', serif;
    margin-bottom: 10px;
    bottom: 15px;
    z-index: 1;
    }
    .card-plane .card-face.back {
    color: white;
    @@ -58,4 +64,4 @@ body {
    color: white;
    padding: 20px;
    font-size: 14px;
    }
    }
  9. chrisbolin revised this gist Jan 24, 2016. 1 changed file with 5 additions and 9 deletions.
    14 changes: 5 additions & 9 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,19 @@
    'use strict';

    var fx = {
    limit: function limit(x, _limit) {
    return x < _limit ? x : _limit;
    },
    limit1: function limit1(x) {
    return this.limit(x, 1);
    limitUnit: function limitUnit(x) {
    return x < 0 ? 0 : x < 1 ? x : 1;
    }
    };

    var ColorBar = React.createClass({
    displayName: 'ColorBar',

    render: function render() {
    var height = fx.limit1(this.props.x);
    var height = fx.limitUnit(this.props.x) * 100;
    return React.createElement('div', { style: {
    width: '20%',
    height: height * 100 + '%',
    height: height + '%',
    backgroundColor: this.props.color,
    left: this.props.left,
    position: 'absolute',
    @@ -146,7 +143,7 @@ var App = React.createClass({
    height: 1000
    },
    handleScrollChange: function handleScrollChange(e) {
    var x = window.scrollY / (this.appStyle.height - window.innerHeight);
    var x = fx.limitUnit(window.scrollY / (this.appStyle.height - window.innerHeight));
    this.setState({ x: x });
    },
    componentDidMount: function componentDidMount() {
    @@ -161,7 +158,6 @@ var App = React.createClass({
    React.createElement(
    'div',
    { className: 'container' },
    '\n ' + window.scrollY + '\n ' + window.innerHeight + '\n ',
    React.createElement(CardPlane, { x: this.state.x })
    )
    );
  10. chrisbolin revised this gist Jan 24, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -161,6 +161,7 @@ var App = React.createClass({
    React.createElement(
    'div',
    { className: 'container' },
    '\n ' + window.scrollY + '\n ' + window.innerHeight + '\n ',
    React.createElement(CardPlane, { x: this.state.x })
    )
    );
  11. chrisbolin revised this gist Jan 24, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>(wip)</title>
    <title>test</title>


    <link rel="stylesheet" href="css/normalize.css">
  12. chrisbolin revised this gist Jan 24, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,7 @@
    <html >
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>(wip)</title>


  13. chrisbolin created this gist Jan 24, 2016.
    29 changes: 29 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    <!DOCTYPE html>
    <html >
    <head>
    <meta charset="UTF-8">
    <title>(wip)</title>


    <link rel="stylesheet" href="css/normalize.css">


    <link rel="stylesheet" href="css/style.css">




    </head>

    <body>

    <div id="app"></div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js'></script>

    <script src="js/index.js"></script>




    </body>
    </html>
    170 changes: 170 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,170 @@
    'use strict';

    var fx = {
    limit: function limit(x, _limit) {
    return x < _limit ? x : _limit;
    },
    limit1: function limit1(x) {
    return this.limit(x, 1);
    }
    };

    var ColorBar = React.createClass({
    displayName: 'ColorBar',

    render: function render() {
    var height = fx.limit1(this.props.x);
    return React.createElement('div', { style: {
    width: '20%',
    height: height * 100 + '%',
    backgroundColor: this.props.color,
    left: this.props.left,
    position: 'absolute',
    bottom: 0
    } });
    }
    });

    var CardFront = React.createClass({
    displayName: 'CardFront',

    render: function render() {
    var x = this.props.x;
    var zIndex = x < 0.5 ? 1 : 0;
    return React.createElement(
    'div',
    { className: 'card-face front', style: { zIndex: zIndex } },
    React.createElement(
    'div',
    { className: 'title' },
    'chris bolin',
    React.createElement('hr', null)
    ),
    React.createElement(
    'div',
    { className: 'scroll' },
    React.createElement(
    'div',
    { className: 'arrow' },
    '↓'
    ),
    '(scroll)'
    ),
    React.createElement(ColorBar, { color: '#EDC919', left: '0%', x: x * 5.2 }),
    React.createElement(ColorBar, { color: '#76919A', left: '20%', x: x * 4.7 }),
    React.createElement(ColorBar, { color: '#257A97', left: '40%', x: x * 4.4 }),
    React.createElement(ColorBar, { color: '#7A486E', left: '60%', x: x * 4 }),
    React.createElement(ColorBar, { color: '#FD556F', left: '80%', x: x * 3.5 })
    );
    }
    });

    var CardBack = React.createClass({
    displayName: 'CardBack',

    render: function render() {
    var x = this.props.x;
    var zIndex = x > 0.5 ? 1 : 0;
    var typerX = 2 * this.props.x - 0.9; // only show back half
    return React.createElement(
    'div',
    { className: 'card-face back', style: { zIndex: zIndex } },
    React.createElement(
    'div',
    null,
    React.createElement(
    Typer,
    { x: typerX },
    'chris bolin',
    React.createElement('br', null),
    'wannabe polymath',
    React.createElement('br', null),
    'cambridge, mass, usa'
    )
    )
    );
    }
    });

    var CardPlane = React.createClass({
    displayName: 'CardPlane',

    getStyle: function getStyle() {
    var x = this.props.x;
    var x4 = Math.pow(x, 4);
    var transform = '\n rotateZ(' + 90 * x + 'deg)\n rotateX(' + 180 * x + 'deg)\n translateX(' + -50 * x4 + 'px)\n ';
    return {
    transform: transform
    };
    },
    render: function render() {
    var zFront = this.props.x < 0.5 ? 1 : 0;
    var zBack = !zFront;
    return React.createElement(
    'div',
    { style: this.getStyle(), className: 'card-plane' },
    React.createElement(CardFront, { x: this.props.x }),
    React.createElement(CardBack, { x: this.props.x })
    );
    }
    });

    var Typer = React.createClass({
    displayName: 'Typer',

    render: function render() {
    var letters = this.props.children.reduce(function (agg, element) {
    if (element.length) {
    agg = agg.concat(element.split(''));
    } else {
    agg.push(element);
    }
    return agg;
    }, []);
    letters.push(' ');
    var childrenSubset = letters.slice(0, this.props.x * letters.length);
    return React.createElement(
    'span',
    null,
    childrenSubset,
    React.createElement(
    'span',
    null,
    '|'
    )
    );
    }
    });

    var App = React.createClass({
    displayName: 'App',

    getInitialState: function getInitialState() {
    return { x: 0 };
    },
    appStyle: {
    height: 1000
    },
    handleScrollChange: function handleScrollChange(e) {
    var x = window.scrollY / (this.appStyle.height - window.innerHeight);
    this.setState({ x: x });
    },
    componentDidMount: function componentDidMount() {
    window.addEventListener('scroll', this.handleScrollChange);
    window.addEventListener('resize', this.handleScrollChange);
    this.container = document.getElementsByClassName('main');
    },
    render: function render() {
    return React.createElement(
    'div',
    { className: 'app', style: this.appStyle },
    React.createElement(
    'div',
    { className: 'container' },
    React.createElement(CardPlane, { x: this.state.x })
    )
    );
    }
    });

    React.render(React.createElement(App, null), document.getElementById('app'));
    61 changes: 61 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    @import url(https://fonts.googleapis.com/css?family=Inconsolata);
    @import url(https://fonts.googleapis.com/css?family=Playfair+Display:400italic);
    body {
    background-color: white;
    }

    .container {
    position: fixed;
    }

    .card-plane {
    position: absolute;
    width: 200px;
    height: 350px;
    margin: 50px calc(50vw - 100px);
    }
    .card-plane .card-face {
    width: 100%;
    height: 100%;
    position: absolute;
    }
    .card-plane .card-face.front {
    background-color: black;
    color: white;
    font-style: italic;
    font-family: 'Playfair Display', Serif;
    }
    .card-plane .card-face.front .title {
    font-size: 21px;
    padding: 22px 22px;
    }
    .card-plane .card-face.front .title hr {
    margin: 7px 0;
    }
    .card-plane .card-face.front .scroll {
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
    font-size: 12px;
    }
    .card-plane .card-face.front .scroll .arrow {
    font-size: 20px;
    font-family: 'Times New Roman', serif;
    margin-bottom: 10px;
    }
    .card-plane .card-face.back {
    color: white;
    background-color: #FD556F;
    /* reversed for the back of the card */
    width: 350px;
    height: 200px;
    -webkit-transform: rotateZ(90deg) rotateX(180deg) translate3d(75px, -75px, 0px);
    transform: rotateZ(90deg) rotateX(180deg) translate3d(75px, -75px, 0px);
    }
    .card-plane .card-face.back div {
    font-family: Inconsolata, monospace;
    color: white;
    padding: 20px;
    font-size: 14px;
    }