8 Stunning CSS & JavaScript Code Snippets for Enhancing Illustration
Illustrations can bring a highly-artistic style to any website. Whether hand-drawn or created digitally, these images can help us tell a story and convey ideas. By itself, a great illustration can be pretty powerful stuff. But, with a little magic, we can give them an even greater impact.
Through the use of CSS and JavaScript, illustrations can be both animated and interactive. They can go from static pieces of a story to central elements.
Below is a collection of snippets that take illustration to the next level. Each one is editable, so feel free to play around and see how they might enhance your next project.
Quadtree Reveal
Quadtrees are an interesting concept (don’t worry, I had to look them up). Essentially, they’re a tree data structure where each node has four children. Gabriel Cyrillo took this principle and turned his self-portrait into an animated masterpiece. The effect is beautiful and the color palette is editable via JS.
Interactive Light
Not all illustration has to depict a particular subject. They can also consist of pure randomness. Here is a fascinating interactive drawing feature that, as the user drags the canvas, produces a pulsing combination of squiggly lines and animated light effects.
Not Your Standard Layout
This example takes what would ordinarily be a simple and attractive graphic and turns it into an attention-grabbing multipart animation. The elements of this website wireframe are “drawn” on the screen and contain both clickable links and hover effects. This empowers the user to become part of the story.
Worms!
Here we have an interactive illustration that is reminiscent of a children’s board game. Hovering over the various dots along the path reveal worm-like creatures that pop up and show their faces. Quite fun and whimsical.
Moving Parts
This one is quite amazing on several levels. It’s a multi-layered parallax scrolling effect that turns an ordinary page header into more of an interactive storybook. The effects are compelling, but the grungy, uneven bottom border really makes this look like a singular piece of art.
A Change in Perspective
Designer Mohan Khadka used an illustration to create an interactive layout where users can connect with him on various social media platforms. But the real treat here is the “My Screen” toggle in the upper left that shifts the perspective to see what’s on his imagined laptop’s screen. It’s this extra step that makes it stand out.
The Illustrated City
This fun drawing of a city skyline offers up some practical examples of interactivity. Hovering on a building (or the Ferris wheel) results in that object being colored in. These elements can also be made clickable, which could be very useful for a drawing of a convention center or concert venue. The concepts used here can create a user-friendly UI in a number of different situations.
Structural Diagram
While there’s no interactivity to this diagram of the “Yin and Yang” symbol, it does bring up an important point about illustration. We often use these types of images to share relevant information, but we don’t always use the best image formats. But, since designer Ana Tudor used SVG in this example, the whole thing scales beautifully. This enables users to take a closer look to view the details. And it uses standard HTML text, which makes it more accessible.
More Than an Image
As we’ve seen, these illustrations can play a much larger role than a standard static image. They can help users navigate your site, understand a concept or add an element of fun to the mix. Using a bit of code like the examples above can help you achieve some amazing results.
The post 8 Stunning CSS & JavaScript Code Snippets for Enhancing Illustration appeared first on Speckyboy Web Design Magazine.