Background Gradient Slider Toy
Play with the Background Gradient Slider Toy here (mobile browsers only)
For my first project in Hand Held: Creative Tools for Phones class, I was tasked to create a “slider toy” for the mobile browser, with a focus on the background-image CSS property.
I started my creative process during an afternoon walk, looking around my surroundings for dynamic backgrounds. The most obvious (and also best, I decided) idea was the changing gradients in the sky. I did a bit more research on gradient background colors in general and came across an interesting post on Medium that gave me inspiration:
Source: The Secret of Great Gradient by Anna Grenn
I decided that it would be fun to allow the user to choose a foreground shadow and change the background gradient with a slider, kind of like a gradient art remixer. The goal is to allow user to create their own art and keep a screenshot. I chose three different environments for the user to select from, including a palm sunset, starry night sky, and under the sea.
My ideation notes for the Background Gradient Slider Toy
I sketched out a layout for my slider toy on paper to visualize the different elements I needed to code. For optimal usability, I placed the slider and buttons at the bottom of the screen and filled the rest of the fold with the gradient canvas.
My rough layout sketch
The hardest part of this assignment was to map RGB values of the gradient background to the slider value while making sure that the gradient looks good! I picked out a few colors I liked and compared their RGB values to give myself an idea of what kind of equation to put into JS to change and update the background-image property.
My messy notes while trying to find the perfect gradient formula!
Lastly, I added animation to the background to make the artwork more dynamic (like real-life environments!).
The final outcome was a product of many trial-and-errors. This project is the first time I’ve created a live webpage with HTML, CSS, and JS all together. It was a great learning experience!
For iteration, I would like to
Animate the foreground images to make the whole thing more lively and less static.
Make this toy responsive for all screen sizes, as it is currently made for mobile dimensions specifically.
I’m looking forward to creating more complex web-based projects in the future.
Source code: