@bornfight/flipswitch

Flipswitch.js - DEMO

Pure ES6 library for clipping fixed positioned elements on scroll

!GitHub last commit

🔨️ Why !start with why

- allows to clip fixed elements trough sections on scroll
- it's simple to use
- lightweight (minified ~8kb)
- fast and customizable
- no __dependencies__

📦 Getting Started

- 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

`

💎 Customization

##### 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
});
`

✅ Properties

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

🚀 Useful to know

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