CodePenで見つけた下記のアニメーションをWordPressに読み込みたい
失礼します。本当に初歩的な質問なのですが、
CodePenで見つけた、蛍のようなオブジェクトがふわふわ舞うようなエフェクトをWordPressに取り入れたいのですが全くうまくいきません。
function RN(x){
return Math.random()*x;
}
// lower total if your computer is bad
var total = 250 ;
var w = window.innerWidth;
var h = window.innerHeight;
var target = document.getElementById('container');
for (i=0; i<total; i++){
var e = document.createElement('div');
e.className = "dot";
e.opacity = 0;
e.style.left = RN(w)+'px';
e.style.top = RN(h)+'px';
target.appendChild(e);
animm(e);
}
function animm(elm){
TweenMax.killTweensOf(elm);
TweenMax.to(elm, (RN(80))+40, {
bezier:{
curviness:3,
values:[
{left:RN(w), top:RN(h)},
{left:RN(w), top:RN(h)}
]
},
onComplete:function(){
TweenMax.delayedCall(RN(2), animm, [elm]);
}
});
TweenMax.to(elm, (RN(4)+2),{
force3D:"auto",
opacity:RN(.7)+.1,
repeat:-1,
scale:RN(1.25)+.25,
yoyo:true,
ease:Bounce.easeInOut
});
};
img{
left:50%;
top:50%;
position:absolute;
}
body{
background-color:black;
}
html, body, #container {
width:100%;
height:100%;
}
.dot{
width:2px;
height:2px;
position:absolute;
background:#0ff;
box-shadow:0px 0px 10px 2px #8ff;
border-radius: 50% 50%;
z-index:2;
}
<div id="container"></div>
となっています。どのように改変すればいいでしょうか?
よろしくお願いします。