---
name: Parallax 视差
route: /parallax
parent: 组件
menu: 数据展示
---
import { Playground, Props } from 'docz'
import  Parallax,{ParallaxLayer}  from '../components/parallax'

# Parallax 视差
>提示: 展开代码编辑器可以在线编辑，实时生效

## 基础用法

<Playground>
    <Parallax style={{background:'#edeff4'}}>
    <ParallaxLayer cover={true} deep={1000} disabledDirection="y" bg="https://raw.githubusercontent.com/EugeneBurlak/assets/master/eugeneburlak/background.jpg"/>
    <ParallaxLayer deep={40} bg="https://raw.githubusercontent.com/EugeneBurlak/assets/master/eugeneburlak/layer-1.png"/>
    <ParallaxLayer deep={100} bg="https://raw.githubusercontent.com/EugeneBurlak/assets/master/eugeneburlak/layer-2.png"/>
    <ParallaxLayer deep={200}>
        <h1 style={{margin:50}}>hello 老铁</h1>
    </ParallaxLayer>
    </Parallax>
</Playground>


## API


<Props of={Parallax} />