Created
March 16, 2020 01:08
-
-
Save mopcweb/e8ef71f5734d38ed1300839c2068c59e to your computer and use it in GitHub Desktop.
More lightweight function which creates CSS only ripple effect. For usage w/ JSS. Here ripple always starts from center of ripple container
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function createRipple(color: string = '#ffffff80', duration: number = 1000) { | |
const styles = { | |
position: 'relative', | |
overflow: 'hidden', | |
transform: 'translate3d(0, 0, 0)', | |
cursor: 'pointer', | |
'&::after': { | |
content: '""', | |
display: 'block', | |
position: 'absolute', | |
width: '100%', | |
height: '100%', | |
top: 0, | |
left: 0, | |
pointerEvents: 'none', | |
backgroundImage: `radial-gradient(circle, ${color} 10%, transparent 10.01%)`, | |
backgroundRepeat: 'no-repeat', | |
backgroundPosition: '50%', | |
transform: 'scale(10, 10)', | |
opacity: 0, | |
transition: `transform ${duration / 2}ms, opacity ${duration}ms`, | |
}, | |
'&:active::after': { | |
transform: 'scale(0, 0)', | |
opacity: 0.2, | |
transition: '0s', | |
}, | |
}; | |
return styles; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment