{"id":20484059,"url":"https://github.com/nuxy/baraja-js","last_synced_at":"2025-04-13T14:35:38.583Z","repository":{"id":41247956,"uuid":"186190795","full_name":"nuxy/baraja-js","owner":"nuxy","description":":flower_playing_cards: A JavaScript plugin for spreading items in a card-like fashion.","archived":false,"fork":false,"pushed_at":"2024-03-25T20:17:04.000Z","size":5486,"stargazers_count":8,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-26T03:04:05.341Z","etag":null,"topics":["animations","cards-games","carousel","javascript","modules","plugins","shuffling"],"latest_commit_sha":null,"homepage":"http://baraja-js.nuxy.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nuxy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-11T23:25:44.000Z","updated_at":"2024-06-19T17:11:19.582Z","dependencies_parsed_at":"2024-02-04T01:29:12.030Z","dependency_job_id":"6c110a61-b070-4066-8564-b3d8f7fccf85","html_url":"https://github.com/nuxy/baraja-js","commit_stats":{"total_commits":83,"total_committers":1,"mean_commits":83.0,"dds":0.0,"last_synced_commit":"2c3a314894857b60e3d17746926e96140dbd6c13"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Fbaraja-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Fbaraja-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Fbaraja-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Fbaraja-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxy","download_url":"https://codeload.github.com/nuxy/baraja-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248729096,"owners_count":21152347,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animations","cards-games","carousel","javascript","modules","plugins","shuffling"],"created_at":"2024-11-15T16:19:43.886Z","updated_at":"2025-04-13T14:35:38.557Z","avatar_url":"https://github.com/nuxy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Baraja JS\r\n\r\n[![npm version](https://badge.fury.io/js/baraja-js.svg)](https://badge.fury.io/js/baraja-js) [![](https://img.shields.io/npm/dm/baraja-js)](https://www.npmjs.com/package/baraja-js) [![Install size](https://packagephobia.com/badge?p=baraja-js)](https://packagephobia.com/result?p=baraja-js) [![](https://img.shields.io/github/v/release/nuxy/baraja-js)](https://github.com/nuxy/baraja-js/releases)\r\n\r\n![Preview](https://raw.githubusercontent.com/nuxy/baraja-js/master/package.gif)\r\n\r\n_Baraja_ is a JavaScript plugin that allows to move elements in a card-like fashion and spreads them like one would spread a deck of cards on a table.  It uses CSS transforms for rotating and translating the items.\r\n\r\nThere are several options available that will create various spreading possibilities of the items, for example, moving the items laterally or rotating them in a fan-like way.\r\n\r\nCheckout the [demo](https://nuxy.github.io/baraja-js) for examples of use.\r\n\r\n## Dependencies\r\n\r\n- [Node.js](https://nodejs.org)\r\n\r\n## Installation\r\n\r\nInstall the package into your project using [NPM](https://npmjs.com), or download the [sources](https://github.com/nuxy/baraja-js/archive/master.zip).\r\n\r\n    $ npm install baraja-js\r\n\r\n### Alternative\r\n\r\nTo add to an existing [React](https://reactjs.org) project you can install this package using [YARN](https://yarnpkg.com).\r\n\r\n    $ yarn add react-baraja-js\r\n\r\n## Usage\r\n\r\nThere are two ways you can use this package.  One is by including the JavaScript/CSS sources directly.  The other is by importing the module into your component.\r\n\r\n### Script include\r\n\r\nAfter you [build the distribution sources](#cli-options) the set-up is fairly simple..\r\n\r\n```html\r\n\u003cscript type=\"text/javascript\" src=\"path/to/baraja.min.js\"\u003e\u003c/script\u003e\r\n\u003clink rel=\"stylesheet\" href=\"path/to/baraja.min.css\" media=\"all\" /\u003e\r\n\r\n\u003cscript type=\"text/javascript\"\u003e\r\n  baraja(container, options);\r\n\u003c/script\u003e\r\n```\r\n\r\n### Module import\r\n\r\nIf your using a modern framework like [Aurelia](https://aurelia.io), [Angular](https://angular.io), [React](https://reactjs.org), or [Vue](https://vuejs.org)\r\n\r\n```javascript\r\nimport Baraja from 'baraja-js';\r\nimport 'baraja-js/dist/css/baraja.css';\r\n\r\nconst baraja = new Baraja(container, options);\r\n```\r\n\r\n### HTML markup\r\n\r\n```html\r\n\u003cul class=\"baraja\"\u003e\r\n  \u003cli\u003e\u003cimg src=\"card1.jpg\" /\u003e\u003c/li\u003e\r\n  \u003cli\u003e\u003cimg src=\"card2.jpg\" /\u003e\u003c/li\u003e\r\n  \u003cli\u003e\u003cimg src=\"card3.jpg\" /\u003e\u003c/li\u003e\r\n  \u003cli\u003e\u003cimg src=\"card4.jpg\" /\u003e\u003c/li\u003e\r\n  \u003cli\u003e\u003cimg src=\"card5.jpg\" /\u003e\u003c/li\u003e\r\n\r\n  ..\r\n\u003c/ul\u003e\r\n```\r\n\r\n## Methods\r\n\r\n```javascript\r\nbaraja.add(html);\r\nbaraja.fan(options);\r\nbaraja.close();\r\nbaraja.last();\r\nbaraja.next();\r\n```\r\n\r\n## Global options\r\n\r\n| Option | Description                        | Type   | Default     |\r\n|--------|------------------------------------|--------|-------------|\r\n| easing | Animation type (ease-in/ease-out). | String | ease-in-out |\r\n| speed  | Length of time in milliseconds.    | Number | 300         |\r\n\r\n## Fan options\r\n\r\nOverriding the animation behavior can be done using the following options:\r\n\r\n| Option      | Description                            | Type    | Default  |\r\n|-------------|----------------------------------------|---------|----------|\r\n| direction   | Direction to fan the cards.            | String  | right    |\r\n| easing      | Animation type (ease-in/ease-out).     | String  | ease-out |\r\n| speed       | Length of time in milliseconds.        | Number  | 500      |\r\n| range       | Card horizontal spread distance.       | Number  | 90       |\r\n| translation | Card horizontal/vertical direction.    | Number  | 0        |\r\n| origin.x    | Card horizontal position (calculated). | Number  | 25       |\r\n| origin.y    | Card vertical position (calculated).   | Number  | 100      |\r\n| center      | Stack position is always centered.     | Boolean | true     |\r\n| scatter     | Position cards in a non-linear way.    | Boolean | false    |\r\n\r\nThese options are supported by the `baraja.fan` method.  See the [animation examples](https://github.com/nuxy/baraja-js/blob/master/demo/index.html#L135) provided in the demo.\r\n\r\n## Developers\r\n\r\n### CLI options\r\n\r\nRun [ESLint](https://eslint.org) on project sources:\r\n\r\n    $ npm run lint\r\n\r\nTranspile ES6 sources (using [Babel](https://babeljs.io)) and minify to a distribution:\r\n\r\n    $ npm run build\r\n\r\n## Common questions\r\n\r\n\u003e What was your motivation for creating this package?\r\n\r\nI use the [Codrops plugin](https://github.com/codrops/Baraja) on several personal projects and at this point, I have been officially abandoning any support for [jQuery](https://jquery.com) for more modern frameworks.  Unfortunately, the plugin was pretty old and a little behind on today's [JavaScript standards](https://es6.io) so achieving this was not possible without a complete rewrite.\r\n\r\nWhat I wanted was pretty simple..\r\n\r\n- ES6 language support\r\n- Import capabilities\r\n- Output compression\r\n- Installation via NPM\r\n- Production support\r\n\r\nAll of the items above are now provided with this package.\r\n\r\n## Credits\r\n\r\nThis package would not be possible without the original [Codrops](https://tympanus.net) [article](https://tympanus.net/codrops/2012/11/13/baraja-a-plugin-for-spreading-items-in-a-card-like-fashion) and proof-of-concept [demo](https://tympanus.net/Development/Baraja).  I have yet to find a package that provides anything close to this type of functionality.  It's in a league of its own and it's important to give credit where it's due.\r\n\r\n## Contributions\r\n\r\nIf you fix a bug, or have a code you want to contribute, please send a pull-request with your changes. (Note: Before committing your code please ensure that you are following the [Node.js style guide](https://github.com/felixge/node-style-guide))\r\n\r\n## Versioning\r\n\r\nThis package is maintained under the [Semantic Versioning](https://semver.org) guidelines.\r\n\r\n## License and Warranty\r\n\r\nThis package is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose.\r\n\r\n_Baraja-JS_ is provided under the terms of the [MIT license](http://www.opensource.org/licenses/mit-license.php)\r\n\r\nDemo and proof-of-concept by [Codrops](https://www.codrops.com) [[LICENSE](http://tympanus.net/codrops/licensing)]\r\n\r\nDemo background patterns by [Subtle Patterns](https://subtlepatterns.com) [[LICENSE](http://creativecommons.org/licenses/by-sa/3.0/deed.en_US\r\n)]\r\n\r\nDemo card illustrations by [Jason Custer](http://dribbble.com/jdelamancha)\r\n\r\n## Author\r\n\r\n[Marc S. Brooks](https://github.com/nuxy)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxy%2Fbaraja-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxy%2Fbaraja-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxy%2Fbaraja-js/lists"}