sf-vue-background-animation

The component is made for vue version 3. With the help of predefined animations, we can use almost anything as a background animation.

Preview

Installing

npm install sf-vue-background-animation

Usage

main.js

import { createApp } from 'vue'
import App from './App.vue'
import VueBackgroundAnimation from 'sf-vue-background-animation'

const app = createApp(App)

app.use(VueBackgroundAnimation)

app.mount('#app')

Then we simply place it in the scope where we want to use it.

Example

some-component.vue

<template lang="pug">

	.container
		sf-vue-background-animation(animation="float", :top="15", :left="50")
			img(src="@/assets/images/some-picture.svg")

</template>

<style  lang="scss" scoped>
	.container{
		position: relative;
	}
</style>

If the component is not parameterized, or if a non-existent animation is specified, the default values apply.

Tip: give the parent component a relative position!

Props

Name	Type	Description	Possible values	Defaults
animation	String	predefined animations	float, pulse	default
show	Boolean	visibility of the component	any valid boolean value	true
top	Number	the position of the component from the top, the value is calculated as a percentage	any valid number value	18
left	Number	the position of the component from the left, the value is calculated as a percentage	any valid number value	58
rotate	Number	rotation	any valid number value	0
zIndex	Number	z-index	any valid css value	10
position	String	position	any valid css value	absolute
transition	String	transition	any valid css value	all 7s ease

Slots

default slot

License

Released under MIT by Schön Ferenc.