Aditya Singh Aditya Singh - 12 days ago 8
Javascript Question

How to create the following effect in jquery or javascript

I want to create an effect in

jquery
/
javascript
so that the play button in the image grows to some size then shrinks back suddenly with a bouncy/pulsating effect.

img1

Answer

This can be done easily with CSS3 animations.


HTML:

 <div class="container">
   <div class="myButton">
     <a class="myButton">
       <img src="http://i.stack.imgur.com/FcuEp.png" alt="" />
      </a>
    </div>
 </div>

CSS for growing and shrinkin object:

.container {
   width: 100%;
   padding: 100px;
   text-align: center;
 }

@-webkit-keyframes zoomout {
from { -webkit-transform: none; }
50% { -webkit-transform: scale(1.5); }
to { -webkit-transform: none; }
}

@keyframes zoomout {
from { transform: none; }
50% { transform: scale(1.5); }
to { transform: none; }
}

.myButton:hover {
-webkit-animation: zoomout 1s;
animation: zoomout 1s;
}

jsFiddle


CSS for bounce effect before shrinking to original size:

.container {
width: 100%;
padding: 100px;
text-align: center;
}

@-webkit-keyframes zoomout {
  50% {
    -webkit-transform: scale3d(1, 1, 1);
  }
  65% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
  }
  75% {
    -webkit-transform: scale3d(1.35, 1.35, 1.35);
  }
  80% {
    -webkit-transform: scale3d(1.35, 1.35, 1.35);
  }
  95% {
    -webkit-transform: scale3d(.8, .8, .8);
  }
}

@keyframes zoomout {
  50% {
    transform: scale3d(1, 1, 1);
  }
  65% {
    transform: scale3d(1.2, 1.2, 1.2);
  }
  75% {
    transform: scale3d(1.35, 1.35, 1.35);
  }
  80% {
    transform: scale3d(1.35, 1.35, 1.35);
  }
  95% {
    transform: scale3d(.8, .8, .8);
  }
}

.myButton:hover {
-webkit-animation: zoomout 1.5s;
animation: zoomout 1.5s;
}

jsFiddle for bounce CSS


You can tweak the scale and animation to your taste. :)