Delete Canvas & Add snowfall effect

MoxueF · Feb 25, 2024 · cbc27e8 · cbc27e8
1 parent a80ebf9
commit cbc27e8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/layout/_layout.njk b/layout/_layout.njk
@@ -11,6 +11,8 @@
   </noscript>
 </head>
 
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
 <body itemscope itemtype="http://schema.org/WebPage"{% if theme.motion.enable %} class="use-motion"{% endif %}>
   <div class="headband"></div>
 
@@ -48,6 +50,5 @@
   {%- include '_third-party/quicklink.njk' -%}
 
   {{- next_inject('bodyEnd') }}
-  <script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="dist/canvas-nest.js"></script>
 </body>
 </html>
diff --git a/source/js/snow.js b/source/js/snow.js
@@ -0,0 +1,42 @@
+(function ($) {
+	$.fn.snow = function (options) {
+		$('body').append('<div id="snow"></div>');
+		var $flake = $('<div id="snowbox" />').css({ 'position': 'fixed', 'z-index': '-1', 'top': '-50px' }).html('&#10052;'),
+			defaults = {
+				minSize: 10,
+				maxSize: 20,
+				newOn: 1000,
+				flakeColor: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
+			},
+			options = $.extend({}, defaults, options);
+		var interval = setInterval(function () {
+			var documentHeight = $(document).height();
+			var documentWidth = $(document).width();
+			var startPositionLeft = Math.random() * documentWidth - 100,
+				startOpacity = 0.5 + Math.random(),
+				sizeFlake = options.minSize + Math.random() * options.maxSize,
+				endPositionTop = documentHeight - 200,
+				endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
+				durationFall = documentHeight * 10 + Math.random() * 5000;
+			$flake.clone().appendTo('#snow').css({
+				left: startPositionLeft,
+				opacity: startOpacity,
+				'font-size': sizeFlake,
+				color: options.flakeColor
+			}).animate({
+				top: endPositionTop,
+				left: endPositionLeft,
+				opacity: 0.2
+			}, durationFall, 'linear', function () {
+				$(this).remove()
+			});
+		}, options.newOn);
+	};
+})(jQuery);
+$(function () {
+	$.fn.snow({
+		minSize: 5, /* 定义雪花最小尺寸 */
+		maxSize: 50,/* 定义雪花最大尺寸 */
+		newOn: 300  /* 定义密集程度，数字越小越密集 */
+	});
+});