How to add JavaScript file in angular cli application?

Question

I am trying to replicate this effect - https://codepen.io/jonathasborges1/pen/YzryRpX in my angular app application.

But I'm having a hard time applying the effect

Someone can help me?

"use strict";
var LeafScene = function (el) {
    this.viewport = el;
    this.world = document.createElement("div");
    this.leaves = [];
    this.options = {
        numLeaves: 60,
        wind: {
            magnitude: 1.2,
            maxSpeed: 12,
            duration: 300,
            start: 0,
            speed: 0
        }
    };
    this.width = this.viewport.offsetWidth;
    this.height = this.viewport.offsetHeight;
    // animation helper
    this.timer = 0;
    this._resetLeaf = function (leaf) {
        // place leaf towards the top left
        leaf.x = this.width * 2 - Math.random() * this.width * 1.75;
        leaf.y = -10;
        leaf.z = Math.random() * 200;
        if (leaf.x > this.width) {
            leaf.x = this.width + 10;
            leaf.y = (Math.random() * this.height) / 2;
        }
        // at the start, the leaf can be anywhere
        if (this.timer == 0) {
            leaf.y = Math.random() * this.height;
        }
        // Choose axis of rotation.
        // If axis is not X, chose a random static x-rotation for greater variability
        leaf.rotation.speed = Math.random() * 10;
        var randomAxis = Math.random();
        if (randomAxis > 0.5) {
            leaf.rotation.axis = "X";
        }
        else if (randomAxis > 0.25) {
            leaf.rotation.axis = "Y";
            leaf.rotation.x = Math.random() * 180 + 90;
        }
        else {
            leaf.rotation.axis = "Z";
            leaf.rotation.x = Math.random() * 360 - 180;
            // looks weird if the rotation is too fast around this axis
            leaf.rotation.speed = Math.random() * 3;
        }
        // random speed
        leaf.xSpeedVariation = Math.random() * 1 - 0.2;
        leaf.ySpeed = Math.random();
        return leaf;
    };
    this._updateLeaf = function (leaf) {
        var leafWindSpeed = this.options.wind.speed(this.timer - this.options.wind.start, leaf.y);
        var xSpeed = leafWindSpeed + leaf.xSpeedVariation;
        leaf.x -= xSpeed;
        leaf.y += leaf.ySpeed;
        leaf.rotation.value += leaf.rotation.speed;
        var t = "translateX( " +
            leaf.x +
            "px ) translateY( " +
            leaf.y +
            "px ) translateZ( " +
            leaf.z +
            "px )  rotate" +
            leaf.rotation.axis +
            "( " +
            leaf.rotation.value +
            "deg )";
        if (leaf.rotation.axis !== "X") {
            t += " rotateX(" + leaf.rotation.x + "deg)";
        }
        leaf.el.style.webkitTransform = t;
        leaf.el.style.MozTransform = t;
        leaf.el.style.oTransform = t;
        leaf.el.style.transform = t;
        // reset if out of view
        if (leaf.x < -10 || leaf.y > this.height + 10) {
            this._resetLeaf(leaf);
        }
    };
    this._updateWind = function () {
        if (this.timer === 0 ||
            this.timer > this.options.wind.start + this.options.wind.duration) {
            this.options.wind.magnitude = Math.random() * this.options.wind.maxSpeed;
            this.options.wind.duration =
                this.options.wind.magnitude * 50 + (Math.random() * 20 - 10);
            this.options.wind.start = this.timer;
            var screenHeight = this.height;
            this.options.wind.speed = function (t, y) {
                var a = ((this.magnitude / 2) * (screenHeight - (2 * y) / 3)) / screenHeight;
                return (a *
                    Math.sin(((2 * Math.PI) / this.duration) * t + (3 * Math.PI) / 2) +
                    a);
            };
        }
    };
};
LeafScene.prototype.init = function () {
    for (var i = 0; i < this.options.numLeaves; i++) {
        var leaf = {
            el: document.createElement("div"),
            x: 0,
            y: 0,
            z: 0,
            rotation: {
                axis: "X",
                value: 0,
                speed: 0,
                x: 0
            },
            xSpeedVariation: 0,
            ySpeed: 0,
            path: {
                type: 1,
                start: 0
            },
            image: 1
        };
        this._resetLeaf(leaf);
        this.leaves.push(leaf);
        this.world.appendChild(leaf.el);
    }
    this.world.className = "leaf-scene";
    this.viewport.appendChild(this.world);
    // reset window height/width on resize
    var self = this;
    window.onresize = function (event) {
        self.width = self.viewport.offsetWidth;
        self.height = self.viewport.offsetHeight;
    };
};
LeafScene.prototype.render = function () {
    this._updateWind();
    for (var i = 0; i < this.leaves.length; i++) {
        this._updateLeaf(this.leaves[i]);
    }
    this.timer++;
    requestAnimationFrame(this.render.bind(this));
};
// start up leaf scene
var leafContainer = document.querySelector(".falling-leaves"), leaves = new LeafScene(leafContainer);
leaves.init();
leaves.render();

First of all if your Js library does have npm package install it and in your component import it or use const car LeafScene:any otherwise you have to download LeafScene Js file and put it in your assets folder and add it to scripts section in your angular.json. there is more discussion here https://stackoverflow.com/questions/44945766/use-external-javascript-library-in-angular-application — Mohammadreza Mohammadi, Dec 05 '21 at 05:35

score 0 · Answer 1 · answered Dec 05 '21 at 07:32

You can create a file like <script> ..that js code.. </script> and save it as script.js and then add it to your index.html or dynamicly load it:

public loadScript(){
    return new Promise(resolve => {
      const scriptElement = document.createElement('script');
      scriptElement.src = '/assets/js/script.js'
      scriptElement.onload = resolve;
      document.body.appendChild(scriptElement);
    });
  }

and then call and subscribe this function in your ts file to know when it is loaded or do something when its loaded in your page.

How to add JavaScript file in angular cli application?

1 Answers1