Open Losses opened 6 years ago
@Losses Thanks for the suggestion, this is a good result. According to the requirements of the Reveal Highlight Docs, the background and the border have different highlighting effects. If this effect cannot be achieved, your suggestion will be used to implement it.
the codepen example seems to be missing any click ripple effect which normal reveal buttons of uwp fluent design have.
My contribution: https://codepen.io/d2phap/full/rpJEaK/
@d2phap Not very close to fds, the light effect of fds will appear when your mouse point close to the button (even not move into the button). May be an ideal solution is using context api, provide a global light effect calculation data source, and use another worker for the intensive computing, the task is very very tedious...
@Losses You can apply the effect to nested items to achieve the reveal border effects. I updated my demo: https://codepen.io/d2phap/full/rpJEaK/
NPM install:
npm i fluent-reveal-effect@latest
Full source code: https://github.com/d2phap/fluent-reveal-effect
@d2phap Really impressive work, but there are some mistake, the border effect of fds is inside the container, the light effect is much lighter than the effect inside the container, it's very hard to implement this difference. some CSS attr can help like clip path, but not all browser can render it correctly.
the border effect of fds is inside the container
You can set the background of btn-border
as same as btn
class.
.
the light effect is much lighter than the effect inside the container
You can adjust the light color, light size by override the below options https://github.com/d2phap/fluent-ui/blob/master/Source/lib/js/modules/reveal.js#L43
RevealEffect.applyTo(".effect-group-container", {
click_effect: true,
light_color: "rgba(255,255,255,0.3)",
gradient_size: 100,
is_container: true,
children: {
border: ".btn-border",
el: ".btn"
}
})
The strength of this is to allow you to customize light color, light size. You just need to override the options. Anw, I updated the effects in demo link
@d2phap wow, it looks really awsome!
@d2phap By the way, is there any pressure test, how many buttons on the screen at the same time will affect the effect of page rendering.
the button click ripple effect should also be a bit slower
Just stumbled across this issue, got hooked and built this based on the CodePen shared at the top of the thread 👀
Still a little bare bones though: https://codepen.io/21stCenturyJonas/full/gQGXdd/
To anyone who is still interested in this question, our team have implemented an reveal highlight effect based on Web Components,
Sorce Code: https://github.com/ax-design/reveal-highlight Demo: https://Ax-design.github.io/demo/reveal-highlight.html
For the concern of rendering effect, we used CSS Typed OM to manage styles, but it's okay to be transformed to a custom style system, interested to have a try?
@myxvisual
https://codepen.io/rauldronca/pen/WMayrP I just found this demo, and the effect may be modified and make it looks like FDS's light effect for buttons, is it possible?