Once in a while, I’m shown a design work that is so mind blowing, it reminds me exactly why I LOVE what I do so much. The website for a Toronto-based digital creative agency, Playground — with its clean minimalistic, geometric style, and little flourishes of personality — did exactly that to me earlier this week. Not only is the design beautiful, but the interactive elements on the home page and in the case studies section (they include their CODE trials on these pages — that makes so much sense, why haven’t I seen that before?!) pushed it from “nice” to “really impressive” to “OH MY GOD THATS SO FUCKING COOL!” <— I really said that.
I REALLY appreciate the attention to detail, such as on the home page’s .svg animations. Slight wiggles on some elements were wonderful :) and they even consider hair movements in relation to physical character movement.
My FAVORITE part of the experience, however, is the color change on reload of the web page. Playground’s website color scheme is greyscale with one accent chosen from 5 possible brand colors (blue, cyan, red, green, or orange). This color becomes the link color, is used in hover animations, and even changes the colors incorporated in the animated illustrations that I just mentioned.
The effect (a randomly chosen color from a given list of options) is surprisingly easy to do! I’ve created a very simple demo to showcase how to alter your page’s DOM elements and .svg elements with a color chosen at random, from a given list of limited options. And, because I like options, I show you how to do it in both plain javascript, and with jQuery.
Explanation:
Basically: you create an array of colors (you can use any kind of color method — rgba, hex codes, whatever) and then generate a random number with a math function and use that number to correspond to an item in the array. That item in the array of colors is your actual selected color, which you can set to a variable (I called it chosenColor). Once you have the chosenColor variable, you can use it to edit the style properties of any element (or you can add an attribute using it, such as a fill attribute for .svg images). Make sure to call the functions AFTER the page loads so you can find the elements you’ll be referencing.
The jQuery example shows how to target the h1 tags, and make those change color on reload. In the plain Javascript example, it gets a little fancier, as I call the ColorPicker function multiple times (one for each path of my .svg, to target all of the sections) and again choose a color from the given list, repainting each distinct path of my .svg with any of those colors. If that made no sense, just go view the demo and enjoy refreshing it a few times.
Reload the page (or click on the u.krave logo fish) and see what color combinations you get!
TL;DR : Playground's website rocks & a demo on how to make yours rock too
P.S. Playground, I LOVE your style and work and website, ANDDD I’m graduating University next year :D (just saying… PLEASEHIREME… )