Using the html and body tag selector we will be adding height to “100%” to our webpage. Margin-bottom:-7px /*Fix for safari gap*/Īnimation: move-forever 25s cubic-bezier(.55.5.45.5) infinite Įnter fullscreen mode Exit fullscreen mode when the animation has ended, we remove the.ani class on the button (this will start the CSS animation) we then set the -x and -y variables to the coordinates of the point that was clicked relative to the button’s top left corner.if it is a button, we call getBoundingClientRect() so we have an object storing its position relative to the viewport.if something is clicked on the page, we check whether that something is a button (I prefer this method to getting all the buttons on the page beforehand because it doesn’t break when later adding new buttons via JS).ani class (which it initially doesn’t), then we animate these custom properties from. we register the -a and -r custom properties so that we can animate them when necessary.the ripple is a radial gradient at a point of coordinates x, y (set as custom properties) which fills with semitransparent white of variable alpha (set as a custom property -a) up to a variable radius (set as a custom property -r).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. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |