Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

pirms 6 gadiem
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. # WOW.js [![Build Status](https://secure.travis-ci.org/matthieua/WOW.svg?branch=master)](http://travis-ci.org/matthieua/WOW)
  2. Reveal CSS animation as you scroll down a page.
  3. By default, you can use it to trigger [animate.css](https://github.com/daneden/animate.css) animations.
  4. But you can easily change the settings to your favorite animation library.
  5. Advantages:
  6. - Smaller than other JavaScript parallax plugins, like Scrollorama (they do fantastic things, but can be too heavy for simple needs)
  7. - Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup
  8. - Fast execution and lightweight code: the browser will like it ;-)
  9. - You can change the settings - [see below](#advanced-usage)
  10. Follow [@mattaussaguel](//twitter.com/mattaussaguel) for updates as WOW evolves.
  11. ### [LIVE DEMO ➫](http://mynameismatthieu.com/WOW/)
  12. ## Live examples
  13. - [MaterialUp](http://www.materialup.com)
  14. - [Fliplingo](https://www.fliplingo.com)
  15. - [Streamline Icons](http://www.streamlineicons.com)
  16. - [Microsoft Stories](http://www.microsoft.com/en-us/news/stories/garage/)
  17. ## Version
  18. 1.1.2
  19. ## Documentation
  20. It just take seconds to install and use WOW.js!
  21. [Read the documentation ➫](http://mynameismatthieu.com/WOW/docs.html)
  22. ### Dependencies
  23. - [animate.css](https://github.com/daneden/animate.css)
  24. ### Basic usage
  25. - HTML
  26. ```html
  27. <section class="wow slideInLeft"></section>
  28. <section class="wow slideInRight"></section>
  29. ```
  30. - JavaScript
  31. ```javascript
  32. new WOW().init();
  33. ```
  34. ### Advanced usage
  35. - HTML
  36. ```html
  37. <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
  38. <section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>
  39. ```
  40. - JavaScript
  41. ```javascript
  42. var wow = new WOW(
  43. {
  44. boxClass: 'wow', // animated element css class (default is wow)
  45. animateClass: 'animated', // animation css class (default is animated)
  46. offset: 0, // distance to the element when triggering the animation (default is 0)
  47. mobile: true, // trigger animations on mobile devices (default is true)
  48. live: true, // act on asynchronously loaded content (default is true)
  49. callback: function(box) {
  50. // the callback is fired every time an animation is started
  51. // the argument that is passed in is the DOM node being animated
  52. }
  53. }
  54. );
  55. wow.init();
  56. ```
  57. ### Asynchronous content support
  58. In IE 10+, Chrome 18+ and Firefox 14+, animations will be automatically
  59. triggered for any DOM nodes you add after calling `wow.init()`. If you do not
  60. like that, you can disable this by setting `live` to `false`.
  61. If you want to support older browsers (e.g. IE9+), as a fallback, you can call
  62. the `wow.sync()` method after you have added new DOM elements to animate (but
  63. `live` should still be set to `true`). Calling `wow.sync()` has no side
  64. effects.
  65. ## Contribute
  66. The library is written in CoffeeScript, please update `wow.coffee` file.
  67. We use grunt to compile and minify the library:
  68. Install needed libraries
  69. ```
  70. npm install
  71. ```
  72. Get the compilation running in the background
  73. ```
  74. grunt watch
  75. ```
  76. Enjoy!
  77. ## Bug tracker
  78. If you find a bug, please report it [here on Github](https://github.com/matthieua/WOW/issues)!
  79. ## Developer
  80. Developed by Matthieu Aussaguel, [mynameismatthieu.com](http://mynameismatthieu.com)
  81. + [@mattaussaguel](//twitter.com/mattaussaguel)
  82. + [Github Profile](//github.com/matthieua)
  83. ## Contributors
  84. Thanks to everyone who has contributed to the project so far:
  85. - Attila Oláh - [@attilaolah](//twitter.com/attilaolah) - [Github Profile](//github.com/attilaolah)
  86. - [and many others](//github.com/matthieua/WOW/graphs/contributors)
  87. Initiated and designed by [Vincent Le Moign](//www.webalys.com/), [@webalys](//twitter.com/webalys)