javascript - 定义悬停动画区域并移动所有页面内容

Question

我需要一个“特殊”动画，但我不知道如何获得我寻找的这种动画，在每个三 Angular 形上都应该制作相同的动画，一个在左边，一个在右边，我需要右边开始做这个的方法。我为此使用 JQuery 吗？

动画:我希望三 Angular 形或多或少地移动到屏幕中间，以显示隐藏的内容，就像这里发生的那样:beepi.com/default.aspx 在圆圈上

我现在有这个:

#anim {
  z-index: 1;
  position: relative;
  height: 100%;
  min-height: 100%;
  background-image: url("http://i.imgur.com/EPM2arR.jpg");
  background-image: no-repeat;
  background-size: 100%;
}
#anim img {
  z-index: 2;
  position: relative;
  height: 100%;
  width: 100%;
}
.arrow-left {
  text-align: left;
  padding: 1.5% 12px;
  text-transform: uppercase;
  position: absolute;
  width: 13%;
  left: 0;
  z-index: 3;
  top: 40%;
}
.arrow-right {
  text-align: right;
  padding: 1.5% 15px;
  text-transform: uppercase;
  position: absolute;
  width: 13%;
  right: 0;
  z-index: 3;
  top: 40%;
}
.arrow-right h2 {
  font-size: 28px;
  color: #FFF;
}
.arrow-left h2 {
  font-size: 28px;
  color: #FFF;
}

<section id="anim">
  <img src="http://i.imgur.com/AeCYNqc.png">
  <div class="arrow-right">
    <h2>Scouting For Companies</h2>
  </div>

  <div class="arrow-left">
    <h2>Seeking For Ideas</h2>
  </div>
</section>

动画应该是这样的:

Answer 1

如果我理解得很好，你需要css动画。你可以使用这样的东西:

/* For right side */
.arrow-right{
  animation: aniright 3s ease;
  animation-fill-mode: forwards;
}

@keyframes aniright {
    from { right: 0; }
    to { right:  13%; }
}

/* For left side */
.arrow-left{
    animation: anileft 3s ease;
    animation-fill-mode: forwards;
}

@keyframes anileft {
    from { left: 0; }
    to { left: 13% }
}

我相信您需要将 .arrow-left 和 .arrow-right 类中的图像中的箭头剪切并放在一起，将您想要滑入的所有其他元素.. 并放置一些 Action 来调用动画。例如:

.arrow-left:hover{
    animation: anileft 3s ease;
    animation-fill-mode: forwards;
}

... 当您的光标越过 .arrow-left 元素时将开始动画。