How to create a tween-lite spark animation to banner image?

Question

I have provided a codepen snippet of a spark animation using tween-lite.

Spark animation Example

I have tried adding banner image and content area to snippet.I want spark effect only in "bannner" portion. Dont want animation in content portion.But it didn't work. Anyone please help me to add spark to banner potion. Here is my code

Spark animation after adding banner and content

var density = 70,
    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;

}
.banner{
    background-image:url('https://static.pexels.com/photos/36487/above-adventure-aerial-air.jpg');
  height:500px;
}
.content{
  height:500px;;
  backgroud-color:#fff;
}
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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="banner"></div>
<div class="content">
  <h2>Sample content</h2>
</div>

Answer 1

Well, you are missing with this.

rather appending spark animation to body

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

append to banner div ( i convert .banner class to #banner id)

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

this hack works fine, i guess its a issue of zIndex for more flexibility add z-index value higher than other elements to .spark class

working example : http://codepen.io/anon/pen/ZBPzpK