{"id":13546995,"url":"https://github.com/putnamn21/jquery-animate3d","last_synced_at":"2025-04-02T19:32:15.130Z","repository":{"id":137262860,"uuid":"61054903","full_name":"putnamn21/jquery-animate3d","owner":"putnamn21","description":"jQuery plugin that gives elements a 3d mouse over effect!","archived":false,"fork":false,"pushed_at":"2016-06-23T23:36:49.000Z","size":346,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-03T15:38:23.371Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","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/putnamn21.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-06-13T17:08:41.000Z","updated_at":"2017-07-15T13:55:57.000Z","dependencies_parsed_at":"2024-01-21T00:25:09.592Z","dependency_job_id":null,"html_url":"https://github.com/putnamn21/jquery-animate3d","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/putnamn21%2Fjquery-animate3d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/putnamn21%2Fjquery-animate3d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/putnamn21%2Fjquery-animate3d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/putnamn21%2Fjquery-animate3d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/putnamn21","download_url":"https://codeload.github.com/putnamn21/jquery-animate3d/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246880164,"owners_count":20848819,"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-08-01T12:00:49.268Z","updated_at":"2025-04-02T19:32:14.740Z","avatar_url":"https://github.com/putnamn21.png","language":"CSS","funding_links":[],"categories":["🚀 A series of exquisite and compact web page cool effects"],"sub_categories":["Mouse Effect"],"readme":"# 3dAnimate\n\n3dAnimate is a jQuery plugin that allows you to give any portion of your website a 3d mouse over effect.\n\nDemo - [animate3d](http://nathan-putnam.me/animate3d)\n\n## Get Started\n\nFirst download and load the 3d js file after jQuery and before your script.\n\nNext, call animate3d on an element or group of elements.\n\n```html\n\u003cscript src=\"./scripts/jquery-3.0.0.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./scripts/3d.js\"\u003e\u003c/script\u003e\t\n\u003cscript\u003e\n```\n```javascript\n\t$('element').animate3d({});\n``` \n```html\n\u003c/script\u003e\n```\n\t\nIts that easy! Passing in an empty object uses all of the default settings of 3dAnimate. You can customize by passing in any of the following {key:value} pairs. Shown below are the default values.\n\n```javascript\n$('element').animate3d({\n\tperspective:   1000,\n\tdistance:      50,\n\trotation:      0.5,\n\tstartX:        0,\n\tstartY:        0\n});\n```\t\n## Explanation\n\nGo to [animate3d](http://nathan-putnam.me/animate3d) for a live demo to really see how Animate3d works!\n\nThe element you call Animate3d on is the 'canvas', and each child element a 3d layer. When you mouse over the element you will see the perspecive change and each child element will appear closer to you than the last.\n\nSimply place and position the child-elements how you want them to look, without using the transform css property (thats the one the animate3d uses to give its effect).\n\n#### Perspective\n\nNumber greater than 0. Default is 1000.\n- Sets the perspective on the element\n\nSee w3s explanation - [Perspective](http://www.w3schools.com/cssref/css3_pr_perspective.asp)\n\n#### Distance\n\nNumber greater than 0. Default is 50.\n- Distance controls the perceived space between layers\n\n#### Rotation\n\nNumber between 0 and 1. Default is 0.5.\n- Rotation controls how much the element is tilted during mouse over. If rotation is at 1 the element will tilt 90 degrees with the mouse at the edge of the element.\n\n#### StartX\n\nNumber between -1 and 1. Default is 0.\n- Sets the default view of the element tilted along the X axis\n\n#### StartY\n\nNumber between -1 and 1. Default is 0.\n- Sets the default view of the element tilted along the Y axis\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fputnamn21%2Fjquery-animate3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fputnamn21%2Fjquery-animate3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fputnamn21%2Fjquery-animate3d/lists"}