zx-parallax v0.2.0

zx-parallax(作者:初志鑫1204505056@qq.com)

注意事项

只能用于Vue CLI项目

鸣谢

努力了这么久,终于成了一名合格的代码搬运工,我只是有幸站在了巨人的肩膀上,感谢自己,感谢巨人...

实现功能

1.实现了图片划过的3D效果

商务合作与赞赏

邮箱  1204505056@qq.com
QQ 1204505056

如果你觉得这个项目帮助到了你，你可以赞赏一下作者:

安装方法

cnpm i -S zx-parallax

icon组件main.js全局引入

import Vue from 'vue';
import App from './App.vue';
import {
	ParallaxContainer,
	ParallaxElement
} from '../components/export.js';
Vue.component('byui-parallax-container', ParallaxContainer);
Vue.component('byui-parallax-element', ParallaxElement);

byui-parallax-container属性

byui-parallax-element属性

template完整示例

<template>
	<div id="app">
		<byui-parallax-container class="image-container">
			<parallax-element type="translation" :parallaxStrength="0" tag="div">1</parallax-element>
			<byui-parallax-element type="translation" :parallaxStrength="-1" tag="img" :src="image1" />
			<byui-parallax-element type="translation" :parallaxStrength="0" tag="img" :src="image2" />
			<byui-parallax-element type="translation" :parallaxStrength="1.5" tag="img" :src="image3" />
			<byui-parallax-element type="translation" :parallaxStrength="2" tag="img" :src="image4" />
			<byui-parallax-element type="translation" :parallaxStrength="0.5" tag="img" :src="image5" />
		</byui-parallax-container>
	</div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			image1: require('./assets/1.png'),
			image2: require('./assets/2.png'),
			image3: require('./assets/3.png'),
			image4: require('./assets/4.png'),
			image5: require('./assets/5.png')
		};
	},
	created() {},
	mounted() {},
	methods: {}
};
</script>

<style lang="scss" scoped="scoped">
body {
	margin: 0;
	padding: 0;
}
#app {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}
/deep/ {
	.image-container {
		position: relative;
		img {
			width: 600px;
			position: absolute;
		}
	}
}
</style>