jsnanigans / Vue Parallax Js
Tiny vue component that adds a directive for parallax effect on elements.
Stars: ✭ 107
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Parallax Js
Vue Social Sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Stars: ✭ 1,071 (+900.93%)
Mutual labels: vue-components, vue-component, vuejs-components
vue-notification-bell
Vue.js notification bell component.
Stars: ✭ 64 (-40.19%)
Mutual labels: vue-components, vue-component, vuejs-components
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (+314.02%)
Mutual labels: vue-components, vue-component
Vue Swatches
🎨 Help the user picking beautiful colors!
Stars: ✭ 456 (+326.17%)
Mutual labels: vue-components, vuejs-components
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+6324.3%)
Mutual labels: vue-components, vue-component
Vue Video Player
🎞 @videojs component for @vuejs
Stars: ✭ 4,026 (+3662.62%)
Mutual labels: vue-components, vue-component
Cheetah Grid
The fastest open-source data table for web.
Stars: ✭ 417 (+289.72%)
Mutual labels: vue-components, vue-component
Xcui
🍴 A Vue.js 2.x desktop components colletion
Stars: ✭ 88 (-17.76%)
Mutual labels: vue-components, vue-component
vui-vc-next
Vue 3 with Vite Playground - Mobile web UI components - (vue3+vite2).
Stars: ✭ 15 (-85.98%)
Mutual labels: vue-components, vue-component
Primevue
The Most Complete Vue UI Component Library
Stars: ✭ 1,085 (+914.02%)
Mutual labels: vue-components, vue-component
Vue Simple Upload
Simple File upload component for Vue.js
Stars: ✭ 100 (-6.54%)
Mutual labels: vue-components, vue-component
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+18675.7%)
Mutual labels: vue-components, vue-component
Material Components Vue
Material Design styled components for Vue.js
Stars: ✭ 316 (+195.33%)
Mutual labels: vue-components, vuejs-components
Nextcloud Vue
🍱 Vue.js components for Nextcloud app development ✌
Stars: ✭ 89 (-16.82%)
Mutual labels: vue-components, vuejs-components
Vue Spinners
💫 A collection of loading spinner components for Vuejs
Stars: ✭ 255 (+138.32%)
Mutual labels: vue-components, vuejs-components
Vuelayers
Web map Vue components with the power of OpenLayers
Stars: ✭ 532 (+397.2%)
Mutual labels: vue-components, vuejs-components
pagination
No description or website provided.
Stars: ✭ 14 (-86.92%)
Mutual labels: vue-components, vue-component
Vue Qrcode Reader
A set of Vue.js components for detecting and decoding QR codes.
Stars: ✭ 1,240 (+1058.88%)
Mutual labels: vue-components, vue-component
Vue Meeting Selector
This component is inspired from the meeting selector from doctolib with the power of Vuejs components.
Stars: ✭ 44 (-58.88%)
Mutual labels: vue-components, vue-component
Vue Particles
Vue.js component for particles backgrounds ✨
Stars: ✭ 1,220 (+1040.19%)
Mutual labels: vue-components, vue-component
vue-parallax-js
Tiny vue component that adds a directive for parallax effect on elements.
- no dependencies
- lightweight
- 1.3k gzip
Setup
npm install --save vue-parallax-js
# or use yarn
yarn add vue-parallax-js
in your main JavaScript file
// import Vue and vue-parallax-js
import Vue from 'vue'
import VueParallaxJs from 'vue-parallax-js'
// add vue-parallax-js to vue
Vue.use(VueParallaxJs)
Usage
when everything is setup you can use the directive like this:
<h1 v-parallax="0.2">vue-parallax-js</h1>
Options
Vue.use(VueParallaxJs, options)
const options = {
minWidth: Number, /* minumum window width for parallax to take effect */
className: String, /* this class gets added to all elements
that are being animated, by default none */
container: String, /* element that actually scrolls, by default it's window */
}
Modifiers
when using the v-parallax
directive you can also pass some modifiers to configure the instance of vue-parallax-js
<h1 v-parallax.modifier="0.2">vue-parallax-js</h1>
Modifier | Description |
---|---|
horizontal | horizontal based parallax |
centerX | will add transform: translateX(-50%) along with the parallax positioning |
absY | uses the window height instead of the element height for the calculations |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].