Another Optical Illusion Using Contrast Color

This is probably not new, a sleek navigation bar design widely used nowadays.
I saw it first on USA Today, then I saw that on Google on their Help/Support Documentation Pages, and some other pages, then some other big websites. I don't know which one applied that first. It was pretty much distracting for myself (in a good way). So, I tried to mimic that.

It looks like the top navigation or the lines (with different color) aren't aligned. But actually they're perfectly aligned. It's that optical illusion thingy.

---

DEMO #1

This doodle below inspired by USA Today navigation bar. Click the switch button to toggle the top color to a solid light color.

• button
• button
• button
• button
• button
• button

I put different delay on the transition using JavaScript's setTimeout() function and combined it with jQuery each() and toggleClass() method.

---

DEMO #2

This doodle below is just some lines, you probably saw that on Google, or few mobile apps, and such. Click the button to switch the color (element and/or background).

---

Pretty cool trick there.

---

This is the script snippet for toggling class with delay.
I "found" the discussion about that on Stack Overflow.
It's using each() and the setTimeOut function: $('trigger-button').click(function () { $('list-element').each(function (i) { //store each list element //this is important var $x = $('list-element').eq(i); //delay 600ms before toggling each child element window.setTimeout(function () { $x.toggleClass('different-class'); }, (i)*600); }); });

---

This is the doodle of 1st optical illusion of Weird Magazine logo, I mean Wired Magazine logo.
Thanks for stopping by. See ya soon.

---

References:

• StackOverFlow "Adding CSS animation with delay to each list item" Q&A
• setTimeOut() documentation at Mozilla Developers Network
• each() method at jQuery API documentation