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

代码语言: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();.........完整代码请登录后点击上方下载按钮下载查看

网友评论0