Animation in the background – html/css

I want the animation to play in the background of two different sections.

I have the following code:

// Particles Animation (Hero Section)
document.addEventListener("DOMContentLoaded", function(event) {
  var canvas = document.getElementById('nokey'),
   can_w = parseInt(canvas.getAttribute('width')),
   can_h = parseInt(canvas.getAttribute('height')),
   ctx = canvas.getContext('2d');

// console.log(typeof can_w);

var ball = {
      x: 0,
      y: 0,
      vx: 0,
      vy: 0,
      r: 0,
      alpha: 1,
      phase: 0
   },
   ball_color = {
       r: 207,
       g: 255,
       b: 4
   },
   R = 2,
   balls = [],
   alpha_f = 0.03,
   alpha_phase = 0,
    
// Line
   link_line_width = 0.8,
   dis_limit = 260,
   add_mouse_point = true,
   mouse_in = false,
   mouse_ball = {
      x: 0,
      y: 0,
      vx: 0,
      vy: 0,
      r: 0,
      type: 'mouse'
   };

// Random speed
function getRandomSpeed(pos){
    var  min = -1,
       max = 1;
    switch(pos){
        case 'top':
            return [randomNumFrom(min, max), randomNumFrom(0.1, max)];
            break;
        case 'right':
            return [randomNumFrom(min, -0.1), randomNumFrom(min, max)];
            break;
        case 'bottom':
            return [randomNumFrom(min, max), randomNumFrom(min, -0.1)];
            break;
        case 'left':
            return [randomNumFrom(0.1, max), randomNumFrom(min, max)];
            break;
        default:
            return;
            break;
    }
}
function randomArrayItem(arr){
    return arr[Math.floor(Math.random() * arr.length)];
}
function randomNumFrom(min, max){
    return Math.random()*(max - min) + min;
}
console.log(randomNumFrom(0, 10));
// Random Ball
function getRandomBall(){
    var pos = randomArrayItem(['top', 'right', 'bottom', 'left']);
    switch(pos){
        case 'top':
            return {
                x: randomSidePos(can_w),
                y: -R,
                vx: getRandomSpeed('top')[0],
                vy: getRandomSpeed('top')[1],
                r: R,
                alpha: 1,
                phase: randomNumFrom(0, 10)
            }
            break;
        case 'right':
            return {
                x: can_w + R,
                y: randomSidePos(can_h),
                vx: getRandomSpeed('right')[0],
                vy: getRandomSpeed('right')[1],
                r: R,
                alpha: 1,
                phase: randomNumFrom(0, 10)
            }
            break;
        case 'bottom':
            return {
                x: randomSidePos(can_w),
                y: can_h + R,
                vx: getRandomSpeed('bottom')[0],
                vy: getRandomSpeed('bottom')[1],
                r: R,
                alpha: 1,
                phase: randomNumFrom(0, 10)
            }
            break;
        case 'left':
            return {
                x: -R,
                y: randomSidePos(can_h),
                vx: getRandomSpeed('left')[0],
                vy: getRandomSpeed('left')[1],
                r: R,
                alpha: 1,
                phase: randomNumFrom(0, 10)
            }
            break;
    }
}
function randomSidePos(length){
    return Math.ceil(Math.random() * length);
}

// Draw Ball
function renderBalls(){
    Array.prototype.forEach.call(balls, function(b){
       if(!b.hasOwnProperty('type')){
           ctx.fillStyle = 'rgba('+ball_color.r+','+ball_color.g+','+ball_color.b+','+b.alpha+')';
           ctx.beginPath();
           ctx.arc(b.x, b.y, R, 0, Math.PI*2, true);
           ctx.closePath();
           ctx.fill();
       }
    });
}

// Update balls
function updateBalls(){
    var new_balls = [];
    Array.prototype.forEach.call(balls, function(b){
        b.x += b.vx;
        b.y += b.vy;
        
        if(b.x > -(50) && b.x < (can_w+50) && b.y > -(50) && b.y < (can_h+50)){
           new_balls.push(b);
        }
        
        // alpha change
        b.phase += alpha_f;
        b.alpha = Math.abs(Math.cos(b.phase));
        // console.log(b.alpha);
    });
    
    balls = new_balls.slice(0);
}

// loop alpha
function loopAlphaInf(){
    
}

// Draw lines
function renderLines(){
    var fraction, alpha;
    for (var i = 0; i < balls.length; i++) {
        for (var j = i + 1; j < balls.length; j++) {
           
           fraction = getDisOf(balls[i], balls[j]) / dis_limit;
            
           if(fraction < 1){
               alpha = (1 - fraction).toString();

               ctx.strokeStyle = 'rgba(150,150,150,'+alpha+')';
               ctx.lineWidth = link_line_width;
               
               ctx.beginPath();
               ctx.moveTo(balls[i].x, balls[i].y);
               ctx.lineTo(balls[j].x, balls[j].y);
               ctx.stroke();
               ctx.closePath();
           }
        }
    }
}

// calculate distance between two points
function getDisOf(b1, b2){
    var  delta_x = Math.abs(b1.x - b2.x),
       delta_y = Math.abs(b1.y - b2.y);
    
    return Math.sqrt(delta_x*delta_x + delta_y*delta_y);
}

// add balls if there a little balls
function addBallIfy(){
    if(balls.length < 20){
        balls.push(getRandomBall());
    }
}

// Render
function render(){
    ctx.clearRect(0, 0, can_w, can_h);
    
    renderBalls();
    
    renderLines();
    
    updateBalls();
    
    addBallIfy();
    
    window.requestAnimationFrame(render);
}

// Init Balls
function initBalls(num){
    for(var i = 1; i <= num; i++){
        balls.push({
            x: randomSidePos(can_w),
            y: randomSidePos(can_h),
            vx: getRandomSpeed('top')[0],
            vy: getRandomSpeed('top')[1],
            r: R,
            alpha: 1,
            phase: randomNumFrom(0, 10)
        });
    }
}
// Init Canvas
function initCanvas(){
    canvas.setAttribute('width', window.innerWidth);
    canvas.setAttribute('height', window.innerHeight);
    
    can_w = parseInt(canvas.getAttribute('width'));
    can_h = parseInt(canvas.getAttribute('height'));
}
window.addEventListener('resize', function(e){
    console.log('Window Resize...');
    initCanvas();
});

function goMovie(){
    initCanvas();
    initBalls(30);
    window.requestAnimationFrame(render);
}
goMovie();

// Mouse effect
canvas.addEventListener('mouseenter', function(){
    console.log('mouseenter');
    mouse_in = true;
    balls.push(mouse_ball);
});
canvas.addEventListener('mouseleave', function(){
    console.log('mouseleave');
    mouse_in = false;
    var new_balls = [];
    Array.prototype.forEach.call(balls, function(b){
        if(!b.hasOwnProperty('type')){
            new_balls.push(b);
        }
    });
    balls = new_balls.slice(0);
});
canvas.addEventListener('mousemove', function(e){
    var e = e || window.event;
    mouse_ball.x = e.pageX;
    mouse_ball.y = e.pageY;
    // console.log(mouse_ball);
});
});
document.addEventListener("DOMContentLoaded", function(event) {

  let getWindowDimensions = {
  width: 0,
  height: 0
};

const handleResize = () => {
    getWindowDimensions.width = window.innerWidth;
    getWindowDimensions.height = window.innerHeight;
  };

window.addEventListener('resize', handleResize());


function myFunc() { document.getElementById("makeWindowHeight").style.height = `${getWindowDimensions.height}px`;
}
 
myFunc();

console.log(getWindowDimensions);
});
canvas{
   z-index: -1;
  position: absolute;
    background-color: transparent;
    height: 100vh;
    padding: 0;
    margin:0;
}
<canvas id="nokey"></canvas> <!-- html of the animation -->
<section>
<h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus velit turpis, ornare eu ornare a, iaculis ac nibh. Praesent a aliquam eros. Donec blandit dictum libero ac varius. Quisque rhoncus et ante quis ultricies. Etiam nec mollis nunc. Praesent risus dui, aliquam a condimentum sed, rutrum in felis. Maecenas commodo finibus luctus. Sed lacinia ipsum facilisis lacinia maximus. Fusce pharetra egestas odio in euismod. Sed ut metus quam. Curabitur sit amet risus eget augue vehicula faucibus quis eget eros. Morbi consectetur commodo nulla, in rhoncus nunc consequat ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Maecenas egestas libero eget tincidunt malesuada. Sed pulvinar nulla risus, sed posuere enim fringilla sit amet. Donec neque lorem, iaculis eget ullamcorper quis, egestas vitae libero. Fusce vitae vulputate lacus, quis porta risus. Duis odio nibh, tristique vel nunc a, cursus tempus quam. Nam bibendum ipsum in mi varius, ut faucibus nunc tincidunt. Suspendisse volutpat ligula leo, vitae posuere nulla cursus in. Quisque rutrum, justo ultricies hendrerit viverra, eros arcu feugiat dui, ut varius quam ante eget tortor.

Nullam sit amet sapien nec odio aliquet pharetra. Ut justo ex, aliquet non bibendum nec, vulputate nec nibh. Ut semper eget felis sit amet feugiat. Proin condimentum ex lectus, at rutrum mauris vestibulum a. Praesent imperdiet eget erat ac venenatis. In commodo a orci non elementum. Integer ex massa, imperdiet non tortor vel, scelerisque porta lectus. Integer cursus tellus libero, et tempor arcu dignissim nec. Cras eleifend nisi nulla, nec dapibus neque consectetur sed. Duis molestie congue porta. Suspendisse viverra urna commodo pharetra venenatis. Quisque eget risus nec arcu fringilla iaculis eget quis nisl. Integer malesuada augue ac maximus ultricies. Sed congue mi nunc, quis viverra metus rhoncus malesuada. Etiam tristique viverra turpis sit amet fringilla. </h3>
</section>

<!-- Start new section -->
<section>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus velit turpis, ornare eu ornare a, iaculis ac nibh. Praesent a aliquam eros. Donec blandit dictum libero ac varius. Quisque rhoncus et ante quis ultricies. Etiam nec mollis nunc. Praesent risus dui, aliquam a condimentum sed, rutrum in felis. Maecenas commodo finibus luctus. Sed lacinia ipsum facilisis lacinia maximus. Fusce pharetra egestas odio in euismod. Sed ut metus quam. Curabitur sit amet risus eget augue vehicula faucibus quis eget eros. Morbi consectetur commodo nulla, in rhoncus nunc consequat ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Maecenas egestas libero eget tincidunt malesuada. Sed pulvinar nulla risus, sed posuere enim fringilla sit amet. Donec neque lorem, iaculis eget ullamcorper quis, egestas vitae libero. Fusce vitae vulputate lacus, quis porta risus. Duis odio nibh, tristique vel nunc a, cursus tempus quam. Nam bibendum ipsum in mi varius, ut faucibus nunc tincidunt. Suspendisse volutpat ligula leo, vitae posuere nulla cursus in. Quisque rutrum, justo ultricies hendrerit viverra, eros arcu feugiat dui, ut varius quam ante eget tortor.

Nullam sit amet sapien nec odio aliquet pharetra. Ut justo ex, aliquet non bibendum nec, vulputate nec nibh. Ut semper eget felis sit amet feugiat. Proin condimentum ex lectus, at rutrum mauris vestibulum a. Praesent imperdiet eget erat ac venenatis. In commodo a orci non elementum. Integer ex massa, imperdiet non tortor vel, scelerisque porta lectus. Integer cursus tellus libero, et tempor arcu dignissim nec. Cras eleifend nisi nulla, nec dapibus neque consectetur sed. Duis molestie congue porta. Suspendisse viverra urna commodo pharetra venenatis. Quisque eget risus nec arcu fringilla iaculis eget quis nisl. Integer malesuada augue ac maximus ultricies. Sed congue mi nunc, quis viverra metus rhoncus malesuada. Etiam tristique viverra turpis sit amet fringilla. </p>

</section>

So my question is how would I get the animation to play in the background of the two sections? Right now it plays in one section but I want the animation to be in the background of two different sections. The limit is also not just two sections. I can have 5, 6, 7…etc sections and I want the animation to play in the background. Any suggestions?

10 thoughts on “Animation in the background – html/css”

  1. Definitely believe that which you said. Your favourite reason appeared to be on the internet the easiest thing to
    be mindful of. I say to you, I certainly get irked at the same time as other folks consider worries that they
    just do not recognize about. You managed to hit the
    nail upon the highest as neatly as outlined out the entire
    thing with no need side effect , people can take a signal.
    Will likely be again to get more. Thanks http://hydroxychloroquined.online/

    Reply

Leave a Comment