GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects â†’ spemer â†’ vue-rippler

spemer / vue-rippler

Licence: MIT license
🎉 Custom ripple effect plugin for @vuejs

Programming Languages

javascript
184084 projects - #8 most used programming language
shell
77523 projects

Labels

pluginvuejsvuerippleeffectvuejs-plugin

Projects that are alternatives of or similar to vue-rippler

Paper Ripple
Material Design Ripple effect in pure JS & CSS.
Stars: ✭ 55 (+22.22%)
Mutual labels:  ripple, effect
touchMyRipple
A simple library for apply the ripple effect where you want
Stars: ✭ 19 (-57.78%)
Mutual labels:  ripple, effect
typing.js
Js library for creating typing effect on webpage.
Stars: ✭ 22 (-51.11%)
Mutual labels:  effect
doorman
Simple animation for revealing elements.
Stars: ✭ 38 (-15.56%)
Mutual labels:  effect
VideoReflection
Embeddable video, GIF, water reflection and video borders in a video.
Stars: ✭ 33 (-26.67%)
Mutual labels:  effect
adequate crypto address
A Ruby Library for dealing with validation cryptocurrency addresses
Stars: ✭ 18 (-60%)
Mutual labels:  ripple
Flutter-KenBurns
Kenburns effect on flutter
Stars: ✭ 82 (+82.22%)
Mutual labels:  effect
FunFilter
Freely painted area, the software will automatically add filter on its.
Stars: ✭ 15 (-66.67%)
Mutual labels:  effect
ng-ripple
Material ripple effects for AngularJs
Stars: ✭ 12 (-73.33%)
Mutual labels:  ripple
rippled-php
A PHP library for rippled (XRP Ledger) communication.
Stars: ✭ 33 (-26.67%)
Mutual labels:  ripple
typescript-react-starter
React & TypeScript Starter with webpack, ts-jest and runtime environment variables. It comes with fp-ts ecosystem and pre-configured prettier, eslint, vscode, husky hooks and Dockerfile to build a deployable image of your app
Stars: ✭ 17 (-62.22%)
Mutual labels:  effect
go-crypto-wallet
Cryptocurrency wallet for trading for Bitcoin, Bitcoin cash, Ethereum, ERC20, Ripple
Stars: ✭ 59 (+31.11%)
Mutual labels:  ripple
coolrs
CoolRs is a collection of Android Renderscript effects.
Stars: ✭ 41 (-8.89%)
Mutual labels:  effect
node-bitstamp
bitstamp REST and WS API Node.js client 💵
Stars: ✭ 58 (+28.89%)
Mutual labels:  ripple
effect-js
JavaScript Library to access and develop dApps on Effect Network.
Stars: ✭ 56 (+24.44%)
Mutual labels:  effect
vueNotification
Notification plugin for VuesJS
Stars: ✭ 52 (+15.56%)
Mutual labels:  vuejs-plugin
XpringKit
XpringKit provides a Swift SDK for interacting with Xpring Protocols (XRP/PayID/ILP). This library is deprecated.
Stars: ✭ 23 (-48.89%)
Mutual labels:  ripple
RippleLayout
水波纹选中控件（A ripple layout with selected state）
Stars: ✭ 25 (-44.44%)
Mutual labels:  ripple
DissolveEffectForTMPro
DissolveEffectForTMPro provide dissolve effect component for TextMeshPro in Unity.
Stars: ✭ 86 (+91.11%)
Mutual labels:  effect
WaterColor
openframeworks parametric shader effect watercolor
Stars: ✭ 54 (+20%)
Mutual labels:  effect
View All Similar Projects âž”

vue-rippler 🎉

Simple Vue.js plugin for custom ripple effect

vue2 Version Gzipsize Awesome License Hits stargazers

Live Demo

Installation

npm i vue-rippler --save
yarn add vue-rippler

CDNs

jsDelivr, UNPKG, bundle.run

Usage

main.js

// main.js
import Vue from "vue";
import VueRippler from "vue-rippler";

Vue.use(VueRippler);

Use in component

// .vue template
<template>
  <my-component ripple />
</template>

Set ripple style, and customize as you want(Optional)

<style>
/*
play with some lines below
*/
[ripple] .ripple--container .ripple--body {
  opacity: 0.5 !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  -webkit-animation: rippler 1000ms;
          animation: rippler 1000ms;
}
</style>

Author

Hyouk Seo(Spemer)

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].