页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

html5+css3实现动画效果插件ifsmanimation

html5 HTML我帮您 1年前  次浏览

ifsmanimation只有一JavaScript代码创建简单的动画

html5+css3实现动画效果插件ifsmanimation

可设置动画效果包括以下属性:

  • dummy - non animation
  • animate - animate article from current position or startposition to destination
    • duration
    • destination-left
    • destination-top
    • startposition-left - optional
    • startposition-top - optional
  • animateNoWait - same as animate but does not wait the end of animation to start the next animation
  • display - display article (opacity set to 1) with animation from current position or startposition to destination
    • duration
    • destination-left
    • destination-top
    • startposition-left - optional
    • startposition-top - optional
  • smoothHide - display article (opacity set to 0) with animation from current position or startposition to destination
    • duration
    • destination-left
    • destination-top
    • startposition-left - optional
    • startposition-top - optional
  • rotate - rotate article
    • duration
    • angle
  • loop - loop animation
    • duration
    • destination-left
    • destination-top
    • startposition-left - optional
    • startposition-top - optional
    • loops number - optional default:infinite - give the number of loops
    • loop back delay - optional default: duration - give the delay to go to the initial position
  • specialAnimate
    • duration
    • animation description object as in jQuery. ex: {left: 20;top:100;width:300}

<section id="animation-objects" data-delay-before-restart="3000">
        <article id="HappyNewYear_B" data-animation="animate,300,168,220" data-enter-animation="display, 200, 90, 104, 90, 104" data-exit-animation="smoothHide,100,90,104">
            <img src="images/B.png">
        </article>
        <article id="HappyNewYear_O" data-animation="specialAnimate,300,{left:500;top:130;width:250}" data-enter-animation="display,200,170,104,170,104" data-exit-animation="smoothHide,100,170,104">
            <img src="images/O.png">
        </article>
                <article id="HappyNewYear_star" data-animation="rotate,20000,3060" data-enter-animation="display,10,277,417,277,417" data-exit-animation="smoothHide,100,433,-220">
            <img src="images/etoile.png">
        </article>
        <article id="HappyNewYear_N3" data-animation="dummy" data-enter-animation="display,200,252,104,252,104" data-exit-animation="smoothHide,100,252,104">
            <img src="images/N.png">
        </article>        
</section>
<script>
$(document).ready(function() {
    //wait for the download of the images if any...
    $('#animation-objects').waitForImages().done(function() {
        //initialize and start the general animation
        $('#animation-objects').iFSM(mainAnimation);
    });
)};
</script>


相关链接

发表评论