Let’s try to build that triangular fragmentation effect.Īfter searching the web, I found something called Delaunay triangulation. M_w = (18000 * (m_w & 65535) + (m_w > 16)) & mask Ĭan the above be extended to consider more than rectangular shape? Sure it can! Let’s not forget that we can use Canvas to draw any kind of shape - unlike pure CSS shapes where we sometimes need some hacky code. Unfortunately, we cannot do this with the JavaScript’s built-in random() function, so like any good developer, let’s pick one up from Stack Overflow: const mask = 0xffffffff Ĭonst seed = 30 /* update this to change the generated sequence */ In other words, we want to control the seed. Let’s consider a pseudo-random function, a function that always generates the same sequence of values. To fix this we need to find a way to store the generated value so they are always the same for each call of the paint() function. But the paint() function is called a bunch during the transition, so each time, the random() function give us different X and Y values for each alpha channel hence the “random” effect we are getting. We said that each alpha channel need to animate between X and Y, so logically those value need to remain the same. The issue is related the random() function. We have a cool fragmentation effect but not the one we saw in the beginning of the article. When O=0, we have (Math.random()*(l-1) + 1 - l) and a value with the range. Considering the fact that the random() function gives us a value within the range, the final value will be in the range. L is the variable illustrated previously, and O is the value of our CSS variable that transitions from 1 to 0 In our code we will update this: rgba(0,0,0,'+(o)+') We apply this to all the alpha channels to get our delayed animations. Rectangle 2 will reach before Rectangle 1 will. In other words, any value bigger than 1 will have the same effect as 1, and any value smaller than 0 will have the same effect as 0.Īnimation within will not happen at the same time for both our rectangles. Above, the alpha is animating from 8 to -2, meaning we have an opaque color in the range, a transparent one in the range and an animation within. Yes, it should! And all the tricks that we’re working on rely on that. Wait, the alpha value shouldn’t be in the range, right ? X should be bigger or equal to 1 and Y smaller or equal to 0. for each alpha channel) we perform a transition between X and Y where X - Y = L so we have the same overall duration for all the alpha channel. First we define a variable L that should be bigger or equal to 1 then for each rectangle of our matrix (i.e. The above is showing the alpha animation for two rectangles. Here is an illustration to explain the idea I am going to use: We need a trick to prevent fading of all the rectangles at the same time, instead creating a delay between them. Nothing fancy will happen on hover because all the rectangles will fade the same way. We defined a CSS custom property as a that we transition from 1 to 0, and that same property is used to define the alpha channel of our rectangles. Let’s start with a very basic demo of background coloration: Specifically this allows developers to write a paint function which allows us to draw directly into an elements background, border, or content. The CSS Paint API is being developed to improve the extensibility of CSS. We no longer need to wait for the release of new features because we can do it ourselves!Īn API for allowing web developers to define a custom CSS with javascript, which will respond to style and size changes. The Paint API (and the other APIs that fall under the Houdini umbrella) allow us to extend CSS with our own functionalities. If I have to sum it up in a few words, I would simply say : it’s the future of CSS. A lot of articles already cover the theoretical aspect of it, so I won’t bother you with more. Yes, “Houdini” the strange term that everyone is talking about. The Paint API is part of the Houdini project. See that? No more than five CSS declarations and yet we get a pretty cool hover animation. So, the following is the complete snippet for the parent hexagon shape. You can generate hexagon vertices and edges values using this tool. The second important thing is the clip-path property, don’t worry if you don’t know enough about it. You can get the height value by multiplying the width value by 0.866. You can set the width according to your needs but the height values rely on the width value. In order to draw a perfect hexagon shape, you need to use width and height properties cleverly. Here the important thing is the width and height property that defines the size of the hexagon shape.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |