HTML正文动画

时间:2017-11-18 23:43:26

标签: javascript html css3

我只是在用户滚动时才从身体的左右边缘(基本上是浏览器的左右两端)寻找一个轻微的渐变动画。动画仅在滚动时才有效。

任何帮助将不胜感激。谢谢。

1 个答案:

答案 0 :(得分:1)

这里是代码可能有帮助。 说明:使用window.onscroll js事件来检测滚动,然后将类添加到body并使用当前500ms的setTimeout删除它(需要微调)。其余的是通过CSS完成的。

body {
  margin: 0;
  min-height: 2000px;
}

body::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, black, transparent 25%, transparent 75% , black);
  opacity: 0;
  transition: opacity .3s;
}

body.scrolling::before {
  opacity: 1;
}
np.sum(e, axis=0)