ant-design/site/theme/template/Home/Banner.jsx
2018-01-05 15:16:49 +08:00

69 lines
2.3 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import TweenOne from 'rc-tween-one';
import QueueAnim from 'rc-queue-anim';
import ScrollParallax from 'rc-scroll-anim/lib/ScrollParallax';
import { FormattedMessage } from 'react-intl';
import BannerImage from './BannerImage';
const loop = {
duration: 3000,
yoyo: true,
repeat: -1,
};
class Banner extends React.PureComponent {
static propTypes = {
className: PropTypes.string,
}
static defaultProps = {
className: 'banner',
}
render() {
const { className, isMoblie } = this.props;
return (
<div className="home-page-wrapper banner-wrapper" id="banner">
<div className="banner-bg-wrapper">
<svg width="400px" height="576px" viewBox="0 0 400 576" fill="none">
<TweenOne component="g" animation={[{ opacity: 0, type: 'from' }, { ...loop, y: 15 }]}>
<ellipse id="Oval-9-Copy-4" cx="100" cy="100" rx="6" ry="6" stroke="#2F54EB" strokeWidth="1.6" />
</TweenOne>
<TweenOne component="g" animation={[{ opacity: 0, type: 'from' }, { ...loop, y: -15 }]}>
<g transform="translate(200 400)">
<g style={{ transformOrigin: '50% 50%', transform: 'rotate(-340deg)' }}>
<rect stroke="#FADB14" strokeWidth="1.6" width="9" height="9" />
</g>
</g>
</TweenOne>
</svg>
<ScrollParallax location="banner" className="banner-bg" animation={{ playScale: [1, 1.5], rotate: 0 }} />
</div>
<QueueAnim className={`${className} page`} type="alpha" delay={150}>
{isMoblie && (
<div className="img-wrapper" key="image">
<BannerImage />
</div>)}
<QueueAnim
className="text-wrapper"
key="text"
type="bottom"
>
<h1 key="h1">
Ant Design
</h1>
<p key="p">
<FormattedMessage id="app.home.introduce" />
</p>
</QueueAnim>
{!isMoblie && (
<div className="img-wrapper" key="image">
<ScrollParallax location="banner" component={BannerImage} animation={{ playScale: [1, 1.5], y: 80 }} />
</div>)}
</QueueAnim>
</div>
);
}
}
export default Banner;