<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=634626366586486";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<div class='info'>
<h2>Optical illusion</h2>
<p>Let's play with our color vision.</p>
  <p>Created by <a href='http://www.stramaxon.com/p/about.html'>Deepak Kamat</a> - <a href='https://twitter.com/xxxdepy'>@xxxdepy</a></p>
</div>

<div class='instruct'>
  <h3>Instruction</h3>
  <div class='text-ins'>
  <p>When you are ready press "Start" and then focus on the black circle at the middle of the photo, keep looking at it and then wait for something weird to happen. </p>
  <br>
  <p>Don't move your eyes from the black circle when the photo changes. (Don't worry we won't scare you! Turn off your speakers if you doubt :P )</p>
  
  </div>
</div>

<section class='main-area'>
<div class='button-area'>
   <div class='start-button'>Start</div>
   <input type='number' id='seconds' placeholder='Type the number of seconds you want to wait' value='10'><i style='font-size:12px;'>No. of seconds to wait before showing the BW photo (try 30 seconds to get super amazed!)</i>
  <div class='image-try'>
    <input type='checkbox' name='img' id='scndimage' value='img1'>Different image
    
  </div>
</div>


<article class='magic-whoo'>

<div class='all-photos'>
    <!-- Red -->
    <div class='pic-container red'>
        <img src='http://i1345.photobucket.com/albums/p668/depy45631/beach-photo-red_zps465d11fe.jpg'/>
    </div>
	
	<!-- B&W -->
	<div class='pic-container bw'>
        <img src='http://i1345.photobucket.com/albums/p668/depy45631/beach-photo-bw_zpsae969778.jpg'/>
    </div>
	
	<!-- Original -->
	<div class='pic-container original'>
        <img src='http://i1345.photobucket.com/albums/p668/depy45631/beach-photo-original_zps48ec30bc.jpg'/>
    </div>
	
</div>


<div class='last-text' style='display:none;'>
<p>Did you see colors? Oh, well it's just a grayscale photo! </p>
  <p>And btw, here's the <a href='http://i1345.photobucket.com/albums/p668/depy45631/beach-photo-original_zps48ec30bc.jpg'>original photo</a></p>
  
  <div class='share'>
    <h4>Now amaze your friends!</h4>
<!-- Tweet -->
    <a href="https://twitter.com/share" class="twitter-share-button" data-url='https://codepen.io/depy/full/gniHh' data-lang="en">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<!-- FB like -->
    <div class="fb-like" data-href="https://codepen.io/depy/full/gniHh" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
    
</div>
</div>

</article>




</section>

<div class='class='fake-height' style='height:140px;'></div>
body {
  color:#fbfbfb;
  background-color:#333;
  font-family:Helvetica, Arial, sans-serif;
  
  font-size:16px;
  line-height:1.6;
  
  max-width:800px;
  margin:1px auto;
  padding:1em 2em;
}

p, section, footer, header {
  margin:0;
}


.instruct {
  margin:10px ;
}

.instruct h3 {
  font-size:12px;
  margin:0;
  padding:10px;
  
  background-color:rgba(0,0,0,0.4);
  display:table-cell;
  border-radius:5px;
  cursor:pointer;
}

.instruct .text-ins {
  padding:5px 20px;
  font-size:12px;
} 


.button-area .start-button {
  background-color:#5ECC79;
  padding:5px 40px;
  display:inline-block;
  border-radius:5px;
  box-shadow:inset 0 -2px rgba(0,0,0,0.2);
  text-shadow:1px 1px 0 rgba(0,0,0,0.2);
  cursor:pointer;
  
}

.button-area .start-button:active {
  position:relative;
  top:2px;
  box-shadow:inset 0 2px rgba(0,0,0,0.6);
  background-color:#666;
  opacity:0.4;
}


.all-photos {
  padding-top:50px;
  margin:40px auto;
  display:none;

}

.all-photos .pic-container {
  max-width:720px;
  margin:0 auto;
  display:none;
}

.all-photos .pic-container img {
  max-width:100%;
  margin:0 auto;
}

#seconds {
  width:50px;
  text-align:center;
  border:1px solid rgba(255,255,255,0.2);
  background-color:rgba(0,0,0,0.3);
  color:#fff;
  font-size:16px;
  margin:10px 20px;
  border-radius:5px;
  padding:5px;
}

a {
  color:#fbfbfb;
}


$(document).ready(function(){
		   // Hide Instruction text
		   function hideIns() {
		       $('.instruct .text-ins ').fadeToggle();
		   }
  
  // Image 2 
  function imgC() {
      if ($("#scndimage").is(':checked') == true) {
        $('.pic-container.red img').attr('src', 'http://i1345.photobucket.com/albums/p668/depy45631/image-2-n_zps3b17d8fa.jpg');
        
        $('.pic-container.bw img').attr('src', 'http://i1345.photobucket.com/albums/p668/depy45631/image-2-o_zps4bafcd2b.jpg');
      }
    else {
      $('.pic-container.red img').attr('src', 'http://i1345.photobucket.com/albums/p668/depy45631/beach-photo-red_zps465d11fe.jpg');
        
        $('.pic-container.bw img').attr('src', 'http://i1345.photobucket.com/albums/p668/depy45631/beach-photo-bw_zpsae969778.jpg');
    }
  }
  
  
		   
		   $('.instruct').on('click', function() {
		       hideIns();
		   });
		   
		   $('.start-button').on('click', function() {
		      startTheGame();
		   });
		   
		   function reset() {
		        $('.all-photos').hide();
				$('.all-photos .pic-container').hide();
				$('.last-text').hide();
		   
		   }
		   function startTheGame() {
		       reset();
       imgC();
			   
			   var secs = $('#seconds').val();
		       var wait = secs; // wait n seconds
			   
			   // show the pictures 
			   $('.all-photos').fadeIn(200);
			   
			   // Smooth Scroll
			   $('html, body').animate({
                   scrollTop: $(".all-photos").offset().top
               }, 500);
			   
			   // show the red picture
			   $('.all-photos .pic-container.red').show();
			   
			   // Wait for N seconds before hiding the red pic and show the bw one
			   setTimeout(function () {
                  $('.all-photos .pic-container.red').hide();
				  $('.all-photos .pic-container.bw').show();
               }, wait*1000);
			   
			   setTimeout(function () {
                  $('.last-text').show();
               }, ( wait*1000) + 4000);
		   }
		   
		   
		   
		});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js