Monkey Raptor

Saturday, November 9, 2013

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.

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.

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:

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

Another Optical Illusion Using Contrast Color

No comments

Post a Comment

Tell me what you think...