Highlight element using jQuery with scaled transparent element

I'm trying to create the following effect for any element using only jQuery/plugins:

In particular it should use a transform for the scale rather than width and height animation and be usable on any DOM element.

Is there a plugin available for jQuery which will achieve this effect? It should be quite simple: duplicate the dom object with clone(), reposition the clone over the original absolutely then animate a scale transform and opacity on the new element. However, I suspect it's not as simple as this.

Any ideas?

Answers


You don't need jQuery to accomplish that animation. You can use CSS3 animations and transform properties. Check out the following example I created:

http://jsbin.com/purik/1/

HTML:

<div class="logos">
    <div class="logo"></div>
    <div class="logo animated"></div>
</div>

CSS:

.logos {
  position: relative;
}
.logo {
  width: 100px;
  height: 70px;
  background: #CC0000 url(http://www.w3schools.com/images/w3logo.png) 50% 50% no-repeat;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.logo.animated {
  position: absolute;
  left: 0;
  top: 0;
  animation: scale-fadeout 2s infinite;
  -webkit-animation: scale-fadeout 2s infinite;
}

@keyframes scale-fadeout {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  5% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}
@-webkit-keyframes scale-fadeout {
  0% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  5% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.35);
  }
}

This works if the parent element is position: relative, and the element itself is position: absolute.

Clones the element and then animates it to change the size, change the values of left and top, and the set opacity: 0.

Fiddle: http://jsfiddle.net/Ej38P/1/


Need Your Help

Spring actuator viewer

spring spring-mvc monitoring metrics

Are there any applications that wrap spring actuator metrics in some nice appealing form, instead of JSON? I would like to have nice view of all existing beans, to learn how spring actualy works.

Is it "right" to use rigidbody forces to animate in Unity3D?

animation unity3d game-physics

I wan't to implement a frictionless spring in unity3D to animate a gameobject as if it where floating by moving up and down. I am doing it with an animation but if I use forces they can combine an ...