Splitting.js--a JavaScript microlibrary for splitting targets
Splitting is a JavaScript microlibrary with a collection of small built-in plugins designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more!
In this demo,I tried with default characters and image cells plugins.
Splliting official Github and more documents here
Step1:
link cdn in the head(that's the easiest way or you can install with npm)
Step2:
html
the target you want split add the attribute "data-splitting".
Splitting will automatically add a
splitting class to the targetted element after it's been run. Each plugin will add their own classes to splits/parent as needed ( char for chars, word for words, etc. )
"data-row" and "data-colums" are attributes of grid setting.
Step3:
css animation parts
After splitting the text, each character named char animates with delay.
Step4:
Js
Basically apply the splliting.js with Splitting().
For more specific settings, target is the elements of willing split,and by is the methods of splitting,such as words,chars,lines,items,grid,cols,rows and cells.
Here I tried the JS with image cells.
cellrow is the number of row and cellcolumn is the number of column.
cell is the total cells number.
With the loop from first cell, change the opacity with animations.
And another pure css animation method example below:
Js :
CSS:
animation parts
The demo source DOWNLOAD
