Halloween Pen

Developer

Size

7,736 Kb

Views

24,288

Halloween Pen Previews
Halloween Pen HTML Codes
Halloween Pen CSS Codes
Halloween Pen JS Codes

How do I make an halloween pen?

Just something for Halloween. . What is a halloween pen? How do you make a halloween pen? This script and codes were developed by Zane Riley on 11 September 2022, Sunday.

Halloween Pen Previews

Halloween Pen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Halloween Pen </title> <script src="//use.edgefonts.net/emilys-candy.js"></script><script src="//use.edgefonts.net/lato:n1,i1,n3,i3,n4,i4,n7,i7,n9,i9.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1><span class="happy">Happy</span><span class="halloween">HALLOWEEN</span></h1>
<div class="moon"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
</div>
<div class="cloud-container"> <div class="cloud"></div> <div class="cloud"></div> <div class="cloud"></div> <div class="cloud"></div> <div class="cloud"></div>
</div>
<canvas id="starfield"></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Halloween Pen - Script Codes CSS Codes

html { height: 100%;
}
@media screen and (min-width: 650px) { html { font-size: 20px; }
}
body { background-color: #170535; background-image: url("https://i.imgur.com/Jjo6cJZ.png"); min-height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden;
}
#starfield { position: absolute; left: 0; top: 0;
}
/* TITLE "HALLOWEEN"
*/
h1 { font-size: 4em; font-family: emilys-candy, sans-serif; width: 5.65em; height: 3em; max-width: 8em; position: relative; color: 63127D;
}
.happy { font-family: lato, sans-serif; font-size: .5em; font-weight: 400; letter-spacing: .1em; color: #75FFD1; text-transform: uppercase;
}
.halloween { position: relative; display: block;
}
.halloween span { position: absolute;
}
.char1 { font-size: 1.15em; left: 0; color: #A7FF91; -webkit-animation: bounce-in 1000ms linear both; animation: bounce-in 1000ms linear both;
}
.char2 { font-size: 0.75em; top: .25em; left: 1.25em; color: #A6FFAA; -webkit-animation: bounce-in 1000ms linear both; animation: bounce-in 1000ms linear both; -webkit-animation-delay: 300ms; animation-delay: 300ms;
}
.char3 { font-size: .65em; left: 2.25em; top: 0.25em; color: #8CFFBC; -webkit-animation: bounce-in 1000ms linear both; animation: bounce-in 1000ms linear both; -webkit-animation-delay: 500ms; animation-delay: 500ms;
}
.char4 { font-size: .85em; left: 2.25em; top: .25em; color: #A7FF91; -webkit-animation: bounce-in 1000ms linear both; animation: bounce-in 1000ms linear both; -webkit-animation-delay: 200ms; animation-delay: 200ms;
}
.char5 { font-size: .55em; left: 4.50em; top: 0.5em; color: #A6FFAA; -webkit-animation: bounce-in 1000ms linear both; animation: bounce-in 1000ms linear both; -webkit-animation-delay: 250ms; animation-delay: 250ms;
}
.char6 { font-size: .9em; left: 3.21em; top: 0.05em; color: #8CFFBC; -webkit-animation: bounce-in 1000ms linear both; animation: bounce-in 1000ms linear both; -webkit-animation-delay: 800ms; animation-delay: 800ms;
}
.char7 { font-size: 0.76em; left: 4.95em; color: #A7FF91; -webkit-animation: bounce-in 1000ms linear both; animation: bounce-in 1000ms linear both; -webkit-animation-delay: 700ms; animation-delay: 700ms;
}
.char8 { font-size: 0.75em; left: 5.8em; top: 0.25em; color: #A6FFAA; -webkit-animation: bounce-in 1000ms linear both; animation: bounce-in 1000ms linear both; -webkit-animation-delay: 1100ms; animation-delay: 1100ms;
}
.char9 { font-size: 1.15em; left: 4.25em; top: -0.01em; color: #8CFFBC; -webkit-animation: bounce-in 1000ms linear both; animation: bounce-in 1000ms linear both; -webkit-animation-delay: 400ms; animation-delay: 400ms;
}
@-webkit-keyframes bounce-in { 0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); opacity: 0; } 3.333333% { -webkit-transform: matrix3d(0.32635, 0, 0, 0, 0, 0.68602, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.32635, 0, 0, 0, 0, 0.68602, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.666667% { -webkit-transform: matrix3d(0.61701, 0, 0, 0, 0, 0.90691, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.61701, 0, 0, 0, 0, 0.90691, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 10% { -webkit-transform: matrix3d(0.86271, 0, 0, 0, 0, 1.07226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.86271, 0, 0, 0, 0, 1.07226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; } 13.333333% { -webkit-transform: matrix3d(1.03605, 0, 0, 0, 0, 1.14684, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.03605, 0, 0, 0, 0, 1.14684, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 16.666667% { -webkit-transform: matrix3d(1.13384, 0, 0, 0, 0, 1.14088, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.13384, 0, 0, 0, 0, 1.14088, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 20% { -webkit-transform: matrix3d(1.16809, 0, 0, 0, 0, 1.08847, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.16809, 0, 0, 0, 0, 1.08847, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 23.333333% { -webkit-transform: matrix3d(1.15775, 0, 0, 0, 0, 1.02623, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.15775, 0, 0, 0, 0, 1.02623, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 26.666667% { -webkit-transform: matrix3d(1.12245, 0, 0, 0, 0, 0.97964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.12245, 0, 0, 0, 0, 0.97964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 30% { -webkit-transform: matrix3d(1.07861, 0, 0, 0, 0, 0.95863, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.07861, 0, 0, 0, 0, 0.95863, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 33.333333% { -webkit-transform: matrix3d(1.03771, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.03771, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 36.666667% { -webkit-transform: matrix3d(1.00612, 0, 0, 0, 0, 0.97507, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00612, 0, 0, 0, 0, 0.97507, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 40% { -webkit-transform: matrix3d(0.98596, 0, 0, 0, 0, 0.99261, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98596, 0, 0, 0, 0, 0.99261, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 43.333333% { -webkit-transform: matrix3d(0.9764, 0, 0, 0, 0, 1.00574, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9764, 0, 0, 0, 0, 1.00574, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 46.666667% { -webkit-transform: matrix3d(0.97499, 0, 0, 0, 0, 1.01166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.97499, 0, 0, 0, 0, 1.01166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 50% { -webkit-transform: matrix3d(0.97875, 0, 0, 0, 0, 1.01119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.97875, 0, 0, 0, 0, 1.01119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 53.333333% { -webkit-transform: matrix3d(0.98493, 0, 0, 0, 0, 1.00702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98493, 0, 0, 0, 0, 1.00702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 56.666667% { -webkit-transform: matrix3d(0.99143, 0, 0, 0, 0, 1.00208, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99143, 0, 0, 0, 0, 1.00208, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 60% { -webkit-transform: matrix3d(0.99693, 0, 0, 0, 0, 0.99838, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99693, 0, 0, 0, 0, 0.99838, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63.333333% { -webkit-transform: matrix3d(1.00081, 0, 0, 0, 0, 0.99672, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00081, 0, 0, 0, 0, 0.99672, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 66.666667% { -webkit-transform: matrix3d(1.00299, 0, 0, 0, 0, 0.99685, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00299, 0, 0, 0, 0, 0.99685, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 70% { -webkit-transform: matrix3d(1.00376, 0, 0, 0, 0, 0.99802, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00376, 0, 0, 0, 0, 0.99802, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 73.333333% { -webkit-transform: matrix3d(1.00353, 0, 0, 0, 0, 0.99941, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00353, 0, 0, 0, 0, 0.99941, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 76.666667% { -webkit-transform: matrix3d(1.00274, 0, 0, 0, 0, 1.00046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00274, 0, 0, 0, 0, 1.00046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 80% { -webkit-transform: matrix3d(1.00176, 0, 0, 0, 0, 1.00093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00176, 0, 0, 0, 0, 1.00093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 83.333333% { -webkit-transform: matrix3d(1.00084, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00084, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 86.666667% { -webkit-transform: matrix3d(1.00014, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00014, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 90% { -webkit-transform: matrix3d(0.99969, 0, 0, 0, 0, 1.00017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99969, 0, 0, 0, 0, 1.00017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 93.333333% { -webkit-transform: matrix3d(0.99947, 0, 0, 0, 0, 0.99987, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99947, 0, 0, 0, 0, 0.99987, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 96.666667% { -webkit-transform: matrix3d(0.99944, 0, 0, 0, 0, 0.99974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99944, 0, 0, 0, 0, 0.99974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
@keyframes bounce-in { 0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); opacity: 0; } 3.333333% { -webkit-transform: matrix3d(0.32635, 0, 0, 0, 0, 0.68602, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.32635, 0, 0, 0, 0, 0.68602, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.666667% { -webkit-transform: matrix3d(0.61701, 0, 0, 0, 0, 0.90691, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.61701, 0, 0, 0, 0, 0.90691, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 10% { -webkit-transform: matrix3d(0.86271, 0, 0, 0, 0, 1.07226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.86271, 0, 0, 0, 0, 1.07226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; } 13.333333% { -webkit-transform: matrix3d(1.03605, 0, 0, 0, 0, 1.14684, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.03605, 0, 0, 0, 0, 1.14684, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 16.666667% { -webkit-transform: matrix3d(1.13384, 0, 0, 0, 0, 1.14088, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.13384, 0, 0, 0, 0, 1.14088, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 20% { -webkit-transform: matrix3d(1.16809, 0, 0, 0, 0, 1.08847, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.16809, 0, 0, 0, 0, 1.08847, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 23.333333% { -webkit-transform: matrix3d(1.15775, 0, 0, 0, 0, 1.02623, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.15775, 0, 0, 0, 0, 1.02623, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 26.666667% { -webkit-transform: matrix3d(1.12245, 0, 0, 0, 0, 0.97964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.12245, 0, 0, 0, 0, 0.97964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 30% { -webkit-transform: matrix3d(1.07861, 0, 0, 0, 0, 0.95863, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.07861, 0, 0, 0, 0, 0.95863, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 33.333333% { -webkit-transform: matrix3d(1.03771, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.03771, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 36.666667% { -webkit-transform: matrix3d(1.00612, 0, 0, 0, 0, 0.97507, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00612, 0, 0, 0, 0, 0.97507, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 40% { -webkit-transform: matrix3d(0.98596, 0, 0, 0, 0, 0.99261, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98596, 0, 0, 0, 0, 0.99261, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 43.333333% { -webkit-transform: matrix3d(0.9764, 0, 0, 0, 0, 1.00574, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9764, 0, 0, 0, 0, 1.00574, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 46.666667% { -webkit-transform: matrix3d(0.97499, 0, 0, 0, 0, 1.01166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.97499, 0, 0, 0, 0, 1.01166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 50% { -webkit-transform: matrix3d(0.97875, 0, 0, 0, 0, 1.01119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.97875, 0, 0, 0, 0, 1.01119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 53.333333% { -webkit-transform: matrix3d(0.98493, 0, 0, 0, 0, 1.00702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98493, 0, 0, 0, 0, 1.00702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 56.666667% { -webkit-transform: matrix3d(0.99143, 0, 0, 0, 0, 1.00208, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99143, 0, 0, 0, 0, 1.00208, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 60% { -webkit-transform: matrix3d(0.99693, 0, 0, 0, 0, 0.99838, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99693, 0, 0, 0, 0, 0.99838, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63.333333% { -webkit-transform: matrix3d(1.00081, 0, 0, 0, 0, 0.99672, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00081, 0, 0, 0, 0, 0.99672, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 66.666667% { -webkit-transform: matrix3d(1.00299, 0, 0, 0, 0, 0.99685, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00299, 0, 0, 0, 0, 0.99685, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 70% { -webkit-transform: matrix3d(1.00376, 0, 0, 0, 0, 0.99802, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00376, 0, 0, 0, 0, 0.99802, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 73.333333% { -webkit-transform: matrix3d(1.00353, 0, 0, 0, 0, 0.99941, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00353, 0, 0, 0, 0, 0.99941, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 76.666667% { -webkit-transform: matrix3d(1.00274, 0, 0, 0, 0, 1.00046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00274, 0, 0, 0, 0, 1.00046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 80% { -webkit-transform: matrix3d(1.00176, 0, 0, 0, 0, 1.00093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00176, 0, 0, 0, 0, 1.00093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 83.333333% { -webkit-transform: matrix3d(1.00084, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00084, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 86.666667% { -webkit-transform: matrix3d(1.00014, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00014, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 90% { -webkit-transform: matrix3d(0.99969, 0, 0, 0, 0, 1.00017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99969, 0, 0, 0, 0, 1.00017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 93.333333% { -webkit-transform: matrix3d(0.99947, 0, 0, 0, 0, 0.99987, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99947, 0, 0, 0, 0, 0.99987, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 96.666667% { -webkit-transform: matrix3d(0.99944, 0, 0, 0, 0, 0.99974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99944, 0, 0, 0, 0, 0.99974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
/* MOON
*/
.moon { height: 7em; width: 7em; background-color: #eee; border-radius: 5em; position: absolute; top: 1em; right: 1em; -webkit-animation: moonlight 5s alternate infinite; animation: moonlight 5s alternate infinite;
}
.moon li { position: absolute; list-style: none; background: #aaa; border-radius: 50%; box-shadow: inset 0.4em -0.05em 0.1em #777;
}
.moon li:nth-child(1) { top: 1.15em; left: 1.25em; height: .75em; width: .75em;
}
.moon li:nth-child(2) { top: 1.05em; left: 3.5em; height: 1.25em; width: 1.25em;
}
.moon li:nth-child(3) { top: 2.95em; left: 1.1em; height: 1.75em; width: 1.75em;
}
.moon li:nth-child(4) { top: 3em; left: 3.25em; height: .5em; width: .5em;
}
.moon li:nth-child(5) { top: 4em; left: 5.25em; height: .65em; width: .65em;
}
.moon li:nth-child(5) { top: 3.5em; left: 4.15em; height: 2.25em; width: 2.25em;
}
.moon li:nth-child(6) { top: 5.25em; left: 2.5em; height: 1.25em; width: 1.25em;
}
@-webkit-keyframes moonlight { 0% { box-shadow: inset -5px -4px 0px 0px rgba(50, 50, 50, 0.75), 0px 0px 20px rgba(255, 255, 255, 0.5); } 100% { box-shadow: inset -5px -4px 0px 0px rgba(50, 50, 50, 0.75), 0px 0px 40px rgba(255, 255, 255, 0.75); }
}
@keyframes moonlight { 0% { box-shadow: inset -5px -4px 0px 0px rgba(50, 50, 50, 0.75), 0px 0px 20px rgba(255, 255, 255, 0.5); } 100% { box-shadow: inset -5px -4px 0px 0px rgba(50, 50, 50, 0.75), 0px 0px 40px rgba(255, 255, 255, 0.75); }
}
/*
CLOUDS
*/
.cloud { background: #fff; height: 4em; width: 9em; border-radius: 3em; position: absolute; -webkit-animation-name: clouds; animation-name: clouds; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear;
}
.cloud:before, .cloud:after { content: ""; background: #fff; position: absolute; border-radius: 50%;
}
.cloud:before { height: 3em; width: 3em; top: -1.3em; left: 1.1em;
}
.cloud:after { height: 5em; width: 5em; top: -2em; right: 0.85em;
}
.cloud:nth-child(1) { top: 2em; left: 10em; -webkit-animation-duration: 90s; animation-duration: 90s;
}
.cloud:nth-child(2) { top: 9em; left: 2.5em; opacity: .45; -webkit-animation-duration: 120s; animation-duration: 120s;
}
.cloud:nth-child(3) { top: 15em; left: 11em; opacity: .65; -webkit-animation-duration: 70s; animation-duration: 70s;
}
.cloud:nth-child(4) { top: 7em; left: 40em; opacity: .65; -webkit-animation-duration: 70s; animation-duration: 70s;
}
.cloud:nth-child(5) { top: 17em; left: 30em; opacity: .25; -webkit-animation-duration: 70s; animation-duration: 70s;
}
@-webkit-keyframes clouds { 0% { margin-left: -10%; opacity: 0; } 15% { opacity: 100%; } 100% { margin-left: 110%; }
}
@keyframes clouds { 0% { margin-left: -10%; opacity: 0; } 15% { opacity: 100%; } 100% { margin-left: 110%; }
}
/*
Z-INDEX
*/
h1 { z-index: 10;
}
.moon { z-index: 1;
}
.cloud { z-index: 2;
}

Halloween Pen - Script Codes JS Codes

 $(".halloween").lettering();
// Forked from https://codepen.io/mosne/pen/lkfwt
"use strict";
window.onload = function() { setTimeout(start, 200);
};
function start() { //Helpers function lineToAngle(x1, y1, length, radians) { var x2 = x1 + length * Math.cos(radians), y2 = y1 + length * Math.sin(radians); return { x: x2, y: y2 }; } function randomRange(min, max) { return min + Math.random() * (max - min); } function degreesToRads(degrees) { return degrees / 180 * Math.PI; } //Particle var particle = { x: 0, y: 0, vx: 0, vy: 0, radius: 0, create: function(x, y, direction) { var obj = Object.create(this); obj.x = x; obj.y = y; return obj; }, getSpeed: function() { return Math.sqrt(this.vx * this.vx + this.vy * this.vy); }, setSpeed: function(speed) { var heading = this.getHeading(); this.vx = Math.cos(heading) * speed; this.vy = Math.sin(heading) * speed; }, getHeading: function() { return Math.atan2(this.vy, this.vx); }, setHeading: function(heading) { var speed = this.getSpeed(); this.vx = Math.cos(heading) * speed; this.vy = Math.sin(heading) * speed; }, update: function() { this.x += this.vx; this.y += this.vy; } }; //Canvas and settings var canvas = document.getElementById("starfield"), context = canvas.getContext("2d"), width = canvas.width = window.innerWidth, height = canvas.height = window.innerHeight, stars = [], shootingStars = [], layers = [ { speed: 0.00, scale: 0.2, count: 320 }, { speed: 0.00, scale: 0.5, count: 50 }, { speed: 0.00, scale: 0.75, count: 10 } ], starsAngle = 145, shootingStarSpeed = { min: 15, max: 20 }, shootingStarOpacityDelta = 0.01, trailLengthDelta = 0.01, shootingStarEmittingInterval = 2000, shootingStarLifeTime = 500, maxTrailLength = 300, starBaseRadius = 2, shootingStarRadius = 3, paused = false; //Create all stars for (var j = 0; j < layers.length; j += 1) { var layer = layers[j]; for (var i = 0; i < layer.count; i += 1) { var star = particle.create(randomRange(0, width), randomRange(0, height), 0, 0); star.radius = starBaseRadius * layer.scale; star.setSpeed(layer.speed); star.setHeading(degreesToRads(starsAngle)); stars.push(star); } } function createShootingStar() { var shootingStar = particle.create(randomRange(width / 2, width), randomRange(0, height / 2), 0, 0); shootingStar.setSpeed(randomRange(shootingStarSpeed.min, shootingStarSpeed.max)); shootingStar.setHeading(degreesToRads(starsAngle)); shootingStar.radius = shootingStarRadius; shootingStar.opacity = 0; shootingStar.trailLengthDelta = 0; shootingStar.isSpawning = true; shootingStar.isDying = false; shootingStars.push(shootingStar); } function killShootingStar(shootingStar) { setTimeout(function() { shootingStar.isDying = true; }, shootingStarLifeTime); } function update() { if (!paused) { context.clearRect(0, 0, width, height); context.fillStyle = "transparent"; context.fillRect(0, 0, width, height); context.fill(); for (var i = 0; i < stars.length; i += 1) { var star = stars[i]; star.update(); drawStar(star); if (star.x > width) { star.x = 0; } if (star.x < 0) { star.x = width; } if (star.y > height) { star.y = 0; } if (star.y < 0) { star.y = height; } } for (i = 0; i < shootingStars.length; i += 1) { var shootingStar = shootingStars[i]; if (shootingStar.isSpawning) { shootingStar.opacity += shootingStarOpacityDelta; if (shootingStar.opacity >= 1.0) { shootingStar.isSpawning = false; killShootingStar(shootingStar); } } if (shootingStar.isDying) { shootingStar.opacity -= shootingStarOpacityDelta; if (shootingStar.opacity <= 0.0) { shootingStar.isDying = false; shootingStar.isDead = true; } } shootingStar.trailLengthDelta += trailLengthDelta; shootingStar.update(); if (shootingStar.opacity > 0.0) { drawShootingStar(shootingStar); } } //Delete dead shooting shootingStars for (i = shootingStars.length -1; i >= 0 ; i--){ if (shootingStars[i].isDead){ shootingStars.splice(i, 1); } } } requestAnimationFrame(update); } function drawStar(star) { context.fillStyle = "rgb(255, 255, 255)"; context.beginPath(); context.arc(star.x, star.y, star.radius, 0, Math.PI * 2, false); context.fill(); } function drawShootingStar(p) { var x = p.x, y = p.y, currentTrailLength = (maxTrailLength * p.trailLengthDelta), pos = lineToAngle(x, y, -currentTrailLength, p.getHeading()); context.fillStyle = "rgba(255, 255, 255, " + p.opacity + ")"; // context.beginPath(); // context.arc(x, y, p.radius, 0, Math.PI * 2, false); // context.fill(); var starLength = 5; context.beginPath(); context.moveTo(x - 1, y + 1); context.lineTo(x, y + starLength); context.lineTo(x + 1, y + 1); context.lineTo(x + starLength, y); context.lineTo(x + 1, y - 1); context.lineTo(x, y + 1); context.lineTo(x, y - starLength); context.lineTo(x - 1, y - 1); context.lineTo(x - starLength, y); context.lineTo(x - 1, y + 1); context.lineTo(x - starLength, y); context.closePath(); context.fill(); //trail context.fillStyle = "rgba(255, 221, 157, " + p.opacity + ")"; context.beginPath(); context.moveTo(x - 1, y - 1); context.lineTo(pos.x, pos.y); context.lineTo(x + 1, y + 1); context.closePath(); context.fill(); } //Run update(); //Shooting stars setInterval(function() { if (paused) return; createShootingStar(); }, shootingStarEmittingInterval); window.onfocus = function () { paused = false; }; window.onblur = function () { paused = true; };
}

Home Page	Home
Developer	Zane Riley
Username	zaneriley
Uploaded	September 11, 2022
Rating	3.5
Size	7,736 Kb
Views	24,288

Do you need developer help for Halloween Pen?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zane Riley (zaneriley) Script Codes

Name	Size
Landing Page Prototype	7,132 Kb
Michelle, submit your photography to Unsplash.	3,368 Kb
Button Explorations	13,720 Kb
Typography	5,179 Kb
Landing Page Prototype	3,261 Kb
Masking Gifs	12,900 Kb
A Pen by Zane Riley	2,854 Kb
Fluid Type Demo with Grid	0 Kb
3d Shadow Prototype v2	4,448 Kb
Donation Prototype - v2 Visual Hierarchy Fixes	16,897 Kb

Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Pure CSS candle light animation by One element	Ksksoft	2,193 Kb
Custom Checkbox and radio inputs SCSS	Rgfx	3,367 Kb
Sample Profile Screen	OurDailyBread	5,375 Kb
Image Hover	Johnheiner	3,409 Kb
Vertically rotating text with CSS	Nopr	2,141 Kb
Mondrian	Chrisarmstrong	2,787 Kb
Css3 only dropdown menu	Riogrande	2,519 Kb
SVG Circle Progress	JMChristensen	3,368 Kb
Twitch API	Coderpilot	3,412 Kb
Starfield old school style	Bolloxim	5,214 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!