@bornfight/flipswitch
v2.0.1
Published
flipswitch.js - pure javascript solution for clipping elements inside DOM
Downloads
38
Readme
🔨️ 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
import Flipswitch from "@bornfight/flipswitch";
SCSS
@import "~flipswitch/src/scss/flipswitch.scss";
or CSS
<link rel="stylesheet" href="flipswitch.css">
💎 Customization
HTML markup
data-flipswitch-class
doesn't need to be different for every section (could be something like dark and light)
<p class="js-flipswitch-element">
Flipswitch element
</p>
<section class="js-flipswitch-section" data-flipswitch-class="first-section">
...
</section>
<section class="js-flipswitch-section" data-flipswitch-class="second-section">
...
</section>
<section class="js-flipswitch-section" data-flipswitch-class="fourth-section">
...
</section>
<!-- default section -->
<section class="js-flipswitch-section">
...
</section>
Basic usage
- element needs to have
js-flipswitch-element
class - section needs to have
js-flipswitch-section
class anddata-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
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
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
- every section needs to have
data-flipswitch-class
(look 4.) and section class (default isjs-flipswitch-section
) data-flipswitch-class
is added to element wrapper as modifier class- element needs to be
position: fixed
- every second section doesn't need to have
data-flipswitch-class
- default class (and element clone) is available - every element needs to have it's own Flipswitch instance (and different sections and element classes)
- throttle is only available if useScroll is false and value have to be in milliseconds
- first section on page needs to have class
js-flipswitch-section
but doesn't needs to havedata-flipswitch-class
attr