Laxxx.js ---a light weight Plugin to create animation when scrolling

-

It's a imple & light weight (<3kb gzipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll! 
How I create this animated page with the Plugin?

 Step1: 

 Link the lax.js file to your website ,which is the eaiest way to apply. Or with the npm install to apply especially with React and so on.

 Step2:
JS 
Add the script in the body  for init the plugin.

 Step3:
HTML
Select the tags which you want to add animations and attach the classname and attributes.


Set the classname to lax to point the animation tags.
And data-lax-preset is the default animation setting which is easier and quick apply. Or you can customize the animation attributes with custom data setting.

 Supported preset values from official:
Default Strength
lingern/a
lazy100
eager100
lazy100
slalom50
crazyn/a
spin360
spinRev360
spinIn360
spinOut360
blurInOut40
blurIn40
blurOut40
fadeInOutn/a
fadeInn/a
fadeOutn/a
driftLeft100
driftRight100
leftToRight1
rightToLeft1
zoomInOut0.2
zoomIn0.2
zoomOut0.2
swing30
speedy30
TransformKey
opacitydata-lax-opacity
translatedata-lax-translate
translateXdata-lax-translate-x
translateYdata-lax-translate-y
scaledata-lax-scale
scaleXdata-lax-scale-x
scaleYdata-lax-scale-y
skewdata-lax-skew
skewXdata-lax-skew-x
skewYdata-lax-skew-y
rotatedata-lax-rotate
rotateXdata-lax-rotate-x
rotateYdata-lax-rotate-y
Transform
Default Strength
lingern/a
lazy100
eager100
lazy100
slalom50
crazyn/a
spin360
spinRev360
spinIn360
spinOut360
blurInOut40
blurIn40
blurOut40
fadeInOutn/a
fadeInn/a
fadeOutn/a
driftLeft100
driftRight100
leftToRight1
rightToLeft1
zoomInOut0.2
zoomIn0.2
zoomOut0.2
swing30
speedy30
If you just wanna change the specific value of preset. Just add the value you want after the preset name after the "-".Such as..

 Supported attributes keys from official:
Transforms
Key
opacitydata-lax-opacity
translatedata-lax-translate
translateXdata-lax-translate-x
translateYdata-lax-translate-y
scaledata-lax-scale
scaleXdata-lax-scale-x
scaleYdata-lax-scale-y
skewdata-lax-skew
skewXdata-lax-skew-x
skewYdata-lax-skew-y
rotatedata-lax-rotate
rotateXdata-lax-rotate-x
rotateYdata-lax-rotate-y
FilterKey
brightnessdata-lax-brightness
contrastdata-lax-contrast
hue-rotatedata-lax-hue-rotate
blurdata-lax-blur
invertdata-lax-invert
saturatedata-lax-saturate
grayscaledata-lax-grayscale
Filter
Key
opacitydata-lax-opacity
translatedata-lax-translate
translateXdata-lax-translate-x
translateYdata-lax-translate-y
scaledata-lax-scale
scaleXdata-lax-scale-x
scaleYdata-lax-scale-y
skewdata-lax-skew
skewXdata-lax-skew-x
skewYdata-lax-skew-y
rotatedata-lax-rotate
rotateXdata-lax-rotate-x
rotateYdata-lax-rotate-y
Filters (note - these may be unperformant on low powered machines)
Key
brightnessdata-lax-brightness
contrastdata-lax-contrast
hue-rotatedata-lax-hue-rotate
blurdata-lax-blur
invertdata-lax-invert
saturatedata-lax-saturate
grayscaledata-lax-grayscale
FilterKey
background positiondata-lax-bg-pos
background position-xdata-lax-bg-pos-x
background position-ydata-lax-bg-pos-y
Filter
Key
brightnessdata-lax-brightness
contrastdata-lax-contrast
hue-rotatedata-lax-hue-rotate
blurdata-lax-blur
invertdata-lax-invert
saturatedata-lax-saturate
grayscaledata-lax-grayscale
Other
Key
background positiondata-lax-bg-pos
background position-xdata-lax-bg-pos-x
background position-ydata-lax-bg-pos-y
x
Key
background positiondata-lax-bg-pos
background position-xdata-lax-bg-pos-x
background position-ydata-lax-bg-pos-y
For more attributes and values setting, go to Github

 My demo code Github

Popular posts from this blog

Fancyapps — easily build overlay windows with carousel

-
Image
  I used to play around with these gallery boxes with old versions. Now the Fancybox is the 4th version with more functions, including plugins, events, options. They even provided how to use React easily demo. I remember when I was learning Javascript, the fancy project is building a carousel, it took some time and logical understanding, but it’s a good way to learn the logic JS though. But for now, I will be grasping the eyeball by this fancy Javascript library. Since it’s a fast-developing world, the result should be precise, accurate, and fast, right? Fanyapps includes  Fancybox, Carousel, and Panzoom . Fancybox is a flex gallery container, which is touch and mobile optimized with swipe, drag, and pinch-to-zoom gestures. Carousel is a display place with smooth animations and more functions inside. Panzoom is a customized zooming function. They combined smoothly and more functionally. Official site Playaround the demo here Step1: import the library with npm or using CDN I li...
Read more

How to build API and sell on Rapid API

-
Image
  Photo by  Fahim Muntashir  on  Unsplash As a front-end developer, you have to grasp the knowledge about how to fetch the API. But there is a question coming, where the API comes from? Why I can fetch data with a simple URL link and a private API key for some of them. Occasionally, I found a video about it. The curiosity leads me to find out further. Here is the  link . I am gonna record what I learned. F irst, you have to make an app with node.js. Make sure Node.js is installed on the PC. In the project,  npm install express request request-promise nodemon In the package.json file, change the scripts for running. so, you can run the terminal with  npm run dev  or  yarn dev  to run the live server. In the  index.js  file, we begin to build the code. require express and request. the port default is 5000 the home page is the sentence: Welcome to... When the port is 5000, the app listens and runs. For doing a  ScraperAPI , I...
Read more

Meet Typed.js — A JavaScript Typing Animation Library

-
Image
  Use this cool animation library for your next JavaScript project. Typed.js is a JavaScript animation library. Any string can type customer animated with content, speed, and so on. The most common use as I notice is for a landing page that looks modern in style. Official site: Typed.js Another demo made with love by Matt Boldt. # With NPM npm install typed.js # With Yarn yarn add typed.js # With Bower… mattboldt.com Step1: import js library with npm, yarn, bower, or CDN npm install typed.js yarn add typed.js bower install typed.js or <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script> Step2: HTML The content is included in the <div> The place content actually is typing is the <span> Step3: JS fire up the library with  new Typed('id',options) Customization: stringsElement: the content want to show typeSpeed: the speed of typing backDelay:backDelay time before backspacing in milliseconds fadeOut: fade out animation instead of ba...
Read more