使用React.js实现的移动电子名片

Business Card II 鼠标向下滚动显示名片详情。

react, card

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1248
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var CardBack = React.createClass({
    displayName: 'CardBack',
    render: function render() {
        var x = this.props.x;
        var zIndex = x > 0.5 ? 1 : 0;
        var style = {
            zIndex: zIndex,
            backgroundColor: 'black'
        };

if (!zIndex) return null;
        return React.createElement(
            'div', {
                className: 'card-face back',
                style: style
            },
            React.createElement(ColorBar, {
                color: '#EDC919',
                width: '10%',
                left: '0%',
                x: 2 * (1 - x)
            }),
            React.createElement(ColorBar, {
                color: '#76919A',
                width: '10%',
                left: '10%',
                x: 2.1 * (1 - x)
            }),
            React.createElement(ColorBar, {
                color: '#257A97',
                width: '10%',
                left: '20%',
                x: 2.2 * (1 - x)
            }),
            React.createElement(ColorBar, {
                color: '#7A486E',
                width: '10%',
                left: '30%',
                x: 2.3 * (1 - x)
            }),
            React.createElement(ColorBar, {
                color: '#EDC919',
                width: '10%',
                left: '40%',
                x: 2.4 * (1 - x)
            }),
            React.createElement(ColorBar, {
                color: '#76919A',
                width: '10%',
                left: '50%',
                x: 2.5 * (1 - x)
            }),
            React.createElement(ColorBar, {
                color: '#257A97',
                width: '10%',
                left: '60%',
                x: 2.6 * (1 - x)
            }),
            React.createElement(ColorBar, {
                color: '#7A486E',
                width: '10%',
                left: '70%',
                x: 2.7 * (1 - x)
            }),
            React.createElement(ColorBar, {
                color: '#EDC919',
                width: '10%',
                left: '80%',
                x: 2.8 * (1 - x)
            }),
            React.createElement(ColorBar, {
                color: '#76919A',
                width: '10%',
                left: '90%',
                x: 2.9 * (1 - x)
            })
        );
    }
});

var CardPlane = React.createClass({
    displayName: 'CardPlane',
    getStyle: function getStyle() {
        var x = this.props.x;
        var transform = '\n      rotateZ(' + 90 * x + 'deg)\n      rotateX(' + 180 * x + 'deg)\n      translate3d(' + -50 * x + 'px, 0, 0)\n      scale(' + (1 + x * x * x * x * 10) + ')\n    ';

return {
            transform: transform,
            WebkitTransform: 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 Link = function Link(props) {
    return React.createElement(
        'div', {
            className: 'line'
        },
        props.children
    );
};

var Slash = function Slash(props) {
    return React.createElement(
        'span', {
            className: 'slash'
        },
        ' / '
    );
};

var Links = function Links(_ref) {
    var x = _ref.x;

// Links do not show until
    var progress = x < 0.7 ? 0 : (x - 0.7) / 0.3;
    var opacity = progress;
    var display = progress ? 'inherit' : 'none';
    var style = {
        display: display,
        opacity: opacity
    };
    return React.createElement(
        'div', {
            id: 'links',
            style: style
        },
        React.createElement(
            Link,
            null,
            'chris bolin'
        ),
        React.createElement(
            Link,
            null,
            'wannabe polymath'
        ),
        React.createElement(
            Link,
            null,
            'cambridge, ma, usa'
        ),
        React.createElement(
            Link,
            null,
            React.createElement(
                'a', {
                    href: 'https://www.jumpshell.com'
                },
                'dayjob'
            ),
            React.createElement(Slash, null),
            React.createElement(
                'a', {
                    href: 'https://www.instagram.com/bolinchris'
                },
                'photos'
            )
        ),
        React.createElement(
            Link,
            null,
            React.createElement(
                'a', {
                    href: 'mailto:bolin.chris@gmail.com'
                },
                'email'
            ),
            React.createElement(Slash, null),
            React.createElement(
                'a', {
                    href: '/words'
                },
                'words'
            )
        ),
        React.createElement(
            Link,
            null,
            React.createElement(
                'a', {
                    href: '/enchiridion'
                },
                'enchiridion'
            ),
            React.createElement(Slash, null),
            React.createElement(
                'a', {
                    href: 'https://github.com/chrisbolin/gibrish'
                },
                'gibrish'
            )
        )
    );
};

var App = React.createClass({
    displayName: 'App',
    getInitialState: function getInitialState() {
        return {
            x: 0
        };
    },

appStyle: {
        // longer scroll for desktop users
        height: window.innerHeight * (fx.isMobile() ? 1.5 : 3)
    },
    handleScroll: function handleScroll(e) {
        var x = fx.limitUnit(window.scrollY / (this.appStyle.height - window.innerHeight));
        this.setState({
            x: x
        });
    },
    handleLegacyScroll: function handleLegacyScroll(e) {
        var _this = this;

// handling for non-iOS mobile devices, until they allow painting while scrolling
        // this creates a non-interactive animation instead :/

var x = this.state.x;
        var interval = 10; // update in ms
        var totalTime = 1000; // ms

e.preventDefault();

// don't queue up anything in the middle of animation
        if (x !== 1 && x !== 0) return;

// 'scroll' up when at the bottom
        var increment = interval / totalTime * (x === 1 ? -1 : 1);
        var intervalId = setInterval(function() {
            x = fx.limitUnit(x + increment);
            _this.setState({
                x: x
            });
            if (x === 0 || x === 1) {
                clearInterval(intervalId);
            }
        }, interval);
    },

componentDidMount: function componentDidMount() {
        this.container = document.getElementsByClassName('main');
        // backup for non-safari mobile browsers
        var handler = fx.isMobile() && !fx.isSafari() ? this.handleLegacyScroll : this.handleScroll;

React.render(React.createElement(App, null), document.getElementById('app'));

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,900);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400italic);
body {
    background-color: #f9f9f9;
    margin: 0;
}
.container {
    position: fixed;
    width: 100%;
}
.card-plane {
    position: absolute;
    width: 182.85714px;
    height: 320px;
    margin: 50px calc(50vw - 91.42857px);
}
.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;
    text-align: center;
    width: 100%;
    color: #7D7D7D;
    bottom: -30px;
    font-size: 12px;
}
.card-plane .card-face.back {
    /* reversed for the back of the card */
    
    width: 320px;
    height: 182.85714px;
    -webkit-transform: rotateZ(90deg) rotateX(180deg) translate3d(68.57143px, -68.57143px, 0px);
    transform: rotateZ(90deg) rotateX(180deg) translate3d(68.57143px, -68.57143px, 0px);
}
.back-text {
    position: fixed;
    left: calc(50vw - 182.85714px + 40px);
    top: 90px;
    font-family: Inconsolata, monospace;
    color: white;
    font-size: 15px;
    width: 300px;
}
.back-text a {
    color: white;
}
.back-text a:hover {
    background-color: white;
    color: #FD556F;
    text-decoration: none;
}
.arrow {
    font-size: 24px;
    font-family: 'Times New Roman', serif;
    position: fixed;
    text-align: center;
    width: 100%;
    top: 320px;
}
#links {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 9vmin;
    padding: 4vmin;
    font-weight: 900;
    width: 100vmin;
    margin: auto;
    position: relative;
}
#links .line {
    line-height: 7.5vmin;
    margin-bottom: 2.5vmin;
}
#links .line:nth-of-type(5n+1) {
    color: #FD556F;
}
#links .line:nth-of-type(5n+2) {
    color: #EDC919;
}
#links .line:nth-of-type(5n+3) {
    color: #76919A;
}
#links .line:nth-of-type(5n+4) {
    color: #257A97;
}
#links .line:nth-of-type(5n+5) {
    color: #7A486E;
}
#links a {
    color: black;
    border-bottom: 2px dotted black;
    margin-bottom: -2px;
    text-decoration: none;
    display: inline-block;
    color: inherit;
    border-color: inherit;
}
#links a:hover {
    border-bottom-style: solid;
}
#links .slash {
    font-weight: 200;
}
body {
    margin: 0;
    overflow-x: hidden;
}

HTML

Business Card II 鼠标向下滚动显示名片详情。

react, card

编辑器支持Emmet

快捷键

Business Card II 鼠标向下滚动显示名片详情。

react, card

使用React.js实现的电子商务订单跟踪系统应用程序

使用ReactJS和Mo.js实现的甩热狗动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：