vue-parallax-image
v1.1.3
Published
这是一个根据鼠标移动,图层相对位移产生视觉效果。(This is a vue component based on mouse movement and parallax.)
Downloads
3
Readme
vue-parallax-image
一个根据鼠标移动,图层视差效果vue组件
未做测试,请谨慎使用!
demo演示
github
安装
npm install vue-parallax-image --save
使用
<ParallaxImage :config='config' />
import ParallaxImage from 'vue-parallax-image'
components: { ParallaxImage },
data () {
return {
config:{
width:'100%', // 底图的宽度
height: '500px', // 底图的高度
basemap: require('../../assets/img/0.jpg'), // 底图相对路径
imgList:[ // 视差图片的列表 (建议最少1张最多5张)
{
img: require('../../assets/img/1.png'), // 图片路径
width: '200px', // 图片的宽度
height: '200px', // 图片的高度
left: '60%', // 图片的位置 - left
top: '25%' // 图片的位置 - top
},
{
img: require('../../assets/img/2.png'),
width: '200px',
height: '100px',
left:'40%',
top: '45%'
},
{
img: require('../../assets/img/3.png'),
width: '100%',
height: '100%',
left:'0%',
top: '0%'
},
{
img: require('../../assets/img/4.png'),
width: '',
height: '',
left:'5%',
top: '0%'
}
]
}
}
}