🔨️ Why
- 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
import Flipswitch from "@bornfight/flipswitch";
@import "~flipswitch/src/scss/flipswitch.scss";
<link rel="stylesheet" href="flipswitch.css">
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>
- 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
- 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
});
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 |
- every section needs to have
data-flipswitch-class
(look 4.) and section class (default is js-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 have data-flipswitch-class
attr