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.


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:


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:
Another Optical Illusion Using Contrast Color
https://monkeyraptor.johanpaul.net/2013/11/another-optical-illusion-using-contrast.html?m=0

No comments

Post a Comment

Tell me what you think...