Which at the moment does limit support to Chromium browsers, but it also allows us to get the effect with no extra elements or pseudos as the ripple is a radial-gradient() now and it also simplifies the JavaScript as we don’t need to compute the size of the ripple relative to the button. I forked the Pen to make a Houdini version. This example by Ben Szabo is particularly concise: The main limitation is that the ripple can only emerge from one spot - usually the center of the button - rather than responding to the position of our clicks. But it’s possible to get close to the original effect with just CSS, using the :active pseudo-class to respond to clicks. If a user has disabled JavaScript, our ripple effect doesn’t have any fallbacks. On CodePen, there are lots of examples that show different implementations. Of course, this is only one way to achieve a ripple effect. To apply these combined effects to all our buttons, we need to instantiate a new instance of the class for each one: const buttons = document.getElementsByTagName("button") const offsetLeft = this.left + this.x * this.magneticPullX Ĭonst offsetTop = this.top + this.y * this.magneticPullY So, when we define the center of our ripple, we need to adjust for both the position of the new button ( x and y) and the magnetic pull. They control how strongly our magnet method pulls the button after the cursor. Two important new variables are magneticPullX and magneticPullY. Instead, we can rely on cursorX and cursorY. Since the magnet effect needs to keep track of the cursor every time it moves, we no longer need to calculate the cursor position to create a ripple. If we want to add the ripple to every button on our page, we can use something like this: const buttons = document.getElementsByTagName("button") īutton.addEventListener("click", createRipple) With our function complete, all that’s left is to call it. const ripple = button.getElementsB圜lassName("ripple") Īs a final step, we append the span as a child to the button element so it is injected inside the button. button px` īefore adding our span element to the DOM, it’s good practice to check for any existing ripples that might be leftover from previous clicks, and remove them before executing the next one. For our buttons, it’s only necessary to include two properties. We’ll need to style a few elements of our ripple dynamically, using JavaScript. So we’ll go with the bare minimum: Find out more Styling the button Our goal is to avoid any extraneous HTML markup. We’ll start with a concise solution using ES6+ JavaScript, before looking at a few alternative approaches. How does this effect work? Material Design’s buttons don’t just sport a neat ripple animation, but the animation also changes position depending on where each button is clicked. It uses a ripple effect to give users feedback in a simple, elegant way. When I first discovered Material Design, I was particularly inspired by its button component.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |