{"id":23274856,"url":"https://github.com/alveflo/tiles","last_synced_at":"2025-04-06T10:47:00.392Z","repository":{"id":14510478,"uuid":"17224075","full_name":"alveflo/tiles","owner":"alveflo","description":"CSS3 tile-animation library","archived":false,"fork":false,"pushed_at":"2015-10-21T21:26:27.000Z","size":192,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-12T16:34:28.900Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alveflo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-26T20:22:36.000Z","updated_at":"2015-10-18T19:36:02.000Z","dependencies_parsed_at":"2022-07-15T18:00:35.343Z","dependency_job_id":null,"html_url":"https://github.com/alveflo/tiles","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/alveflo%2Ftiles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alveflo%2Ftiles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alveflo%2Ftiles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alveflo%2Ftiles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alveflo","download_url":"https://codeload.github.com/alveflo/tiles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247471397,"owners_count":20944154,"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-12-19T20:16:27.819Z","updated_at":"2025-04-06T10:47:00.370Z","avatar_url":"https://github.com/alveflo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![Tiles](https://raw.githubusercontent.com/victorzki/tiles/master/tiles_img.png)\n#####Discontinued.\n## What's this?\nTiles is a CSS3 animation library that makes it really easy to attach animation to document object models.\n## Usage\nTo use this library simply put the following snippet within the `\u003chead\u003e` tag of your html document:\n```html\n\u003clink href=\"https://rawgithub.com/victoralveflo/tiles/master/tiles.css\" \n  rel=\"stylesheet\" \n  media=\"screen\"\u003e\n```\n## API\n#### \"Document load\" functionality\n`.bounceIn` - Performs a bouncing effect on the parent element\n#### Hover functionality\n###### Scaling\nWith `.scale\u003cVALUE\u003e` you increase/decrease the size of the parent element. The value is given in percent: \n\n`.scale10` *-\u003e Scale parent to 10% of original size.*\n\nAvailable classes:\n\n`.scale10`\n`.scale20`\n`.scale30`\n`.scale40`\n`.scale50`\n`.scale60`\n`.scale70`\n`.scale80`\n`.scale90`\n`.scale110`\n`.scale120`\n`.scale130`\n`.scale140`\n`.scale150`\n`.scale160`\n`.scale170`\n`.scale180`\n`.scale190`\n`.scale200`\n\n=====\n###### Rotating\nWith `.rotate\u003cANGLE\u003e` you rotate the parent element by the given angle. The angle is given in degrees: \n\n`.rotate90` *-\u003e Rotates parent by 90 degrees.* and `.rotate-70` *-\u003e Rotates parent by -70 degrees.*\n\nAvalable classes:\n\n\n`.rotate10`\n`.rotate20`\n`.rotate30`\n`.rotate40`\n`.rotate50`\n`.rotate60`\n`.rotate70`\n`.rotate80`\n`.rotate90`\n`.rotate100`\n`.rotate110`\n`.rotate120`\n`.rotate130`\n`.rotate140`\n`.rotate150`\n`.rotate160`\n`.rotate170`\n`.rotate180`\n \n`.rotate-10`\n`.rotate-20`\n`.rotate-30`\n`.rotate-40`\n`.rotate-50`\n`.rotate-60`\n`.rotate-70`\n`.rotate-80`\n`.rotate-90`\n`.rotate-100`\n`.rotate-110`\n`.rotate-120`\n`.rotate-130`\n`.rotate-140`\n`.rotate-150`\n`.rotate-160`\n`.rotate-170`\n`.rotate-180`\n\n=====\n###### Faders\nWith `.fade\u003cVALUE\u003e` you fade the parent element with the given value. The value is given in percent: \n\n`.fade90` *-\u003e Fades parent to 10% visibility*\n*Note that the value is inverted corresponding to the opacity parameter!*\n\nAvailable classes:\n\n`.fade90`\n`.fade80`\n`.fade70`\n`.fade60`\n`.fade50`\n`.fade40`\n`.fade30`\n`.fade20`\n`.fade10`\n\n=====\n###### Highlighting\n`.highlight` - Inverts all colors in the parent element\n#### Other\n`.tile` - A basic tile element\n\n## Example\nCheck out a live example of some tiles [here](http://jambler.se/demos/tiles/). Also, all available tile-classes are visualized [here](http://www.jambler.se/demos/tiles/demo.html)!\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\t\u003clink href=\"https://rawgithub.com/victoralveflo/tiles/master/tiles.css\" \n\t\t\trel=\"stylesheet\" \n\t  \t\tmedia=\"screen\"\u003e\n\t  \t\u003cstyle\u003e\n\t  \t\tbody {\n\t\t\t  background-color: #fff;\n\t\t\t}\n\n\t\t\t#container {\n\t\t\t\theight: auto;\n\t\t\t\twidth: 315px;\n\t\t\t\tmargin-left:auto;\n\t\t\t\tmargin-right: auto;\n\t\t\t\tmargin-top: 100px;\n\t\t\t}\n\n\t  \t\u003c/style\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003cdiv id=\"container\"\u003e\n\t\t\t\u003ccenter\u003e\n\t\t\t  \u003c!-- Bouncing effect to img-tag below --\u003e\n\t\t  \t  \u003cimg src=\"tiles_img.png\" class=\"bounceIn\"\u003e\u003cbr\u003e\n\t\t\t  \u003c!-- Scale to 80% of original size --\u003e\n\t\t\t  \u003cbutton class=\"tile scale80\"\u003e\t\t\t\t\tscale80\u003c/button\u003e\n\t\t\t  \u003c!-- Scale to 120% of original size --\u003e\n\t\t\t  \u003cbutton class=\"tile scale120\"\u003e\t\t\t\tscale120\u003c/button\u003e\n\t\t\t  \u003c!-- Rotate by 90 degrees --\u003e\n\t\t\t  \u003cbutton class=\"tile rotate90\"\u003e\t\t\t\trotate90\u003c/button\u003e\n\t\t\t  \u003c!-- 100% fade (no visibility) --\u003e\n\t\t\t  \u003cbutton class=\"tile fade100\"\u003e\t\t\t\t\tfade100\u003c/button\u003e\n\t\t\t  \u003c!-- Check this out! \n\t\t\t\t   Scale to 30% of original size AND 80% fade! --\u003e\n\t\t\t  \u003cbutton class=\"tile scale30 fade80\"\u003e\tscale30 + fade80\u003c/button\u003e\n\t\t\t  \u003c!-- Highlighting effect --\u003e\n\t\t\t  \u003cbutton class=\"tile highlight\"\u003e\t\t\t\thighlight\u003c/button\u003e\n\t\t\t\u003c/center\u003e\n\t\t\u003c/div\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falveflo%2Ftiles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falveflo%2Ftiles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falveflo%2Ftiles/lists"}