Scrollanim

滚动动画库
授权协议 GPL
开发语言 JavaScript HTML/CSS
所属分类 Web应用开发、 HTML5开发相关
软件类型 开源软件
地区 不详
投 递 者 赵雅懿
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

简介

Scrollanim 是使用 CSS3 + JavaScript 实现的用于创建滚动动画的库,应用到元素上后,当此元素出现在浏览器可视区域时便会执行对应的动画。Scrollanim 是 Kissui 的一部分,所以使用 Scrollanim 时需要用到 kissui.css。

使用

<link rel=" sheet" href="css/kissui.css">
<link rel=" sheet" href="css/scrollanim.min.css">
<script src="js/scrollanim.min.js"></script>
<div data-kui-anim="fadeIn">hello world!</div>

或者使用 JavaScript:

kissuiScrollAnim.add(document.getElementById('obj'), {
    'in': 'bounceIn'
});

查看演示

 相关资料
  • 我目前正在使用JavaFX ScrollBar控件,它本身运行良好-但是我对拖动拇指时的“动画”不满意。 更具体地说: 当我快速拖动拇指时,快速加速-拇指动画不会立即跟随,但有点“滞后”-当我停止拖动拇指时的相同行为。。。拇指真正开始/追上预定位置需要一秒钟的时间 这不是繁重的布局计算之类的问题,因为我只是单独渲染ScrollBar而没有任何内容。 是否有一些选项可以让这个“加速动画”/“滞后”消

  • 问题内容: 我一直在寻找一种仅使用CSS3单击位于页面顶部的按钮时向下滚动的方法。 但这对于我的需求而言有点太先进了,因为我只希望浏览器单击页面顶部的一个按钮即可向下滚动,所以我想知道:是否可以在没有输入按钮的情况下进行那些CSS滚动,有锚标签? HTML看起来像这样: 我已经有一些CSS,需要在单击按钮时触发: 问题答案: 您可以使用css3 伪选择器使用锚标记来完成此操作,当与当前URL哈希具

  • 动画outputRoll InRoll Out

  • 在React中处理滚动位置的正确方法是什么?我真的很喜欢平滑滚动,因为更好的用户体验。因为在React中操作DOM是一个反模式,所以我遇到了一个问题:如何平滑地滚动到某个位置/元素?我通常会更改元素的scrollTop值,但这是对DOM的操作,这是不允许的。 杰斯宾 代码: 如何以反应的方式实现这一点?

  • 我想写个动画。比如说鼠标向上滚动,一个div往上运动。当我鼠标向下的时候,div往下运动。 有没有这种动画库?我以前的做法是判断滚动方向。然后分别执行不同的动画函数。当然了我的一个动画里面,肯定是包含好几个运动元素的。

  • 问题内容: 我的意思是滚动时会轻松。 问题答案: var $pages = $(“.page”), PS: 使用,如果你的s为像一个滚动的DIV内(而不是) 注意: 对于 移动设备, 您可能希望针对浏览器的标签栏高度调整值(最好还是完全避免这种情况)。你有主意