CODEWITHSUNDEEP
javascriptjquery
Danial Bagheri
Danial Bagheri

Reputation: 128

Javascript Fire particle effect is not working?

I have got the following javascript which I wish to use on my website, but it doesn't work, can somebody check this and tell me why? Thanks

I have taken the code from this website https://codepen.io/anon/pen/wrrYZN

I am new to Javascript and this code seems quit advance to me but I need it for a project. Below I have included my basic html and css file too. Thank you in advance for helping me :)

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;
}
<!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>

Upvotes: 0

Views: 232

Answers (2)

Aryan
Aryan

Reputation: 143

Change your html code :

<!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>

It will work.

Upvotes: 0

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

This is because you have not added TweenLite to your project.

Add the following line to your code under your reference to the other scripts.

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

See working example below by running the code snippet.

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>

Upvotes: 3

Related Questions