apertureless / Vue Parallax
Licence: mit
🌌 Vue.js component for parallax image scroll effects
Stars: ✭ 569
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Parallax
Vue Product Zoomer
Zoom Prodct Image, useful for e-shop website
Stars: ✭ 248 (-56.41%)
Mutual labels: image, scrolling, vuejs2
Eager Image Loader
The eager-loading for image files on the web page that loads the files according to your plan. This differs from the lazy-loading, for example, this can be used to avoid that the user waits for the loading.
Stars: ✭ 22 (-96.13%)
Mutual labels: image, fast
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (-62.04%)
Mutual labels: scrolling, vuejs2
Simpleparallax.js
Simple and tiny JavaScript library that adds parallax animations on any images
Stars: ✭ 1,075 (+88.93%)
Mutual labels: image, parallax
Veluxi Starter
Veluxi Vue.js Starter Project with Nuxt JS and Vuetify
Stars: ✭ 39 (-93.15%)
Mutual labels: parallax, vuejs2
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-82.25%)
Mutual labels: scrolling, vuejs2
Vue Chat Scroll
🖱️ Vue directive to keep things scrolled to the bottom.
Stars: ✭ 517 (-9.14%)
Mutual labels: scrolling, vuejs2
Parallaxscrollingview
Parallax scrolling either by offset or automatically.
Stars: ✭ 91 (-84.01%)
Mutual labels: scrolling, parallax
Vue Image Loader
Vue progressive image loader plugin like Medium
Stars: ✭ 47 (-91.74%)
Mutual labels: image, vuejs2
Perspective
Powerful scrolling and motion parallax for iOS
Stars: ✭ 260 (-54.31%)
Mutual labels: scrolling, parallax
Mrthumb
【拇指先生】 a simple easy video thumbnail provider,顺滑的获取视频缩略图,支持本地和网络视频,有问题大胆提Issues
Stars: ✭ 60 (-89.46%)
Mutual labels: image, fast
momentum
Track movement and basic events with CSS custom properties
Stars: ✭ 19 (-96.66%)
Mutual labels: parallax, scrolling
Vue Flux
Image slider which comes with 20 cool transitions
Stars: ✭ 359 (-36.91%)
Mutual labels: image, parallax
Easywatermark
🔒 🖼 Securely, easily add a watermark to your sensitive photos. 安全、简单地为你的敏感照片添加水印,防止被小人泄露、利用
Stars: ✭ 519 (-8.79%)
Mutual labels: image
Underconstruction
This Laravel 8 package makes it possible for you to set your website in "Under Construction" mode. Only users with the correct 4 (or more) digit code can access your site. 🔥 💥 🔥
Stars: ✭ 549 (-3.51%)
Mutual labels: vuejs2
vue-parallaxy
Is a compontent for fast 60fps parallax scroll effects in vue 2.
Demo
Install
npm install vue-parallaxy
or yarn add vue-parallaxy
Usage
vue-parallax works with slots. So you can pass an image or even srcsets for better mobile experiences.
// Image.vue
<template>
<parallax>
<img src="path/cool-background-image.jpg" alt="very cool bg">
</parallax>
</template>
<script>
import Parallax from 'vue-parallaxy'
export default {
components: {
Parallax
}
}
</script>
Props
Prop | Type | Default Value | Description |
---|---|---|---|
parallax | Boolean | true | Activates parallax effect |
speedFactor | Number | 0.15 | factor on how strong the effect is |
direction | String | 'up' | Either 'up' or 'down', determines scroll direction of image |
fixed | Boolean | false | Other parallax effect. Image is fixed in position |
sectionHeight | Number | 70 | section height for mobile |
breakpoint | String | '(min-width: 968px)' | Media query for mobile deactivation |
sectionClass | String | 'Masthead' | CSS class of the outer section tag |
containerClass | String | 'Masthead__image' | CSS class of the container holding the image |
parallaxClass | String | 'is-parallax' | Modifier class for the parallax effect |
fixedClass | String | 'is-fixed' | Modifier class for the fixed parallax effect |
Customizing
You can change some of the behavior by changing the css classes. To be more clean, you can change them over the props. No need to overwrite or !important
the existing classes.
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm run unit
# run all tests
npm test
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
Contributing
- Fork it ( https://github.com/apertureless/vue-parallax/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request
License
This software is distributed under MIT license.
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].