{"id":18924143,"url":"https://github.com/hellsan631/logosdistort","last_synced_at":"2025-06-28T02:38:31.468Z","repository":{"id":27431555,"uuid":"30909408","full_name":"hellsan631/LogosDistort","owner":"hellsan631","description":"Uses matrix3d perspective distortions to create 3d scenes in the browser. Inspired by HelloMonday","archived":false,"fork":false,"pushed_at":"2016-11-02T21:25:08.000Z","size":23116,"stargazers_count":145,"open_issues_count":7,"forks_count":32,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-06-15T14:26:42.021Z","etag":null,"topics":["depth","javascript","jquery","matrix3d","perspective","three-d"],"latest_commit_sha":null,"homepage":"http://hellsan631.github.io/LogosDistort/","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/hellsan631.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-17T08:57:13.000Z","updated_at":"2025-01-16T03:39:36.000Z","dependencies_parsed_at":"2022-07-25T17:32:36.462Z","dependency_job_id":null,"html_url":"https://github.com/hellsan631/LogosDistort","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/hellsan631/LogosDistort","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellsan631%2FLogosDistort","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellsan631%2FLogosDistort/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellsan631%2FLogosDistort/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellsan631%2FLogosDistort/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hellsan631","download_url":"https://codeload.github.com/hellsan631/LogosDistort/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellsan631%2FLogosDistort/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262364893,"owners_count":23299665,"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":["depth","javascript","jquery","matrix3d","perspective","three-d"],"created_at":"2024-11-08T11:05:56.374Z","updated_at":"2025-06-28T02:38:31.452Z","avatar_url":"https://github.com/hellsan631.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Advanced 3d Perspective Distortion\n## Enhanced by [BrowserStack](http://browserstack.com/)\n\n[![License](http://img.shields.io/badge/License-MIT-blue.svg)](http://opensource.org/licenses/MIT)\n\n#### Create a unique parallax environment to show off your work.\n#### Inspired by http://hellomonday.com/\n\n\u003cimg src=\"demo/demo1.gif\" alt=\"demo 1\"\u003e\n\nI've always been a big fan of using subtitle 3d effects to give depth to UI and images. Ever since laying my eyes on the [26000 Vodka] (http://26000.resn.co.nz/flash.html) website many years ago, I've wanted to create something that can emulate that same kind of depth, without using cumbersome flash to do it. (Also, I didn't know flash, so there's that)\n\nThis plugin allows you to (currently) do full-page 3d perspective transforms base on mouse position. There are a lot of options you can tweak to your liking, and I'm looking to develop the application of this effect further.\n\n[Check out the demo's to see whats possible](http://hellsan631.github.io/LogosDistort/)\n\n### New In v0.3\n\n1. JQuery no longer a requirement.\n2. Multiple element on screen now supported. [see demo5.html](http://hellsan631.github.io/LogosDistort/demo5.html)\n3. Added new mouse movement listeners. [see demo5.html](http://hellsan631.github.io/LogosDistort/demo5.html)\n4. _New Option:_ __perspectiveMulti__\n5. _New Option:_ __depthOverride__\n6. Fixed a few bugs, performance should be more consistent now.\n\n__Note: When 1.0 hits, the file name will drop the jQuery prefix__\n\n## Usage\n\nThere are two ways of using LogosDistort. By Using bower:\n```   \nbower install logos-distort\n```\nOr by downloading the repo and using the files there\n\n1. Include jQuery (optional):\n\n\t```html\n\t\u003cscript src=\"http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js\"\u003e\u003c/script\u003e\n\t```\n\n2. Include plugin's code: (javascript and stylesheets)\n\n\t```html\n\t\u003clink href=\"dist/css/perspectiveRules.css\" rel=\"stylesheet\" /\u003e\n\t\u003cscript src=\"dist/jquery.logosDistort.min.js\"\u003e\u003c/script\u003e\n\t```\n\n3. Add the HTML Structure:\n\n\t```html\n\t\u003cdiv id=\"demo1\"\u003e\n      \u003cimg alt=\"background\" src=\"assets/images/background.png\" /\u003e\n      \u003cdiv id=\"particle-target\" \u003e\u003c/div\u003e\n      \u003cimg alt=\"logo\" src=\"assets/images/logo.png\" /\u003e\n  \u003c/div\u003e\n\t```\n\n\u003e The structure can include any element, but currently only has support for full screen elements. If you'd like to make non-full screen elements respond to the matrix transform, then simply place the elements inside of a full screen div container. An example of this can be seen in demo4.html\n\n\n4. Call the plugin:\n\n\t```javascript\n\t$(\"#demo1\").logosDistort(options);\n\n\t//or non jquery way\n\n\tvar distortion = new logosDistort(document.getElementById('demo1'), options);\n\t```\n\n\u003e You can customize a number of options and send them in when starting the plugin. See \"Options\" for more info.\n\n\u003cimg src=\"demo/demo3.gif\" alt=\"demo 3\"\u003e\n\n\u003cimg src=\"demo/demo5.gif\" alt=\"demo 5\"\u003e\n\n\u003e __Note:__ When setting multiple elements to use the effect, each of their containers needs to\n\u003e have position:relative in their css style. [See demo5.html](https://github.com/hellsan631/LogosDistort/blob/master/demo/demo5.html#L18)\n\n## Options\n\n\u003e __EffectName:__ \"default\" _(type)_\u003cbr/\u003e\n\u003e\tDescription\n\n1. __enable:__ true _(boolean)_ \u003cbr/\u003e\n\tEnable/disable the effect\n\n2. __effectWeight:__ 1 _(number)_ \u003cbr/\u003e\n \tThe weight of how much the background parallaxes based on mouse movement. Lower means a smaller\n\twindow of movement, higher means more. Higher values also may introduce clipping depending on the\n\tdepth of your scene.\n\n3. __enableSmoothing:__ true _(boolean)_ \u003cbr/\u003e\n\tEnables smoothing of the mouse so that the perspective change on mouse movement isnt exactly 1:1\n\n4. __smoothingMultiplier:__ 1 _(number)_ \u003cbr/\u003e\n\tA multipler for the time it takes for the parallax effect to center on the mouse cursor. Higher\n\tmeans more time, lower means the animation is faster.\n\n5. __mouseMode:__ \"container\" _(string)_ \u003cbr/\u003e\n\tChanges how mouse movement triggers the parallax effect. This has 3 settings, _\"container\"_,\n\t_\"window\"_, and _\"magnetic\"_. The default (container) binds it so that the parallaxing only\n\tchanges when the mouse is inside of the container, like wise window means that the mouse updates\n\twill be bound to the window. __Magnetic__, however, allows tracking of the mouse on X and Y planes.\n\tThe effect will update when the mouse is on the same x or y plane as the base element.\n\n6. __outerBuffer:__ 1.10 _(number)_ \u003cbr/\u003e\n\tA size multiplier for the backgrounds, so that the 3d parallax effect doesn't clip to show a\n\tstatic background. If you see move your mouse to the corner of the window, and you see a white\n\tbackground clip on the opposite corner, this value should be higher. That, or your elementDepth\n\tis set too high.\n\n7. __elementDepth:__ 140 _(number)_ \u003cbr/\u003e\n\tThe difference of depth between each element in px. A higher depth means a better parallax effect,\n\tbut also means a higher chance that the further elements will clip. More elements means more\n\toverall scene depth, meaning that if you have more then 4-5 elements in a scene, consider leaving\n\tthis setting at its default value, or making it lower.\n\n8. __depthOverride:__ false _(boolean)_ \u003cbr/\u003e\n\tIf there are a lot of elements in the scene, logosDistort will halve the depth for each element,\n\tto maintain good performance (default setting of false). However, you can turn this off manually if\n\tyou don't have any performance concerns by setting this to ```true```;\n\n9. __perspectiveMulti:__ 1.0 _(number)_ \u003cbr/\u003e\n\tChanges the perspective of the 3d parent container. This changes the focal point where the scene\n\twill rotate around. A higher multiplier means a smaller rotation, but things will seem far away.\n\tA lower multiplier (below 1.0) means the scene will be closer and will rotate more, which might\n\texpose the background.\n\n10. __directions:__ [ 1, 1, 1, 1, -1, -1, 1, 1 ] _(array of numbers)_ \u003cbr/\u003e\n\tWeights for the directions of the parallax effect based on mouse movement. Default is set so that\n\tthe \"center\" of the effect moves opposite to the mouse in all directions. Changes in this can break\n\tthe effect. See the Demo3 for an example on how to set these directions\n\n11. __weights:__ [ 0.0000310, 0.0001800, 0.0000164, 0.0000019, 0.0001200 ] _(array of numbers)_ \u003cbr/\u003e\n\tEffect weights for how much the effect will move in a given direction based on mouse movement.\n\tHere is each number and what they do (about).\n    ```js\n\t  [\n\t\t  \"distance from center\",\n\t\t  \"y plane neg to left, pos to right -\u003e rotational\",\n\t\t  \"distance from center axis point X and Y\",\n\t\t  \"1 minus distance from center axis point\",\n\t\t  \"relative distance from center x plane, top neg, bot pos\"\n\t  ]\n\t  ```\n\n12. __container:__ window _(variable)_\u003cbr/\u003e\n\tThe container for which the effect will be bound. This can either be an element, or set to ```'self'```,\n\twhere the base element will be used as the container. See ```demo5.html``` for an example.\n\n13. __cssClasses:__ _(object)_ \u003cbr/\u003e\n\tOverrides for the class names incase you want to use a similar class name for a specific element.\n\n\t  ```js\n\t  {\n\t\t  smartContainer: \"ld-smart-container\",\n\t\t  overlapContainer: \"ld-overlap-container\",\n\t\t  parent3d: \"ld-3d-parent\",\n\t\t  transformTarget: \"ld-transform-target\",\n\t\t  active: \"ld-transform-active\",\n\t\t  object3d: \"ld-3d-object\"\n\t  }\n\t  ```\n\n### Yay\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhellsan631%2Flogosdistort","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhellsan631%2Flogosdistort","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhellsan631%2Flogosdistort/lists"}