demo1 demo2 demo3
Introducing the script to your page
<script src="[???]/coolestBackground.min.js"></script>If you are using es6 ,webpack ,react or etc. ,just add one sentence in the script
export {coolestBackground}- set css like this:
#example{
position:absoulte;
width:100%;
height:100%;
}and in your script
<script>coolestBackground(document.getElementById('example'))</script>API
- size and postion are setted by css
coolestBackground(dom[,config])
config: {
mode:{
display: ['canvas'|'svg'|'webgl'],
move:[boolean] //in the center or follow your mouse
},
MESH :{
width: [number],
height: [number],
depth: [number],
segments: [number],
slices: [number],
xRange: [number],
yRange: [number],
zRange: [number],
ambient: [color],
diffuse: [color],
speed: [number],
},
LIGHT : {
count: [number],
xyScalar: [number],
zOffset: [number],
ambient: [color],
diffuse: [color],
speed: [number],
gravity: [number],
dampening: [number],
minLimit: [number],
maxLimit: [number],
minDistance: [number],
maxDistance: [number],
autopilot: [boolean] // the light auto fly anywhere
draw: [boolean] // show the small circle around your mouse
}
}EXAPMLE
- Here are 3 examples in the files to tell you how to set configs and set 4 backgounds in one page.
OTHER
- The project is based on flat-surface-shader ,majority parameters can be tried in the matthew.wagerfield.com/flat-surfac…
本文对你有帮助？欢迎扫码加入前端学习小组微信群：
