{"id":17321766,"url":"https://github.com/ekoopmans/flippanel","last_synced_at":"2025-03-27T03:21:00.178Z","repository":{"id":66342433,"uuid":"79775900","full_name":"eKoopmans/flippanel","owner":"eKoopmans","description":"Panel of 3D flippable tiles that turn when moused over.","archived":false,"fork":false,"pushed_at":"2017-03-29T05:23:33.000Z","size":462,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-01T08:44:42.434Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eKoopmans.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2017-01-23T06:17:59.000Z","updated_at":"2018-05-29T15:38:25.000Z","dependencies_parsed_at":"2023-02-24T23:00:23.404Z","dependency_job_id":null,"html_url":"https://github.com/eKoopmans/flippanel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eKoopmans%2Fflippanel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eKoopmans%2Fflippanel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eKoopmans%2Fflippanel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eKoopmans%2Fflippanel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eKoopmans","download_url":"https://codeload.github.com/eKoopmans/flippanel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245773363,"owners_count":20669761,"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":[],"created_at":"2024-10-15T13:39:30.428Z","updated_at":"2025-03-27T03:21:00.160Z","avatar_url":"https://github.com/eKoopmans.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FlipPanel\n\nFlipPanel is a JavaScript/CSS package for creating a panel of tiles that will flip when moused over.\n\nThis is an x-by-y grid of flip tiles as described [here](https://davidwalsh.name/css-flip). Each tile flips independently when moused over. The novel feature of FlipPanel is that the tiles combine to show a single image (see [here](http://www.erik-koopmans.com/portfolio/) for an example). The result is a single image that can be moused over to reveal different content under each tile.\n\n## Install\n\n1. Copy `flippanel.js` and `flippanel.css` to your project directory.\n2. Include `\u003cscript src=\"flippanel.js\"\u003e\u003c/script\u003e` and `\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"flippanel.css\"\u003e` in your HTML document.\n\n## Usage\n\n### Basic usage\n\nAs soon as FlipPanel is included, the `FlipPanel` class is exposed. To construct a new FlipPanel object, you must pass a destination DOM (which it will fill) and a callback that will be called upon creation:\n\n```js\nvar destination = document.getElementById('myContainer');\nvar callback = function(flipPanel) { console.log(flipPanel) };\nvar myPanel = new FlipPanel(destination, callback);\n```\n\nThe `destination` DOM will be completely filled (height and width) by the FlipPanel; the only requirement is that its position is **not** static (the default setting). The purpose of the `callback` function is to set any custom content for each individual tile (see the included examples for more details). The FlipPanel is created asynchronously, so it is **not** safe to assume it is ready to access immediately after the `new FlipPanel()` declaration.\n\n### The opts parameter\n\nThe FlipPanel constructor accepts a third parameter, `opts`, that allows further configuration of the panel. Here is an example usage:\n\n```js\nnew FlipPanel(destination, callback, { imgFront: 'panelFront.jpg', imgBack: 'panelBack.jpg', nx: 2, ny: 3 });\n```\n\nThe `opts` parameter has the following optional fields:\n\n|Field       |Value(s)        |Description                                                |\n|------------|----------------|-----------------------------------------------------------|\n|imgFront    |string          |The URL of the image to display as the front of the panel. |\n|imgBack     |string          |The URL of the image to display as the back of the panel.  |\n|nx          |integer         |The number of tiles to split the panel into horizontally.  |\n|ny          |integer         |The number of tiles to split the panel into vertically.    |\n|ruffleTimer |integer (in ms) |An optional timer to repeatedly \"ruffle\" the tiles.        |\n|ruffleDelay |integer (in ms) |The delay to use when ruffling (affects the ruffle speed). |\n\nIt is standard to specify at least `imgFront`, `nx`, and `ny`. If `imgBack` is not specified, it will default to using the same image as `imgFront`.\n\n#### The \"ruffle\"\n\nThe FlipPanel has a built-in method, `FlipPanel.ruffle()`, which causes the tiles to flip over in sequence, left-to-right and top-to-bottom. This can be a useful visual cue to help visitors understand that the FlipPanel is interactive, and not a static image.\n\n`opts.ruffleTimer` allows you to set the panel to automatically ruffle at a set rate; providing a value of 0 will cause it to ruffle only once on load, and a value greater than 0 will be used (in milliseconds) as a timer for a recurring ruffle. `opts.ruffleDelay` allows you to fine-tune the speed of the ruffle; it has a default value of 120 ms, and smaller values will cause each ruffle to flip through the tiles faster.\n\n## Dependencies\n\nFlipPanel does not require any external JavaScript packages.\n\n## Credits\n\n- [Erik Koopmans](https://github.com/eKoopmans)\n\n## License\n\n[The MIT License](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2017 Erik Koopmans \u003c[http://www.erik-koopmans.com/](http://www.erik-koopmans.com/)\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fekoopmans%2Fflippanel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fekoopmans%2Fflippanel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fekoopmans%2Fflippanel/lists"}