anim-scroll
Version:
Small library to animate your web pages
125 lines • 2.1 kB
JSON
{
"navBar": true,
"navArrows": true,
"autoScroll": false,
"infinite": false,
"scrollSensitivity": 50,
"delayBetweenSlides": 400,
"whereToBegin": 0,
"hints": [],
"hintStyle": {
"color": "#fafafa",
"fontSize": "16px",
"transition": ".2s ease",
"indent": "10px"
},
"targetStyle": {
"display": "flex",
"justifyContent": "center",
"alignItems": "center"
},
"slideStyle": {
"width": "100%",
"height": "100%"
},
"arrowStyle": {
"wrapper": {
"display": "block"
},
"arrows": {
"shape": {
"width": "0",
"height": "0",
"border-left": "18px solid transparent",
"border-right": "18px solid transparent",
"border-top": "34px solid gray"
},
"usual": {
"transition": ".2s",
"trms": 200,
"transform": "scale(1)"
},
"hover": {
"transition": ".2s",
"trms": 200,
"transform": "scale(1.2)"
},
"active": {
"transition": ".2s",
"trms": 200,
"transform": "scale(0.8)"
}
},
"arrowsPositions": {
"next": {
"bottom": "2vh",
"right": "10px"
},
"prev": {
"top": "2vh",
"right": "10px"
}
}
},
"navBarStyle": {
"wrapper": {
"position": "absolute",
"direction": "column",
"right": "22px"
},
"dots": {
"shape": {
"width": "12px",
"height": "12px",
"border": "6px solid gray",
"borderRadius": "50%",
"boxSizing": "border-box"
},
"usual": {
"transition": ".15s",
"trms": 150,
"transform": "scale(1)"
},
"hover": {
"transition": ".15s",
"trms": 150,
"transform": "scale(1.2)"
},
"active": {
"transition": ".15s .7s",
"trms": 850,
"transform": "scale(1.3)"
},
"wrapper": {
"marginTop": "12px",
"marginBottom": "12px"
}
}
},
"slideAnimation": {
"active": [
{
"top": "0%",
"transition": "0s",
"trms": 0
},
{
"top": "-100%",
"transition": ".8s ease",
"trms": 800
}
],
"next": [
{
"top": "100%",
"transition": "0s",
"trms": 0
},
{
"top": "0%",
"transition": ".8s ease",
"trms": 800
}
]
}
}