React 顶部标题组件演示

React Hero Header Component

React

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

var HeroHeader = function(_React$Component) {
    _inherits(HeroHeader, _React$Component);

function HeroHeader() {
        _classCallCheck(this, HeroHeader);

for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
        }

var _this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args)));

_this.state = {
            height: undefined
        };
        _this._containerDOM = null;
        _this._scrollPosition = 0;
        _this.onScroll = _this.onScroll.bind(_this);
        return _this;
    }

HeroHeader.prototype.componentDidMount = function componentDidMount() {
        window.addEventListener('scroll', this.onScroll);
    };

HeroHeader.prototype.onScroll = function onScroll() {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        if (this.props.scrollAction >= scrollTop) {
            var step = this._scrollPosition - scrollTop;
            var actualHeight = this._containerDOM.offsetHeight;
            var height = actualHeight + step;
            this.setState({
                height: height
            });
            this._scrollPosition = scrollTop;
        }
    };

HeroHeader.prototype.render = function render() {
        var _this2 = this;

return React.createElement(
            'header', {
                className: 'heroHeader',
                ref: function ref(n) {
                    return _this2._containerDOM = n;
                },
                style: {
                    height: this.state.height
                }
            },
            React.createElement(
                'div', {
                    className: 'heroHeader-content'
                },
                this.props.children
            )
        );
    };

return HeroHeader;
}(React.Component);

HeroHeader.propTypes = {
    scrollAction: React.PropTypes.string
};

HeroHeader.defaultProps = {
    scrollAction: 250
};

function DummyContent() {
    return React.createElement(
        'section',
        null,
        React.createElement(
            'p',
            null,
            'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.'
        ),
        React.createElement(
            'p',
            null,
            'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.'
        ),
        React.createElement(
            'p',
            null,
            'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.'
        ),
        React.createElement(
            'p',
            null,
            'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.'
        ),
        React.createElement(
            'p',
            null,
            'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.'
        ),
        React.createElement(
            'p',
            null,
            'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.'
        ),
        React.createElement(
            'p',
            null,
            'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.'
        ),
        React.createElement(
            'p',
            null,
            'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.'
        ),
        React.createElement(
            'p',
            null,
            'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.'
        ),
        React.createElement(
            'p',
            null,
            'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.'
        ),
        React.createElement(
            'p',
            null,
            'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.'
        )
    );
}

function App() {
    return React.createElement(
        'div',
        null,
        React.createElement(
            HeroHeader,
            null,
            React.createElement(
                'h1', {
                    className: 'title'
                },
                'How people talk about software'
            )
        ),
        React.createElement(DummyContent, null)
    );
}

ReactDOM.render(React.createElement(App, null), document.querySelector('#app'));

编译

CSS

@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600";
.heroHeader {
    height: 200px;
    max-height: 200px;
    min-height: 50px;
    background: url("https://d4z6dx8qrln4r.cloudfront.net/background-572f59cc9d0d8-default.jpeg") no-repeat center;
    background-size: cover;
    left: 0;
    right: 0;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.heroHeader-content {
    position: relative;
    z-index: 1;
}
.heroHeader::before {
    content: "";
    background: rgba(0, 0, 0, 0.45);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: background 400ms;
    z-index: 0;
}
/* Just decorating stuff, nothing interesting to see here */

body,
html {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}
h1 {
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 0 0 25px 0;
}
.title {
    color: #fff;
    text-align: center;
    font-size: 40px;
    font-weight: 600;
}
section {
    width: 600px;
    max-width: 100%;
    padding: 225px 20px 20px 20px;
    margin: 0 auto;
    display: block;
    line-height: 150%;
}

HTML

React Hero Header Component

React

编辑器支持Emmet

快捷键

React Hero Header Component

React

React.js 可拖放文件的上传表单（支持多文件和进度显示）

基于WebGL和ReactMotion实现的一款3D条形图表插件（在线演示）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：