{"id":28220889,"url":"https://github.com/morulus/brahma.screens","last_synced_at":"2025-06-10T09:30:38.047Z","repository":{"id":27834829,"uuid":"31324797","full_name":"morulus/brahma.screens","owner":"morulus","description":"Travel around the screens","archived":false,"fork":false,"pushed_at":"2015-03-30T15:49:22.000Z","size":15636,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"gh-pages","last_synced_at":"2025-05-18T04:16:28.620Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://mahabra.github.io/brahma.screens/","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/morulus.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-25T16:57:06.000Z","updated_at":"2019-11-17T04:01:43.000Z","dependencies_parsed_at":"2022-09-03T10:23:23.089Z","dependency_job_id":null,"html_url":"https://github.com/morulus/brahma.screens","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morulus%2Fbrahma.screens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morulus%2Fbrahma.screens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morulus%2Fbrahma.screens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morulus%2Fbrahma.screens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morulus","download_url":"https://codeload.github.com/morulus/brahma.screens/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morulus%2Fbrahma.screens/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259047870,"owners_count":22797614,"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":"2025-05-18T04:16:26.076Z","updated_at":"2025-06-10T09:30:37.978Z","avatar_url":"https://github.com/morulus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Brahma.screens\r\n--\r\nAmazing widget for creating parallax fullscreen slider\r\n\r\n\r\n## Dependencies\r\nThis plugin requires [BrahmaJs](http://github.com/morulus/brahma/) `1.3.8` and [Brahma.touch](http://github.com/morulus/brahma.touch/) `1.0.2` plugin fot it. See more info in [bower.json](https://github.com/morulus/brahma.screens/blob/gh-pages/bower.json).\r\n\r\n### Getting started\r\nVia [Bower](http://bower.io/):\r\n```shell\r\nbower install brahma.screens\r\n```\r\n\r\nOr manually way. \r\nYou should to download from this repo these files:\r\n`dist/brahma.screens.js, dist/brahma.screens.css`\r\nAnd don't forget to download required libraries.\r\n\r\n### Gettings started: ax's method\r\nYou love jQuery and you don't like to use others? No problem.\r\nDownload the files:\r\n`jquery/plugin/jquery.brahma-screens.js, `jquery/plugin/jquery.brahma-screens.css`\r\nEnjoy using the widget as jQuery plugin. See more info [here](#using-as-jquery-plugin).\r\n\r\n### Connection\r\nConnect to the page all required js \u0026 css.\r\n```\r\n\u003c!-- BrahmaJs lib --\u003e\r\n\u003cscript src=\"bower_components/brahma/dist/brahma.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\r\n\u003c!-- Brahma.touch plugin --\u003e\r\n\u003cscript src=\"bower_components/brahma.touch/dist/brahma.touch.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\r\n\u003c!-- Brahma.screens widget --\u003e\r\n\u003cscript src=\"bower_components/brahma.screens/dist/brahma.screens.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\r\n\u003clink href=\"bower_components/brahma.screens/dist/brahma.screens.css\" rel=\"stylesheet\"\u003e\r\n```\r\n\r\n### Prepare HTML\r\nCreate a node element and give id to it (or some other selector). Put inside node any elements, which will be your slides. \r\nMark the positions of slides by attributes _data-screens-x_ and _data-screens-y_ (where data-screens-x - is X coord in the grid, data-screens-y - is Y coord in the grid, capish?)\r\n\r\nThe grid is a map of your slides in 2D plane. So, if you wanna to your slider will work in only horizontal mode, you should make data-screens-y equal 0, always. But this slider supports XY moves, so Y can have any value. To understand it, imagine that _data-screens-y_ is a number of floor, so that data-screens-x is a serial number of room. But in the case of the program, all the way around. We build this building in to the ground. So 5-th floor is a deep inside the ground, not up.\r\n```html\r\n\u003cdiv id=\"screens\"\u003e\r\n\t\u003cdiv data-screens-x=\"0\" data-screens-y=\"0\"\u003eFirst floor, first room\u003c/div\u003e\r\n\t\u003cdiv data-screens-x=\"1\" data-screens-y=\"0\"\u003eFirst floor, second room\u003c/div\u003e\r\n\t\u003cdiv data-screens-x=\"1\" data-screens-y=\"1\"\u003eSecond floor, second room\u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nThe best way to create a photo gallery - a place photos inside the main container and enable `photogallery` option (it is enabled by defaults). \r\n```html\r\n\u003cdiv id=\"screens\"\u003e\r\n\t\u003cimg src=\"photo1.jpg\" data-screens-x=\"0\" data-screens-y=\"0\" alt=\"Photo 1\" /\u003e\r\n\t\u003cimg src=\"photo2.jpg\" data-screens-x=\"1\" data-screens-y=\"0\" alt=\"Photo 2\" /\u003e\r\n\t\u003cimg src=\"photo3.jpg\" data-screens-x=\"2\" data-screens-y=\"0\" alt=\"Photo 3\" /\u003e\r\n\u003c/div\u003e\r\n```\r\nThis photos will be transformed into DIV elements with background. Inside these element will be placed titles, generated from alt-attribute or filename.\r\n\r\nAnother way - to create your custome structure with your own style and don't forget to disable `photogallery` option. After or \r\n\r\nAfter creating elements run application of Brahma:\r\n```javascript\r\nBrahma(\"#screens\").app('screens', {\r\n\t// Options\r\n});\r\n```\r\n\r\nLook for a result. It should work.\r\nIf doesn't. Look up for [example](http://morulus.github.io/brahma.screens/)\r\n\r\n## Options\r\n- __lockDelay__ : Imposes a ban on the any action after the start of movement on specific time in ms. Or if value is true, on full duration of moving. _Default_: false. (This options automaticly enabled on infinity mode)\r\n- __easing__ : easing function of CSS animation (it can be cubic-bezier or any else CSS compatible easing). _Default_: `cubic-bezier(.43,.2,.46,.8)`\r\n- __duration__ : Duration of animation in ms. _Default_: 1000\r\n- __touch__ : Enables touch screen support. _Default_: true\r\n- __mobileMap__ : On mobile devices (including tablet) will show map in center of screen. Default: false\r\n- __deadlockEffect__ : Enables effect of endings of grid. _Default_: true\r\n- __photogallery__ : To convert images to DIV elements with property background-size:cover. It makes process of creating photo-gallery easier. _Default_: false\r\n- __infinity__ : Experimental \u0026 unstable mode, when slides will never ends and user can move to any direction any times. Like teleporting to another edge. _Default_: false\r\n- __infinityMethod__ : Method of logic of infinity mode. Can be passage or discover. _Default_: passage\r\n- __keyboard__: Enables keyboard listner. _Default_: true\r\n\r\n## Special effect\r\nThere is few simple CSS3 effects, that you can use in the slides contents. Use the special classes at sub-elements in screen:\r\n- brahma-screen-effect-fade : will show element using fade effect when slider will become current.\r\n- brahma-screen-effect-zoom : will show element using zoom effect when slider will decome current.\r\n\r\n## Making arrows black for white slides\r\nUse data-attribute `data-screens-color-theme=\"black\"` in slide's tag, to indicate that  arrows at this slide should be black.\r\n\r\n## Intresting\r\nYou can use a lot of copies of sliders at one page. But do not forget that the keyboard is one at all. You can disable it via the keyboard option, but when one keyboard is one at all - it is also interesting. Look up for example [example](http://morulus.github.io/brahma.screens/several.html)\r\n\r\n## Using as JQuery pluign\r\nThis plugin has an special build for use as a plug-in for jQuery.\r\n```javasript\r\njQuery('#selector').brahma.screens();\r\n```\r\nSee folder `jquery` for ditails.\r\n\r\n## News\r\n### Version 1.2.4\r\n- Adds data-attribut `data-dirty` to main container, which allows you to hide main container until it is initialized \r\n\r\n### Version 1.2.2\r\n- Arrows changed to base64 SVG format\r\n- aviable `data-screens-arrows-style` option for slides\r\n\r\n### Version 1.2.1\r\n- Disable mobileMap on defaults\r\n- Change default duration to 650\r\n- Adds titles in photogallery mode\r\n- Keyboard option\r\n\r\n### Version 1.2.0\r\n- Supporting touch screen\r\n- The effect of the deadlock\r\n- Auto fill images : if slide nodeName is IMG, element converted to DIV with same background image like IMG.src.\r\n- Centered map display in mobile devices\r\n- Responsive arrows to mobile devices\r\n- Detecting mobile devices\r\n- Fixed easing prop in config\r\n- Changed default value of easing function\r\n\r\n## Issues\r\n- There exists a problem with smooth movements in IE10, sometimes there are strange jumps.\r\n\r\n## License\r\nMIT\r\n\r\n## Author\r\nVladimir Kalmykov [@morulus](https://github.com/morulus/)\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorulus%2Fbrahma.screens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorulus%2Fbrahma.screens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorulus%2Fbrahma.screens/lists"}