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