![codedrop square picture css codedrop square picture css](https://cdn.telquel.ma/content/uploads/2015/01/Product-squareshelds.jpg)
Var dots = ,] /* we always include the corners */ In this case, we only need one variable that defines the number of points. We first define a set of points (we will use random() here) then run Delauntor to generate the triangles for us. There are lots of ready-to-use implementations of it, but we’ll go with Delaunator because it’s supposed to be the fastest of the bunch. I won’t go into the deep theory behind it, but it’s an algorithm for a set of points to draw connected triangles with specific properties. 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.
Codedrop square picture css update#
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
Codedrop square picture css code#
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.
![codedrop square picture css codedrop square picture css](https://i.ytimg.com/vi/EZPip5D2-YU/maxresdefault.jpg)
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.