Google Doodles style animation using Jquery

The Google Doodle is an artistic version of the Google logo. Google Doodles represent events like holidays, anniversaries, or current events. Some of the doodles were limited to Google's country specific home pages while others appeared globally. Doodles are the fun, surprising, and sometimes spontaneous changes that are made to the Google logo to celebrate holidays, anniversaries, and the lives of famous artists, pioneers, and scientists. and here we are going to see simple way to code like google doodle style animation using javascript. lets see the coding.

Google doodle style animation onclick using jquery

DOWNLOAD LIVE DEMO

Normally first image will be .png and animated image will come on the click in google doodles.. like that we are going to see here. For that we need two images.

1. normal .png format or .jpg image

2. animated .gif image

In 1998, before the company was even incorporated, the concept of the doodle was born when Google founders Larry and Sergey played with the corporate logo to indicate their attendance at the Burning Man festival in the Nevada desert.

HTML CODE

<div class="container">
  <a href="#" id="doodle" title="Click to play">
      <img class="first-img"  src="new-year-std.png">
   </a>
  <a href="http://2my4edge.com" title="New year 2015">
      <img class="second-img" id="newyear"  src="new-year-animated.gif">
   </a>
</div>

first image is .png or .jpg image to standard view with play button, and the second image is animated .gif image. to animate the image after the click.

JAVA SCRIPT

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
 $(document).on('click','#doodle',function(){
     $('.first-img').hide();     
     $('#newyear').removeClass('second-img');
     return false;          
    });       
</script>

here we need jquery library file to make this operation.

CSS

* { padding:0; margin:0;}
.container { width:600px; margin:0 auto; text-align:center; }
img { width:450px; margin:0 auto; text-align:center; }
.second-img { display: none; }

here we are making display:none; of second image. before click the first image. i hope this one is really simple and helpful to you like google like doodle style animation on click. Thank you.

Pages

26 February 2015

Google Doodles style animation using Jquery

No comments:

Post a Comment