a polymer web-component for displaying gifs thru gfycat's conversion service
Install the component using Bower:
$ bower install gfy-cat --saveOr download as ZIP.
<head>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/gfy-cat/dist/gfy-cat.html">
</head>
<body>
<gfy-cat></gfy-cat>
</body>Use, grunt-vulcanize to reduce network requests
| Attribute | Options | Default | Description |
|---|---|---|---|
src |
string | '' |
.gif source url |
gfyName |
string | '' |
gfyName returned by gfycat.com example:CostlyAfraidEmu |
width |
% or px | 100% |
size you want the element |
color |
hex rbg or rgba | #eee |
the color of the contols and the text |
fill |
true or false | false |
true means a solid filled in polygon, false will be a path |
strokeWidth |
integer | 3 |
controls the line width if you have fill attribute set to true |
ntimes |
integer | 3 |
if not specified, animation will loop 3 times then pause, user can playback at will |
loop |
true or false | false |
video will loop infinitely until paused or pingpong is activated in which case ntimes is set to 100 |
Please see bottom of the demo on notes about iOS safari fallbacks
In order to run it locally you'll need to fetch some dependencies and a basic server setup.
-
$ [sudo] npm install -g bower grunt-cli
-
Install local dependencies:
$ bower install && npm install -
To test your project, start the development server and open
http://localhost:4000.$ grunt serve
-
To build the distribution files before releasing a new version.
$ grunt build
-
To provide a live demo, send everything to
gh-pagesbranch.$ grunt deploy
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
For detailed changelog, check Releases.