Javascript Fire粒子效果不起作用？

时间：2017-10-04 14:28:42

标签： javascript jquery

我有以下javascript我希望在我的网站上使用，但它不起作用，有人可以查看并告诉我原因吗？感谢

我已从此网站https://codepen.io/anon/pen/wrrYZN

获取代码

我是Javascript的新手，这段代码似乎退出了我，但我需要它来进行项目。下面我也包含了我的基本html和css文件。提前谢谢你帮助我:)。

＆＃13;
＆＃13; 
var density = 90,
    speed = 2,
    winHeight = window.innerHeight,
    winWidth = window.innerWidth,
    start = {
        yMin: winHeight - 50,
        yMax: winHeight,
        xMin: (winWidth / 2) + 10,
        xMax: (winWidth / 2) + 40,
        scaleMin: 0.1,
        scaleMax: 0.25,
        scaleXMin: 0.1,
        scaleXMax: 1,
        scaleYMin: 1,
        scaleYMax: 2,
        opacityMin: 0.1,
        opacityMax: 0.4
    },
    mid = {
        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,
        opacityMax: 1
    },
    end = {
        yMin: -180,
        yMax: -180,
        xMin: -100,
        xMax: winWidth + 180,
        scaleMin: 0.1,
        scaleMax: 1,
        opacityMin: 0.4,
        opacityMax: 0.7
    };

function range(map, prop) {
    var min = map[prop + 'Min'],
        max = map[prop + 'Max'];
    return min + (max - min) * Math.random();
}

function sign() {
    return Math.random() < 0.5 ? -1 : 1;
}

function randomEase(easeThis, easeThat) {
    if (Math.random() < 0.5) {
        return easeThat;
    }
    return easeThis;
}

function spawn(particle) {
    var wholeDuration = (10 / speed) * (0.7 + Math.random() * 0.4),
        delay = wholeDuration * Math.random(),
        partialDuration = (wholeDuration + 1) * (0.2 + Math.random() * 0.3);
    TweenLite.set(particle, {
        y: range(start, 'y'),
        x: range(start, 'x'),
        scaleX: range(start, 'scaleX'),
        scaleY: range(start, 'scaleY'),
        scale: range(start, 'scale'),
        opacity: range(start, 'opacity'),
        visibility: 'hidden'
    });
    // Moving upward
    TweenLite.to(particle, partialDuration, {
        delay: delay,
        y: range(mid, 'y'),
        ease: randomEase(Linear.easeOut, Back.easeInOut)
    });
    TweenLite.to(particle, wholeDuration - partialDuration, {
        delay: partialDuration + delay,
        y: range(end, 'y'),
        ease: Back.easeIn
    });
    //Moving on axis X
    TweenLite.to(particle, partialDuration, {
        delay: delay,
        x: range(mid, 'x'),
        ease: Power1.easeOut
    });
    TweenLite.to(particle, wholeDuration - partialDuration, {
        delay: partialDuration + delay,
        x: range(end, 'x'),
        ease: Power1.easeIn
    });
    //opacity and scale
    partialDuration = wholeDuration * (0.5 + Math.random() * 0.3);
    TweenLite.to(particle, partialDuration, {
        delay: delay,
        scale: range(mid, 'scale'),
        autoAlpha: range(mid, 'opacity'),
        ease: Linear.easeNone
    });
    TweenLite.to(particle, wholeDuration - partialDuration, {
        delay: partialDuration + delay,
        scale: range(end, 'scale'),
        autoAlpha: range(end, 'opacity'),
        ease: Linear.easeNone,
        onComplete: spawn,
        onCompleteParams: [particle]
    });
}
window.onload = createParticle;

function createParticle() {
    var i, particleSpark;
    for (i = 0; i < density; i += 1) {
        particleSpark = document.createElement('div');
        particleSpark.classList.add('spark');
        document.body.appendChild(particleSpark);
        spawn(particleSpark);
    }
}
＆＃13; 
body {
    background-color: #13001C;
}
html, body {
    height: 100%;
    overflow: hidden;
}
.spark {
    background-color: #DE4A00;
    font-family: 'Helvetica', sans-serif;
    visibility: hidden;
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 30%;
    box-shadow: 0 0 5px #AB000B;
}
＆＃13; 
<!DOCTYPE html>

<head>
	
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


<script src="scripts/main.js"></script>
<script type="text/javascript" src="scripts/sparks.js"></script>



</body>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：3)

这是因为您尚未将TweenLite添加到项目中。

在您对其他脚本的引用下，将以下行添加到您的代码中。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

通过运行代码段来查看下面的工作示例。

var density = 90,
    speed = 2,
    winHeight = window.innerHeight,
    winWidth = window.innerWidth,
    start = {
        yMin: winHeight - 50,
        yMax: winHeight,
        xMin: (winWidth / 2) + 10,
        xMax: (winWidth / 2) + 40,
        scaleMin: 0.1,
        scaleMax: 0.25,
        scaleXMin: 0.1,
        scaleXMax: 1,
        scaleYMin: 1,
        scaleYMax: 2,
        opacityMin: 0.1,
        opacityMax: 0.4
    },
    mid = {
        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,
        opacityMax: 1
    },
    end = {
        yMin: -180,
        yMax: -180,
        xMin: -100,
        xMax: winWidth + 180,
        scaleMin: 0.1,
        scaleMax: 1,
        opacityMin: 0.4,
        opacityMax: 0.7
    };

function range(map, prop) {
    var min = map[prop + 'Min'],
        max = map[prop + 'Max'];
    return min + (max - min) * Math.random();
}

function sign() {
    return Math.random() < 0.5 ? -1 : 1;
}

function randomEase(easeThis, easeThat) {
    if (Math.random() < 0.5) {
        return easeThat;
    }
    return easeThis;
}

function spawn(particle) {
    var wholeDuration = (10 / speed) * (0.7 + Math.random() * 0.4),
        delay = wholeDuration * Math.random(),
        partialDuration = (wholeDuration + 1) * (0.2 + Math.random() * 0.3);
    TweenLite.set(particle, {
        y: range(start, 'y'),
        x: range(start, 'x'),
        scaleX: range(start, 'scaleX'),
        scaleY: range(start, 'scaleY'),
        scale: range(start, 'scale'),
        opacity: range(start, 'opacity'),
        visibility: 'hidden'
    });
    // Moving upward
    TweenLite.to(particle, partialDuration, {
        delay: delay,
        y: range(mid, 'y'),
        ease: randomEase(Linear.easeOut, Back.easeInOut)
    });
    TweenLite.to(particle, wholeDuration - partialDuration, {
        delay: partialDuration + delay,
        y: range(end, 'y'),
        ease: Back.easeIn
    });
    //Moving on axis X
    TweenLite.to(particle, partialDuration, {
        delay: delay,
        x: range(mid, 'x'),
        ease: Power1.easeOut
    });
    TweenLite.to(particle, wholeDuration - partialDuration, {
        delay: partialDuration + delay,
        x: range(end, 'x'),
        ease: Power1.easeIn
    });
    //opacity and scale
    partialDuration = wholeDuration * (0.5 + Math.random() * 0.3);
    TweenLite.to(particle, partialDuration, {
        delay: delay,
        scale: range(mid, 'scale'),
        autoAlpha: range(mid, 'opacity'),
        ease: Linear.easeNone
    });
    TweenLite.to(particle, wholeDuration - partialDuration, {
        delay: partialDuration + delay,
        scale: range(end, 'scale'),
        autoAlpha: range(end, 'opacity'),
        ease: Linear.easeNone,
        onComplete: spawn,
        onCompleteParams: [particle]
    });
}
window.onload = createParticle;

function createParticle() {
    var i, particleSpark;
    for (i = 0; i < density; i += 1) {
        particleSpark = document.createElement('div');
        particleSpark.classList.add('spark');
        document.body.appendChild(particleSpark);
        spawn(particleSpark);
    }
}
body {
    background-color: #13001C;
}
html, body {
    height: 100%;
    overflow: hidden;
}
.spark {
    background-color: #DE4A00;
    font-family: 'Helvetica', sans-serif;
    visibility: hidden;
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 30%;
    box-shadow: 0 0 5px #AB000B;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

答案 1 :(得分：0)

更改您的HTML代码：

<!DOCTYPE html>

<head>

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script type="text/javascript" src="scripts/sparks.js"></script>
</body>

它会起作用。

相关问题
最新问题