{"id":3782,"date":"2024-09-11T14:18:31","date_gmt":"2024-09-11T19:18:31","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3782"},"modified":"2024-09-13T10:47:35","modified_gmt":"2024-09-13T15:47:35","slug":"split-effects-with-no-content-duplication","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/split-effects-with-no-content-duplication\/","title":{"rendered":"Split Effects with no Content Duplication"},"content":{"rendered":"\n

A recent post<\/a> here lead me to another called The Magic of Clip Path<\/a> by Emil Kowalski, which focuses on the inset()<\/code> basic shape in particular. While I agree that clip-path<\/code> is a very useful property and the inset()<\/code> basic shape is underrated and underused on the web, most of the use case examples in the article are far from ideal as they rely on content duplication, which can come at a maintenance, performance, and accessibility cost, not to mention that some of them break in some scenarios.<\/p>\n\n\n\n

In this article, I’ll be showing how to get the same effects with no content duplication.<\/p>\n\n\n\n

Comparison Sliders<\/h2>\n\n\n\n

Emil creates this with two different images (the before and the after) stacked one on top of the other, the top one being clipped, plus a button<\/code> for the draggable line control.<\/p>\n\n\n\n

Using a button<\/code> for the draggable line somehow doesn’t feel right to me, but I’m no expert when it comes to accessibility, so we’ll be focusing on how to do this with a single image, though this is the one example where I can see some advantages to using two images instead of one.<\/p>\n\n\n\n

This kind of comparison slider is something I once explained in detail in another article<\/a> some years back. The basic idea used there is the following: the original image (the “before”) is a background<\/code> layer of a slider whose thumb is the draggable split line. The original image background<\/code> layer is blended with another which only covers the progress area between the lateral edge of the track and the current thumb position. The result of the blending operation is the “after”.<\/p>\n\n\n\n

In my old article, the result of the blending operation was the negative of the image:<\/p>\n\n\n\n