{"id":19483168,"url":"https://github.com/mmgrant73/revealbox","last_synced_at":"2026-05-18T17:01:09.099Z","repository":{"id":57355289,"uuid":"231487186","full_name":"mmgrant73/revealbox","owner":"mmgrant73","description":"Reveal box is a custom web component (inline-block element).  It hides contents of a box with another box.  When a user hovers over the box the top box will move out of the way so that the user can see the contents of the hidden box. The top box will move out of the way by the effects you assign to it.  Currently there are nine effects and  more will be added later.","archived":false,"fork":false,"pushed_at":"2020-01-03T01:25:28.000Z","size":21,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-10T03:16:57.846Z","etag":null,"topics":["component","css","css3","html","html5","javascript","web","webpage"],"latest_commit_sha":null,"homepage":null,"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/mmgrant73.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}},"created_at":"2020-01-03T01:17:28.000Z","updated_at":"2020-02-08T09:18:17.000Z","dependencies_parsed_at":"2022-09-26T16:31:17.918Z","dependency_job_id":null,"html_url":"https://github.com/mmgrant73/revealbox","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/mmgrant73%2Frevealbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Frevealbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Frevealbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Frevealbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmgrant73","download_url":"https://codeload.github.com/mmgrant73/revealbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240718893,"owners_count":19846481,"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":["component","css","css3","html","html5","javascript","web","webpage"],"created_at":"2024-11-10T20:13:53.886Z","updated_at":"2026-05-18T17:01:04.065Z","avatar_url":"https://github.com/mmgrant73.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/owner/my-element)\n# RevealBox:\n\n### What is it?\nReveal box is a custom web component (inline-block element).  It hides contents of a box with another box.  When a user\nhovers over the box the top box will move out of the way so that the user can see the contents of the hidden box.\nThe top box will move out of the way by the effects you assign to it.  Currently there are nine effects and \nmore will be added later.\n\n![Alt text](https://github.com/mmgrant73/revealbox/blob/master/revealbox.png?raw=true \"Image-RevealBox\")\n\n[Click here for Demo](https://mmgrant73.github.io/revealbox/revealbox.html) \n\n### How to use it?\nIt is quite easy to use it on your webpage. Just follow the below steps:\n\n1. Include the link to the script file that holds the this custom web component (reveal-box.js) near the bottom of \n   the body section of your webpage.  See below\n   \n```\n    \u003cscript src=\"./revealbox.js\"\u003e\u003c/script\u003e\n```\n\n2.  Then use the custom element tags on your webpage.\n\n```\n    \u003creveal-box width=\"100px\" height=\"50px\" effect=\"flip-hort\" style=\"background-color: Beige; border: 3px solid black;\"\u003e\n        \u003cdiv slot=\"cover\"\u003e\n            \u003cp\u003eCover Box\u003c/p\u003e\n        \u003c/div\u003e\n        \u003cdiv slot=\"reveal\"\u003e\n            \u003cp\u003eReveal\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/reveal-box\u003e\n```\n\nNote: That is all you have to do to use this custom element.  There is an example HTML page (acronym.html) that shows how to use it.\n\n```\n    \u003c!DOCTYPE html\u003e\n    \u003chtml\u003e\n      \u003chead\u003e\n        \u003ctitle\u003eAcronym Web Component\u003c/title\u003e\n        \u003cscript\u003e\n            function revealclick(){\n                alert(\"click event has been triggered!!\");\n            }\n        \u003c/script\u003e\n      \u003c/head\u003e\n      \n      \u003cbody\u003e\n      \n        \u003ch1\u003eThis is the RevealBox web component\u003c/h1\u003e\n        \n        \u003creveal-box width=\"100px\" height=\"50px\" effect=\"flip-hort\" style=\"background-color: Beige; border: 3px solid black; onclick=\"revealclick\"\u003e\n            \u003cdiv slot=\"cover\"\u003e\n                \u003cp\u003eCover Box\u003c/p\u003e\n            \u003c/div\u003e\n            \u003cdiv slot=\"reveal\"\u003e\n                \u003cp\u003eReveal\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/reveal-box\u003e\n\n        \u003cscript src=\"./revealbox.js\"\u003e\u003c/script\u003e\n\n      \u003c/body\u003e\n      \n    \u003c/html\u003e\n```\n\n### There are only four properties that you can use to customize this element.\n\nThere are four attributes that you need to set:\n1. width - the width of the reveal box\n2. height - the height of the reveal box\n3. effect - the type of effect the box will have when a user hovers over it\n4. style - this allows you to style the look of the outer reveal box\n\n### There are two div elements that you need to include:\n1. div with the slot = \"cover\" will hold the html code for the cover box\n2. div with the slot = \"reveal\" will hold the html code for the reveal box\n\nNote: a user can style these two div anyway you want but the width and height will be \ndetermine by the attribute set in the reveal-box tag\n\n### There are currently nine effects that can be used by this custom element when you hover over the reveal-box\n1. flip-hort: will rotate the top box along the horizontal axis (180 degrees)\n2. flip-vert: will rotate the top box along the vertical axis (180 degrees)\n3. slide-left: will slide the top box to the left\n4. slide-right: will slide the top box to the right\n5. rotate: will rotate the top box by 180 degrees\n6. sweep-hort: will sweep the top box along the horizontal axis\n7. sweep-vert: will sweep the top box along the vertical axis\n8. shrink: will shrink the top box until it is gone\n9. fade:  Will fade out the top box\n\n### To Do:\n1. Add more effect when I have the time\n\nNote: Even through it has default attributes you should really set your own.  Make sure to set width, height, effect, style and the two div tags\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmgrant73%2Frevealbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmgrant73%2Frevealbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmgrant73%2Frevealbox/lists"}