mladenplavsic / css-ripple-effect Goto Github PK

View Code? Open in Web Editor NEW

338.0 8.0 110.0 1.2 MB

Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Home Page: http://mladenplavsic.github.io/css-ripple-effect

License: MIT License

CSS 52.69% JavaScript 47.31%

ripple no-javascript pure-css

css-ripple-effect's Introduction

Pure CSS ripple effect (no JavaScript)

CSS-only implementation of Android Material design "ripple" animation on click event

Main advantage of this solution is that there is no DOM manipulation in order to create animation. That means this is faster - it doesn't use JavaScript or jQuery to animate.

This solution is also implemented in one of the biggest Bootstrap theming libraries Bootswatch in their Materia theme.

Demo

Installation

This library can be installed via npm

npm install css-ripple-effect

Or you can use yarn

yarn add css-ripple-effect --production

Or you can use bower

bower install css-ripple-effect

Or you can simply download it in your project, but that way you don't have the option to update if newer versions appear.

Supporters

BrowserStack: Live, Web-Based Browser Testing https://browserstack.com

css-ripple-effect's People

Contributors

Stargazers

Watchers

Forkers

gvsharma alajfit rahulkashyap31 tgensol deawx anandbhardwaj mshahin364 1bjk903 eugenesnihovsky tusharshuklaa akbeeram avive johndavedecano devdemo86 lotterfriends okremenovic vnnguyendung dlpeme erniedavis bhushangoel htlcode paimeykhuig gazugafan prakasholekar cricku ragevox naveenv alexsegen marvinjude asifinet marcosandrade22 fuka2000 jmquigley balanceinternet paragchirde mohammedsabi cdjohnnatha syarifmaulanamm rickieanand thegagan skicomdev lokeswara-sane abhishek12web manoj1991 zenpassvpn jxtreehouse ccchai mcarpenterjr designertree troycartmill nilgems fantasy525 dejanl7 korayguclu hanakin aljosa42 upendradevsingh debuggerpk ivawzh ozankocakkk jairoroberto akeelahamed ilovezy kenneth-v yuanfayang hertzden maha83port parveen-jabong hht nialldiamond pixney vksxk12 frankiyu deksominol lucasscheuvens amumubuku yuyoo0508 feranimaciones wangzun233 jingsp songqinzhou ahmetcetinn cathy-wei scredii ajaymarathe matiasbatero romanbusfy asdwer098 akm-tl souvik-bera basdog22 jackhwl g7sim luguohuakai ivarsv supremeking23 alexgnac lamps26 magikabdul a973c

css-ripple-effect's Issues

It doesn´t work in Microsoft Edge

The effect is really nice and it works perfect in Chrome and Firefox but it seems there is a problem with microsft´s browser.

Doesn't work with Bootstrap v4 dropdown menu

Adding ripple to the dropdown link, makes the caret-down disappear and the ripple is not centred vertically.

https://jsfiddle.net/aq9Laaew/197449/

Chrome, Firefox and Edge 0n Windows...

Dark shadow

At github is a demonstration with white shadow which is just a picture . How can i get a white shadown (like on Bootswatch) instead of a gray shadow ?

Doesn't work on table-row

If display is set to table-row, the ripple starts from centre of the viewport and not the element's centre.

causes horizontal overflow issues on inline elements

I had an issue where I used this on general elements with no additional styles. Since is natively inline, the .ripple:after pseudoelement would take its size from the nearest block level element, but anchor its central coordinates with the . This led to horizontal overflow issues where there otherwise were none.

effect is not showing on bootstrap anchor tag button?

Issue

first of thanks for this pure CSS ripple effect, but there is some problem with it when using anchor tag <a class="btn btn-primary" href="login.html">Login</a> as a button, and clicking on the button, page redirect to login page, and the ripple effect is not showing.

Suggestion

when we click on button first ripple effect should show and then page get redirect :)

Hope this helps :)

Works strange with large elements

I want to apply effect to large components and it does not work

https://jsfiddle.net/anton_kob/n5u098x5/4/

Something went wrong

Chrome on OSX
Version 52.0.2743.116 (64-bit)

Right clicking triggers the ripple

Probably want to restrict the ripple effect to only left click actions. Triggering the ripple on right click is misleading.

Tested in Windows 10 Chrome Version 55.0.2883.87 m (64-bit)

Round buttons don't look nice

Round buttons don't look nice. Is there a solution?

Compatibility issues

in some browser,why ripple will flash twice?plz

Click functionality breaks when used on button with font-awesome inside

May be this is not an issue and something out of my own error but i'm unable to figure it out and hence would like to seek your help for same.

When trying to implement the code in ripple.min.css on a button, following issues occur for reasons unknown to me:

Click stops working! This is the button code:
It blinks rather than 'ripple'

This is what '.customBtn ' looks like:
.customBtn {
position: fixed;
top: 50%;
font-size: 8em;
background-color: transparent;
color: grey;
outline: 0;
border: none;
}

This is what i've copied in my CSS (SCSS) from your code:
.ripple {
position: relative;
overflow: hidden;

&:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10,10);
opacity: 0;
transition: transform .5s, opacity 1s;
}

&:active, &:after {
transform: scale(0,0);
opacity: .2;
transition: 0s;
}
}

What is wrong in this?