Question

我一直在为我的网站制作滚动效果一直让我发疯，而且它可能甚至不值得，但我现在不能停下来。

我已经能够使用adobe edge和muse来模拟效果。谁能想到一个更简单的方法来创造这种效果？动画可以是seen here。滚动时，标题形状会更改并调整大小。我试过用svg animate，div旋转动画等做这个没有运气。

任何帮助将不胜感激。

Answer 1

通常情况下，我们不提供问题的完整解决方案，但我有一些空闲时间，这是一个非常有趣的项目。如果我的回答对你有用，我希望你会接受它。

我确信有更有效的方法可以做到这一点（例如操纵SVG），但我尽可能简洁地保持这种方式。这是使用CSS和Javascript / jQuery。我会让javascript部分的评论做解释。

<强> HTML

if params[:q].present? and params[:q][:advert_title_eq].present?
    params[:q][:title_cont_any] = params[:q][:advert_title_eq].split(' ')
 end

<强> CSS

<div id="animation">
  <div id="box"></div>
  <div id="ang"></div>
</div>

<强>的Javascript

#animation {
  width: 500px;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -250px;
}

#box {
  width: 500px;
  height: 125px;
  background: #333;
}

#ang {
  width: 0;
  height: 0;
  border-top: 175px solid #333;
  border-right: 500px solid transparent;
}

See my JS Bin for a demo.

使用jQuery和CSS重新创建动画

1 个答案: