https://github.com/morulus/brahma.screens
Travel around the screens
https://github.com/morulus/brahma.screens
Last synced: about 1 year ago
JSON representation
Travel around the screens
- Host: GitHub
- URL: https://github.com/morulus/brahma.screens
- Owner: morulus
- License: mit
- Created: 2015-02-25T16:57:06.000Z (over 11 years ago)
- Default Branch: gh-pages
- Last Pushed: 2015-03-30T15:49:22.000Z (about 11 years ago)
- Last Synced: 2025-05-18T04:16:28.620Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://mahabra.github.io/brahma.screens/
- Size: 14.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.MD
- License: LICENSE.MD
Awesome Lists containing this project
README
Brahma.screens
--
Amazing widget for creating parallax fullscreen slider
## Dependencies
This 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).
### Getting started
Via [Bower](http://bower.io/):
```shell
bower install brahma.screens
```
Or manually way.
You should to download from this repo these files:
`dist/brahma.screens.js, dist/brahma.screens.css`
And don't forget to download required libraries.
### Gettings started: ax's method
You love jQuery and you don't like to use others? No problem.
Download the files:
`jquery/plugin/jquery.brahma-screens.js, `jquery/plugin/jquery.brahma-screens.css`
Enjoy using the widget as jQuery plugin. See more info [here](#using-as-jquery-plugin).
### Connection
Connect to the page all required js & css.
```
```
### Prepare HTML
Create a node element and give id to it (or some other selector). Put inside node any elements, which will be your slides.
Mark 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?)
The 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.
```html
First floor, first room
First floor, second room
Second floor, second room
```
The best way to create a photo gallery - a place photos inside the main container and enable `photogallery` option (it is enabled by defaults).
```html
```
This photos will be transformed into DIV elements with background. Inside these element will be placed titles, generated from alt-attribute or filename.
Another way - to create your custome structure with your own style and don't forget to disable `photogallery` option. After or
After creating elements run application of Brahma:
```javascript
Brahma("#screens").app('screens', {
// Options
});
```
Look for a result. It should work.
If doesn't. Look up for [example](http://morulus.github.io/brahma.screens/)
## Options
- __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)
- __easing__ : easing function of CSS animation (it can be cubic-bezier or any else CSS compatible easing). _Default_: `cubic-bezier(.43,.2,.46,.8)`
- __duration__ : Duration of animation in ms. _Default_: 1000
- __touch__ : Enables touch screen support. _Default_: true
- __mobileMap__ : On mobile devices (including tablet) will show map in center of screen. Default: false
- __deadlockEffect__ : Enables effect of endings of grid. _Default_: true
- __photogallery__ : To convert images to DIV elements with property background-size:cover. It makes process of creating photo-gallery easier. _Default_: false
- __infinity__ : Experimental & unstable mode, when slides will never ends and user can move to any direction any times. Like teleporting to another edge. _Default_: false
- __infinityMethod__ : Method of logic of infinity mode. Can be passage or discover. _Default_: passage
- __keyboard__: Enables keyboard listner. _Default_: true
## Special effect
There is few simple CSS3 effects, that you can use in the slides contents. Use the special classes at sub-elements in screen:
- brahma-screen-effect-fade : will show element using fade effect when slider will become current.
- brahma-screen-effect-zoom : will show element using zoom effect when slider will decome current.
## Making arrows black for white slides
Use data-attribute `data-screens-color-theme="black"` in slide's tag, to indicate that arrows at this slide should be black.
## Intresting
You 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)
## Using as JQuery pluign
This plugin has an special build for use as a plug-in for jQuery.
```javasript
jQuery('#selector').brahma.screens();
```
See folder `jquery` for ditails.
## News
### Version 1.2.4
- Adds data-attribut `data-dirty` to main container, which allows you to hide main container until it is initialized
### Version 1.2.2
- Arrows changed to base64 SVG format
- aviable `data-screens-arrows-style` option for slides
### Version 1.2.1
- Disable mobileMap on defaults
- Change default duration to 650
- Adds titles in photogallery mode
- Keyboard option
### Version 1.2.0
- Supporting touch screen
- The effect of the deadlock
- Auto fill images : if slide nodeName is IMG, element converted to DIV with same background image like IMG.src.
- Centered map display in mobile devices
- Responsive arrows to mobile devices
- Detecting mobile devices
- Fixed easing prop in config
- Changed default value of easing function
## Issues
- There exists a problem with smooth movements in IE10, sometimes there are strange jumps.
## License
MIT
## Author
Vladimir Kalmykov [@morulus](https://github.com/morulus/)