Interactive Projects Allow People To Practice Design Skills

On codepen.io, users showcase their skills in writing and structuring HTML, CSS, and JavaScript code by posting interactive projects that often look like they must have been created in dedicated video and animation software. While many of these projects would have been created by designers using similarly creative programs that convert visuals into web syntax, the end result is that users' web browsers can directly render sophisticated images without requiring the audience to download heavy files that would slow down loading speed. However, the advantage that CSS-driven animations have over traditional animations in terms of load time does not necessarily help a situation where the visuals themselves make the functionality harder to reach.
The pictured project is ultimately a set of basic JavaScript sliders that have elaborate CSS-based visual effects overlaid upon them. These effects resemble three-dimensional rectangular cuboids in which the point that separates the texture of the left portion of a given shape from that of the right portion is the substitute for a traditional slider handle. While certain textures do indeed rely on externally loaded images, CSS and JavaScript syntax are responsible for both arranging them in shapes that give the illusion of being pasted onto three-dimensional cuboids and providing the handle-sliding functionality. Other subtle touches enhance the aesthetic presentation; rolling the mouse cursor over a cuboid slightly expands its scale, and any sliding motion is accompanied by a gradient that moves behind the shape in tandem.
Several aspects of these effects make the shapes do more to render the basic slider functionality harder to perform than to enhance the appeal of using them. Because the shapes are much taller than the basic sliders underneath, the dividing edge will only change its position if the user knows to click anywhere along the bottom half of a given shape. When the dividing edge is dragged further toward one of the two ends of the shape, the three-dimensional depiction of that edge will appear to be further ahead of the slider handle's effective position. Therefore, viewers will often click on these shapes and fail to make the sliders move. For more information click here https://codepen.io/zephyo/pen/MZbLwV.