Mehtab
Mehtab

Reputation: 473

Shivering Animation effect in html css js jquery

Hello i want this shivering animation or effect on hover same in the url. Kindly guide me Please.Any reference would be appreciated. Demo https://expatexplorer.hsbc.com/survey/#/countries (On the map hover any country circle and see moving other small circles.

Upvotes: 0

Views: 782

Answers (2)

vanburen
vanburen

Reputation: 21663

Very simple example: There are many libraries that handle animation > jRumble / CSSshake / Animate.css

body {
  background-color: #fff;
  text-align: center;
  margin: 50px
}
.wrapper {
  top: 100px;
  left: 50%;
  text-align: center;
  display: inline-block;
}
.shake {
  display: inline-block;
  position: relative;
}
.circle {
  border: 4px solid #f00;
  background: #f00;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  margin: 0px -10px;
}
@-webkit-keyframes circled {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
  }
}
.shake:hover,
.shake:focus {
  cursor: pointer;
  -webkit-animation-name: circled;
  -webkit-animation-duration: 0.9s;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
<div class="wrapper">
  <div class="circle shake"></div>
  <div class="circle shake"></div>
  <div class="circle shake"></div>
</div>

Upvotes: 1

Professor Abronsius
Professor Abronsius

Reputation: 33823

It's done using Flash rather than css & jQuery - so unless you know Flash or can find that fla file then it will not be a straightforward task.

Upvotes: 0

Related Questions