flipswitch.js - pure javascript solution for clipping elements inside DOM
npm install @bornfight/flipswitch
Pure ES6 library for clipping fixed positioned elements on scroll
- allows to clip fixed elements trough sections on scroll
- it's simple to use
- lightweight (minified ~8kb)
- fast and customizable
- no __dependencies__
- install flipswitch trough __npm__ or pull ti from git
```
npm i @bornfight/flipswitch
- include flipswitch to your __JS__ and __SCSS__ after running __npm install__
###### JS
` JS`
import Flipswitch from "@bornfight/flipswitch";
###### SCSS
` SCSS`
@import "~flipswitch/src/scss/flipswitch.scss";`
###### or CSS HTML`
##### HTML markup
- data-flipswitch-class doesn't need to be different for every section (could be something like dark and light)
`HTML
Flipswitch element
...
...
...
...
`
##### Basic usage
- element needs to have `js-flipswitch-element` class`
- section needs to have js-flipswitch-section` class and `data-flipswitch-class` attribute `
- data-flipswitch-class` is a flag that will define witch element will be clipped`
- library will use requestAnimationFrame()` (not scroll event)
- element will be wrapped and positioned to body
`JS`
new Flipswitch();
##### Advanced usage
- below example will use scroll event
- element will be wrapped and positioned to `js-parent`
- element is offset by 50px from left and -50px from top
`JS`
new Flipswitch({
parentClass: 'js-parent',
elementClass: 'js-element',
sectionsClass: 'js-section',
useScroll: true,
offsetX: 50,
offsetY: -50
});
Option | Type | Default | Example | Description
------ | ---- | ------- | ------- | -----------
parentClass | string | element parent | 'js-parent' | Element will be wrapped and moved to that parent and not to initial parent element
elementClass | string | 'js-flipswitch-element' | 'js-element' | Changes default class
sectionsClass | string | 'js-flipswitch-section' | 'js-section' | Changes default class
useScroll | boolean | false | true | Use scroll event and not `requestAnimationFrame()``
offsetX | number | 0 | 50 | Offsets element from top
offsetY | number | 0 | -50 | Offsets element from left
throttle | number | 0 | 10 | Refreshes element position every XY milliseconds (only available if useScroll: false`)`
data-flipswitch-class | html attr | | data-flipswitch-class="red-section"` | flag that will define witch element will be clipped
1. every section needs to have `data-flipswitch-class` (look 4.) and section class (default is `js-flipswitch-section`)`
2. data-flipswitch-class` is added to element wrapper as modifier class`
3. element needs to be position: fixed``
4. every second section doesn't need to have data-flipswitch-class` - default class (and element clone) is available`
5. every element needs to have __it's own__ Flipswitch instance (and different sections and element classes)
6. __throttle__ is only available if useScroll is __false__ and value have to be in milliseconds
7. first section on page needs to have class js-flipswitch-section` but doesn't needs to have `data-flipswitch-class`` attr