js实现canvas圣诞节大雪纷飞动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：js实现canvas圣诞节大雪纷飞动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background: url(//repo.bfw.wiki/bfwrepo/image/5fdd387b774b6.png) !important;
  height: 100vh !important;
  width: 100vw !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  font-family: "Brush Script MT", cursive;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgb(2, 0, 36);
  background: linear-gradient(
    0deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(9, 9, 121, 1) 35%,
    rgba(0, 212, 255, 1) 100%
  );
  color: white;
  text-align: center;
  /*   height: 7%; */
  padding-top: 2%;
  padding-bottom: 1.7%;
  font-size: 16px;
}

.footer a {
  color: white;
}

.blink {
  animation: blink 0.5s infinite;
  animation-delay: 500ms;
}
@keyframes blink {
  to {
    opacity: 0;
  }
}
.typing {
  display: flex;
  margin-top: 10%;
}

.header-sub-title,
h2 {
  font-weight: 600;
  font-size: 40px;
  color: #ff6b6b;
  padding-right: 0.1em;
  text-transform: uppercase;
}
</style>


</head>

<body translate="no" >
  <embed src="https://www.gmajormusictheory.org/Freebies/Intermediate/Level1mp3/HeShallFeed.mp3" width="180" height="90" loop="true" autostart="false" hidden="true" />

  
      <script  >
let simpleParallax;

function Snowfall(params) {
  const snowfall = this;
  let CANVAS_WIDTH = 600;
  let CANVAS_HEIGHT = 400;
  const TOTAL_SNOWFLAKES = 6000;
  const FALL_TIME = 13;
  const TOTAL_SNOWFLAKE_LAYERS = 8;
  const BLOW_DISTANCE = 400;
  let snowfallLayersByIndex = [];
  let snowfallLayersByCanvasId = [];
  let bSimpleParallaxLibLoaded = false;
  let coreSnowflakeStylesNd;
  let skyNd = getVal(params, "skyNode", document.body);

  const moonlitEvening = {
    skyColor1: "#2B3C46",
    skyColor2: "#3363A1",
    flakeColors: ["#61899e", "#61899e"]
  };

  try {
    window.addEventListener("DOMContentLoaded", domContentLoaded);

    function domContentLoaded(evt) {
      try {
        CANVAS_WIDTH = screen.width + BLOW_DISTANCE * 2;
        CANVAS_HEIGHT = screen.height + 100;
        let bSkyStyleBuilt = false;
        let sSnowySkyClass = "snowySky";

        if (typeof SimpleParallax !== "undefined") {
          simpleParallax = new SimpleParallax({
            maxMovement: BLOW_DISTANCE * 2
          });
          bSimpleParallaxLibLoaded = true;
        } // end if

        coreSnowflakeStylesNd = document.getElementById("coreSnowflakeStyles");
        if (
          coreSnowflakeStylesNd === null ||
          typeof coreSnowflakeStylesNd === "undefined"
        ) {
          coreSnowflakeStylesNd = document.createElement("style");
          coreSnowflakeStylesNd.id = "coreSnowflakeStyles";
          let s = [];

          //s.push("")
          //s.push("  ")
          if (
            skyNd.style.background === "" &&
            skyNd.style.backgroundImage === ""
          ) {
            let dt = new Date();
            let nCode = dt.getTime();
            sSnowySkyClass = sSnowySkyClass + nCode + "";

            s.push("." + sSnowySkyClass + " {");
            s.push("  height: 100%;");
            s.push("  background-image: linear-gradient(#2B3C46, #3363A1);");
            s.push("  padding:0px;");
            s.push("  margin:0px;");
            s.push("  overflow:hidden;");
            s.push("  background-repeat: no-repeat;");
            s.push("  background-attachment: fixed;");
            s.push("}");
            s.push("");
            bSkyStyleBuilt = true;
          } // end if

          s.push(".snowFlakes {");
          s.push("  position:absolute;");
          s.push("  top:0px;");
          s.push("  left:0px;");
          s.push("  overflow:hidden;");
          s.push("  opacity:.8;");
          s.push("}");
          s.push("");

          s.push(".iAmHidden {");
          s.push("  display:none;");
          s.push("}");

          if (!bSimpleParallaxLibLoaded) {
            s.push("");
            s.push(".snowLayer {");
            s.push("  position:absolute;");
            s.push("  left:-" + BLOW_DISTANCE + "px;");
            s.push("  top:-" + BLOW_DISTANCE + "px;");
            s.push("  overflow:hidden;");
            s.push("}");
          } // end if

          coreSnowflakeStylesNd.innerHTML = s.join("\n");
          document.body.appendChild(coreSnowflakeStylesNd);

          if (bSkyStyleBuilt) {
            skyNd.className = sSnowySkyClass;
          } // end if
        } // end if

        setupSnowFlakeLayers();
      } catch (err) {
        logErr(err);
      } // end of try/catch block
    } // end of domContentLoaded()

    function setupSnowFlakeLayers() {
      try {
        let flakeColors = [];
        for (let n = 0; n < TOTAL_SNOWFLAKE_LAYERS; n++) {
          flakeColors.push("white"); // set defaults
        } // next n

        // furthest away is darkest
        flakeColors[0] = "#61899e";
        flakeColors[1] = "#61899e";
        flakeColors[2] = "#81a0b1";
        flakeColors[3] = "#81a0b1";
        flakeColors[4] = "#d0dce2";
        flakeColors[5] = "#eff3f5";

        for (let n = 0; n < TOTAL_SNOWFLAKE_LAYERS; n++) {
          let dv;

          if (bSimpleParallaxLibLoaded) {
            const layer = simpleParallax.addLayer();
            dv = layer.domNode;
          } else {
            // no parallax...
            dv = document.createElement("div");
            dv.className = "snowLayer";
            dv.style.width = CANVAS_WIDTH + "px";
            dv.style.height = CANVAS_HEIGHT + "px";
            dv.style.margin = "0px";
            dv.style.padding = "0px";
            dv.style.boxSizing = "border-box";
            document.body.appendChild(dv);
          } // end if/else

          drawSnowFlakesForLayer(n + 1, dv, flakeColors[n]);
        } // next n
      } catch (err) {
        logErr(err);
      } // end of try/catch block
    } // end of setupSnowFlakeLayers()

    function drawSnowFlakesForLayer(nCanvas, cntrNd, siFlakeColor) {
      try {
        const canvasA = document.createElement("canvas");
        const canvasB = document.createElement("canvas");
        const aniStyle = document.createElement("style");

        canvasA.id = "sn" + nCanvas + "_A";
        canvasB.id = "sn" + nCanvas + "_B";

        let sFlakeColor = "white";

        if (typeof siFlakeColor === "string") {
          sFlakeColor = siFlakeColor;
        } // end if

        drawSnowflakesOnCanvas(canvasA, nCanvas, sFlakeColor);
        drawSnowflakesOnCanvas(canvasB, nCanvas, sFlakeColor);

        cntrNd.appendChild(canvasA);
        cntrNd.appendChild(canvasB);

        let nRange = BLOW_DISTANCE * 2;

        let xOffset = intRnd(nRange) - Math.floor(nRange / 2);

        const s = [];

        // s.push("")
        s.push("@keyframes snowfall" + nCanvas + "Part1 {");
        s..........完整代码请登录后点击上方下载按钮下载查看