fullib-js v1.6.2
FULLIB-JS
Multiple animation Library Only native JS
https://dev-florian.github.io/fullib-js/
FUTURE... ( priority )
- THREE JS ANIMATION ( 3D )
- Optimisations
- New anim options ( trigger elem on the top / middle / bottom )
- New split text animation
News 1.6.1
- Animation Added data attributes to HTML and new options
News 1.6.0
- Animation Detection scroll now take full height of element ( don't stop at the top of the element )
- Animation Added new function for choosing transition
- generateBulb Correction of bulb was not totally in the div
- lottieweb Remove depedency
- createAnimationTo Remove function ( old was with gsap )
- loadSplitText Remove function ( old was with gsap )
- loadScrollAnimation Remove function ( old was with gsap )
- share button Remove function
News 1.5.4
- Menu Added direction
- Menu3 This Menu has been removed
- Cursor Placement is now on the middle of the cursor ( it was on top-left )
- Cursor Added new options : removeOriginalCursor ( true / false ) to force not removing the default cursor
News 1.5.3
- Animation Correction bug when scroll option was set to false
- Animation Correction bug when animation was finished and the position was not clean ( eg: finish on -2px )
- General improvment New better function to trigger ViewPort element
News 1.5.1
- Animation Correction bug where the current scroll position was not loaded on pageLoad
News 1.5
### new function : animation ### new function : customScrollBar
- Correction generate-bulb
- Added options for cursor
- Correction bugs
News 1.4.0
- Correction bugs
- Rewrite splittext
- New effect : hover
- New variables :
- delayBetweenIteration
- delayBeforeFirstStart ( replace old : delay )
delayBetweenletters
### Update : cursor
- Added hoverSize variable
- 'type' now accept custom radius ( 'round' / 'square' / '35%', '36%' etc )
Installation
Use yarn :
yarn add fullib-js
NEW animation Creation
How To use ?
import {animation} from "fullib-js";
//BASIC EXAMPLE animation on scroll
animation({
classNames: '.scroll-lefttoright',
scroll: true, //default true
start: '0%', //default 0%
end: '100%', //default 100%
measure: 'px', //default px
from: {
x: -100
},
to: {
x: 0,
}
});
<div class="scroll-lefttoright">I AM A TEST</div>
Other example ( anim without scroll trigger but on viewport )
import {animation} from "fullib-js";
//BASIC EXAMPLE
animation({
classNames: '.scroll-lefttoright',
scroll: false,
delay: 0, //default 0
duration: 500, //default 500
measure: 'px', //default px
isScrollMobile: false, //default value as 'scroll'
mobileBreakpoint: 991, //default 991
from: {
x: -100
},
to: {
x: 0,
}
});
<div class="scroll-lefttoright">I AM A TEST</div>
Since 1.6.1, you can also use data attributes :
animation({
classNames: '.scroll-lefttoright',
measure: 'px', //default px
});
<div class="scroll-lefttoright" data-scroll="true" data-delay="200" data-from-y="0" data-to-y="50">I AM A TEST</div>
data-scroll
data-scroll-mobile
data-measure
data-timing-function
data-start
data-end
data-delay
data-duration
data-from-opacity
data-to-opacity
data-from-y
data-to-y
data-from-x
data-to-x
data-from-scale
data-to-scale
data-from-rotate
data-to-rotate
NEW customScrollBar
How To use ?
import {customScrollBar} from "fullib-js";
//BASIC EXAMPLE
customScrollBar({
currentDiv: '*',
width: 8,
border: '1px solid #000', //ONLY WORK ON WEBKIT : chrome / edge
borderRadius: '25%', //ONLY WORK ON WEBKIT : chrome / edge
scrollbarBackground: 'gray',
scrollbarColor: 'white',
});
TextSplit Creation
How To use ?
import {splitText} from "fullib-js";
//BASIC EXAMPLE
splitText({
animationName: 'split5',
parent: '.split5',
className: 'letter',
animation: {
keyframe: {
from: {
transform: 'scale(1.5)'
},
to: {
transform: 'scale(1)'
}
}
}
});
<div class="split5">I AM A TEST</div>
Other example
import {splitText} from "fullib-js";
//ADVANCED EXEMPLE
splitText({
animationName: 'split4',
parent: '.split4',
className: 'letter',
animation: {
iterations: 'infinite',
hover: true,
word: true,
delayBeforeFirstStart: 0, // duration of animation letter
delayBetweenLetters: 10, // delay betwen each anim letter
delayBetweenIteration: 1000, // delay between full anim loop
smooth: '50%',
keyframe: {
from: {
color: 'blue'
},
'40%': {
color: 'purple'
},
to: {
color: 'tomato'
}
}
}
});
<div class="split4">I AM A TEST</div>
MOUSEMOOVE
When mooving the mouse, it mooves the content ( related to mouse position )
How to use ?
Easy example
import {mousemove} from "fullib-js";
mousemove();
<div class="firstcard mousemove" data-speed="3">
<img width="50" height="50" src="https://images.freeimages.com/images/large-previews/08e/up-close-personal-2-1359478.jpg">
</div>
CURSOR
Display a custom cursor
How To use ?
import {cursor} from "fullib-js";
cursor({
activeFirstCursor: true, //essential
activeSecondCursor: false, //essential
currentDiv: "*", //essential
zoomOnDiv: ".tohover",
removeOriginalCursor: true,
removeAt: 991,
firstCursor: {
size: 10,
hoverSize: 15,
backgroundColor: "#000000",
border: "1px solid #000000",
type: 'square', // round or square
transition: "top .1s, left .1s, width .5s, height .5s",
}
secondCursor: {
size: 10,
hoverSize: 15,
backgroundColor: "#000000",
border: "1px solid #000000",
type: 'square', // round or square
transition: "top .25s, left .25s, width .7s, height .7s",
}
});
Change color of bg if in viewport
change-background
How to use ?
Easy example
import {changeBackground} from "fullib-js";
changeBackground({
backgroundColor: "#ffd5ce", //bgColor
currentDiv: ".change-background", //divInViewPort
animation: "1s linear" //Animation
});
DRAWSVG
Put by default this class on your div :
drawsvg
How To use ?
import {drawSvg} from "fullib-js";
drawSvg();
REVEAL
Put by default one class on your div.
reveal1
reveal2
reveal3
reveal4
reveal5
reveal6
reveal7
reveal8
reveal9
How To use ?
Easy example for 'reveal1'
import {reveal1} from "fullib-js";
reveal1();
<div class="reveal1 d-inline-block">REVEALING TEXT</div>
BUTTONS
How To use ?
Put by default one class on your 'a' balise.
button1
button3
button4
button5
button6
button7
button8
button9
button10
button11
button12
button13
button14
button15
Easy example for 'button1'
import {button1} from "fullib-js";
button1();
<a class="button1 text-center" href="https://www.npmjs.com/package/animation-felix" target="_blank">CLICK ME</a>
MENU
How to use ?
Put by default one class on your div.
menu1
menu2
menu3
menu4
menu5
Easy example for 'menu1'
import {menu1} from "fullib-js";
menu1({
direction: 'bottom-left' // top-left top-right bottom-left bottom-right
});
<nav class="menu1 fixed-top navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<div class="nav-but-wrap">
<div class="menu-icon hover-target">
<span class="menu-icon__line menu-icon__line-left"></span>
<span class="menu-icon__line"></span>
<span class="menu-icon__line menu-icon__line-right"></span>
</div>
</div>
</button>
</div>
</nav>
<div id="main-navigation-nav" class="collapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item level-1 text-center active" itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a class="nav-link link-level-1 active" href="" id="navbar-link-14" title="Accueil" data-toggle="preloader" itemprop="url">
<span itemprop="name">Accueil</span>
</a>
</li>
<li class="nav-item level-1 dropdown text-center">
<a class="nav-link link-level-1" href="" id="navbar-link-7" title="Offre de soins" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Offre de soins
</a>
</li>
<li class="nav-item level-1 text-center text-lg-left"itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a class="nav-link link-level-1 text-center" href="" id="navbar-link-9" title="Patients" data-toggle="preloader" itemprop="url">
<span itemprop="name">Patients</span>
</a>
</li>
<li class="nav-item level-1 dropdown text-center">
<a class="nav-link link-level-1 " href="" id="navbar-link-11" title="Carrière" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Carrière
</a>
</li>
</ul>
</div>
WEBGL
Blotter effect ( text distortion on scroll )
List of effects
liquid
liquid-2
rolling
rolling-2
rolling-3
rolling-4
rolling-5
How to use ?
Easy example for 'liquid'
import {blotter} from "fullib-js";
blotter();
<div class="blotter" data-blotter-effect="liquid" data-blotter-font="'Russo One', sans-serif" data-blotter-size="120" data-blotter-color="#c69f64">ABC</div>
Warning : -You have to put the blotter className to your element -You have to only put a valid string in the div -The font must be loaded before the plugin
LOTTIE
https://lottiefiles.com/community
How to use ?
Easy example
import { lottie } from "fullib-js";
lottie();
<div class="mt-5 mb-5 lottie" data-lottie-scroll="false" data-lottie-click="true" data-lottie-hover="false" data-lottie-file="../../lottie/button.json" style="width: 150px;"></div>
IMAGEBLOB
Add a round blob effect to your image
How to use ?
Easy example
import {imageBlob} from "fullib-js";
imageBlob();
<img class="blobed" alt="blob" width="400" height="400" src="https://outsmartlabs.com/medias/images/redcharlie-fCRFjmM8Ll4-unsplash.jpg">
Warning : Don't forget to add with and height attribute ( default take 400 x 400 )
GENERATE BULBS
Add a round blob effect to your image
How to use ?
Easy example
import {generateBulb} from "fullib-js";
generateBulb({
currentDiv: ".generate-bulb", //default
referTo: ".mycontainer", //parentDiv ( default take the parent )
backgroundColor: "transparent",
minSize: 5,
maxSize: 30,
border: "1px solid #1a2b63",
numberOfBulb: 49, // number of elem to create
type: 'round', //round or square
classNames: ['round', 'lax-parallax-right'], // add classes for all elems created
fromLeft: -200, // if animation on better to see element arrived on screen cutted
differentSpeed: true //only available for lax-parallax-right and if numberOfBulb < 50
});
<div class="generate-bulb"></div>
ORBIT
Add an orbit on your page !
How to use ?
Easy example
import {orbit} from "fullib-js";
orbit({
currentDiv: '.circlewhite',
position: 'right-top', //right-top right-bottom left-top left-bottom
indexPixel: 150,
inverseRotation: true,
line: {
display: true,
borderColor: "#ffffff",
borderSize: 3,
size: 400
},
bulb: {
display: true,
backgroundColor: '#ffffff',
color: '#ffffff',
size: 50
}
});
<div class="circlewhite"></div>
PARALLAX
Add an orbit on your page !
How to use ?
Easy example
import {parallax} from "fullib-js";
parallax({
currentDiv: ".parallax",
force: 8,
height: 250,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundDirection: 'center', //left center right 0% 50%.....
responsive: [{
mediaQuery: 767,
force: 2,
height: 100,
}
]
});
<div class="parallax" data-backgroundImage="./img/parallax.jpg"></div>
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
8 months ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago