Html 如何为横幅图像创建tween-lite spark动画？

我提供了一个使用tween lite的spark动画的代码笔片段

我已经尝试将横幅图像和内容区域添加到代码段中。我只想在“bannner”部分使用spark效果。不希望在内容部分使用动画。但它不起作用。任何人请帮我在旗帜药水中加入火花。这是我的密码

var密度=70，
速度=2，
winHeight=window.innerHeight，
winWidth=window.innerWidth，
开始={
yMin:winHeight-50，
yMax:winHeight，
xMin:（winWidth/2）+10，
xMax：（winWidth/2）+40，
scaleMin:0.1，
标度最大：0.25，
scaleXMin:0.1，
scaleXMax:1，
scaleYMin:1，
规模最大：2，
opacityMin:0.1，
不透明度最大值：0.4
},
中期={
yMin:winHeight*0.4，
yMax:winHeight*0.9，
xMin:winWidth*0.1，
xMax:winWidth*0.9，
scaleMin:0.2，
scaleMax:0.8，
opacityMin:0.5，
不透明度最大值：1
},
结束={
yMin:-180，
yMax:-180，
xMin:-100，
xMax:winWidth+180，
scaleMin:0.1，
scaleMax:1，
opacityMin:0.4，
不透明度最大值：0.7
};
功能范围（地图、道具）{
var min=map[prop+'min']，
最大值=贴图[prop+'max']；
返回min+（max-min）*Math.random（）；
}
函数符号（）{
return Math.random（）<0.5？-1:1；
}
函数randomEase（easeThis，easeThat）{
if（Math.random（）<0.5）{
归还；
}
归还此文件；
}
函数繁殖（粒子）{
变量wholeDuration=（10/速度）*（0.7+数学随机（）*0.4），
delay=wholeDuration*Math.random（），
部分持续时间=（整体持续时间+1）*（0.2+数学随机（）*0.3）；
TweenLite.set（粒子{
y：范围（从“y”开始），
x：范围（从“x”开始），
scaleX:range（从“scaleX”开始），
scaleY:range（从“scaleY”开始），
比例：范围（从“比例”开始），
不透明度：范围（开始“不透明度”），
可见性：“隐藏”
});
//向上移动
TweenLite.至（颗粒、部分固化、{
延迟：延迟，
y：范围（中间“y”），
轻松：随机轻松（Linear.easeOut，Back.easeInOut）
});
TweenLite.to（粒子、整体持续时间-部分持续时间）{
延迟：部分持续+延迟，
y：范围（结束，“y”），
放松：回来，放松
});
//在X轴上移动
TweenLite.至（颗粒、部分固化、{
延迟：延迟，
x：范围（中间，'x'），
ease:Power1.easeOut
});
TweenLite.to（粒子、整体持续时间-部分持续时间）{
延迟：部分持续+延迟，
x：范围（结束，'x'），
ease:Power1.easeIn
});
//不透明度和比例
partialDuration=wholeDuration*（0.5+Math.random（）*0.3）；
TweenLite.至（颗粒、部分固化、{
延迟：延迟，
比例：范围（中间“比例”），
autoAlpha：范围（中间，“不透明度”），
轻松：线性。轻松无
});
TweenLite.to（粒子、整体持续时间-部分持续时间）{
延迟：部分持续+延迟，
比例：范围（结束，“比例”），
autoAlpha:范围（结束，“不透明度”），
ease:Linear.ease无，
完成：产卵，
onCompleteParams:[粒子]
});
}
window.onload=createParticle；
函数createParticle（）{
变量i，particleSpark；
对于（i=0；i<密度；i+=1）{
particleSpark=document.createElement（'div'）；
particleSpark.classList.add（'spark'）；
文件.正文.附件（particleSpark）；
产卵（颗粒公园）；
}
}

正文{
背景色：#13001C；
}
.横幅{
背景图像：url（'https://static.pexels.com/photos/36487/above-adventure-aerial-air.jpg');
高度：500px；
}
.内容{
高度：500px；；
背景颜色：#fff；
}
html，正文{
身高：100%；
溢出：隐藏；
}
.火花{
背景色：#DE4A00；
字体系列：“Helvetica”，无衬线；
可见性：隐藏；
位置：绝对位置；
宽度：4px；
高度：4px；
边界半径：30%；
盒影：0 0 5px#AB000B；
}

样本含量

好吧，你没有这个

而是将spark动画附加到实体

 document.body.appendChild(particleSpark);
    spawn(particleSpark);

附加到banner div（我将.banner类转换为#banner id）

这种方法很好用，我想这是zIndex的问题，因为在.spark类中添加比其他元素更高的z索引值更灵活

---

工作示例：

Anytime friend:）

document.getElementById("banner").appendChild(particleSpark);
    spawn(particleSpark);