vanilla-tilt.js, 平滑 3D 倾斜javascript库

分享于 

3分钟阅读

GitHub

  繁體 雙語
Tilt.js library without jQuery dependency.
  • 源代码名称:vanilla-tilt.js
  • 源代码网址:http://www.github.com/micku7zu/vanilla-tilt.js
  • vanilla-tilt.js源代码文档
  • vanilla-tilt.js源代码下载
  • Git URL:
    git://www.github.com/micku7zu/vanilla-tilt.js.git
    Git Clone代码到本地:
    git clone http://www.github.com/micku7zu/vanilla-tilt.js
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/micku7zu/vanilla-tilt.js
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    vanilla-tilt.js

    npm versionghit.me

    一个平滑 3D 倾斜javascript库从 Tilt.js ( jQuery版本) 派生。

    视图目标页( 演示)

    用法

    <body>
    <divclass="your-element"data-tilt></div><!-- at the end of the body --><scripttype="text/javascript"src="vanilla-tilt.js"></script>
    </body>

    命令行选项

    {
     reverse:false, // reverse the tilt direction max:35, // max tilt rotation (degrees) perspective:1000, // Transform perspective, the lower the more extreme the tilt gets. scale:1, // 2 = 200%, 1.5 = 150%, etc.. speed:300, // Speed of the enter/exit transition transition:true, // Set a transition on enter/exit. axis:null, // What axis should be disabled. Can be X or Y. reset:true// If the tilt effect has to be reset on exit. easing:"cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit. glare:false// if it should have a"glare" effect"max-glare":1, // the maximum"glare" opacity (1 = 100%, 0.5 = 50%)"glare-prerender":false// false = VanillaTilt creates the glare elements for you, otherwise// you need to add. js-tilt-glare>.js-tilt-glare-inner by yourself}

    事件

    constelement=document.querySelector(".js-tilt");VanillaTilt.init(element);element.addEventListener("tiltChange", callback);

    方法

    constelement=document.querySelector(".js-tilt");VanillaTilt.init(element);// Destroy instanceelement.vanillaTilt.destroy();// Get values of instanceelement.vanillaTilt.getValues();// Reset instanceelement.vanillaTilt.reset();

    安装

    你可以复制并包含以下任何 file:

    NPM

    也可以在 npm https://www.npmjs.com/package/vanilla-tilt 上使用。

    
    npm install vanilla-tilt
    
    
    
    
    Typings

    使用npm安装 typings

    
    npm install @types/vanilla-tilt
    
    
    
    

    Credits

    原始库:Tilt.js

    原始库作者:Gijs Rogé

    许可证

    MIT许可证


    相关文章