User Interface Component: Dual Layer Slider


View the prototype on GitHub Pages. View the code on GitHub.

What is a Dual Layer Slider Anyways

I first spotted this UI design in practice on the Google reCAPTCHA website. Given the nature of UI / UX design and how rapidly websites will refresh I’ve captured the design and uploaded it to YouTube.

Why I like this particular design:

  1. When viewing this component I found myself primarily focused on the content. The content, any call to actions, and all the UI controls are presented to me in a nice tight box. I don’t wonder about the page looking for anything. My focus is where it belongs.
  2. Simultaneously - we have the opportunity to present media in the background to grab our user’s attention, drive some sort of emotion, even aid the user’s understanding.
  3. Moving the background image and the text at the same time had some visual appeal to me and just looked like this would be a fun exercise!

Changes I Made

Just a quick note about my typography styling:

Changes You Might Make

Here are some final thoughts from me about the Dual Layer Slider:

About the Author

Hi I’m Mark Drake!

I believe front-end is fun and I’m here to convince you of it too! Front-end is a dynamic field and thus very rewarding. The skills you learn are in high-demand, and mastery provides a solid foundation for you to transition to more rewarding roles.

I’m currently a Senior Front-End Engineer for The Scylla Group. You can find me on in a couple of other places: My Blog, Twitter, and LinkedIn.