Blog Garden Background page dynamic effects

Time:2021-10-21

1. To set animation, you must first apply for permission

1.1 first enter [my blog park] and enter [settings] in [management]

1.2 find [blog sidebar announcement] and click [apply for JS permission]

1.3 write the content of application JS permission (examples are as follows)

Dear blog administrator:

			Can you open JS permission for me? I want to adjust the appearance of JS code for the style and layout of the article.

	Thank you for your help.
Dear blog administrator:

			Hello, I hope to beautify my blog page with JS. Please apply for my JS permission.

	Thank you for your help.

PS: when applying, you should wait patiently. If you fail to pass the examination, you can try changing more contents. I passed it at one time. I waited about an hour  ^-^ ^-^

1.4 after passing the review, you can start to set the dynamic effect!!

 

2. Dynamic linear particle effect of background

2.1 When the mouse is stopped, the lines will be automatically adsorbed. The effect drawing is as follows

2.2 first import the JS file, select the file here – upload it, or directly use my SRC path (this step is mainly to give the path of animation JS)

JS file connection, copy link, copy JS:https://blog-static.cnblogs.com/files/liyhbk/canvas-nest.js

2.3 if you upload a file and get a connection, change the SRC path to your own

2.4 copy this code into the header HTML code

2.5 parameters

  • Color: line color, default: ‘0, 0, 0’; The three numbers are (R, G, b). Pay attention to the use and segmentation
  • Opacity: Line transparency 0 ~ 1, default 0.5
  • Count: total number of lines, 150 by default
  • Z-index: the Z-index attribute of the background. CSS is used to control the position of the layer. The default is – 1

3. Notice board announcement live2d animation

3.1 the renderings are as follows:

3.2 paste this code on the side bulletin board

Live2D

					
					
				
				
					
						
						
						
							
							
							
							
							
							
							
						
					
					
					
					initModel()

4. Mouse click love effect

4.1 the renderings are as follows:

4.2 paste this code into the footer – HTML code

//JQuery plug-in required
				/*Mouse effects*/
				var a_idx = 0;
				jQuery(document).ready(function($) {
				$("body").click(function(e) {
				var a = new Array(" ❤ No salted fish! ❤","❤ Refuse laziness! ❤","❤ Want to make food ❤","❤ Learn from the boss ❤","❤ Help me up~ ❤","❤ come on ❤","❤ Always on the road~ ❤","❤ Tired~ ❤","❤ Lie down for a while ❤","❤ sixty-six thousand six hundred and sixty-six ❤","❤ Fly happily***** ❤");
				var $i = $("<span></span>").text(a[a_idx]);
				a_idx = (a_idx + 1) % a.length;
				var x = e.pageX,
				y = e.pageY;
				$i.css({
				"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
				"top": y - 20,
				"left": x,
				"position": "absolute",
				"font-weight": "bold",
				"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
				});
				$("body").append($i);
				$i.animate({
				"top": y - 180,
				"opacity": 0
				},
				1500,
				function() {
				$i.remove();
				});
				});
				});

5. Mouse click spark effect

5.1 the renderings are as follows:

5.2 post this code in – footer HTML   Code (just follow the previous paste)

6. Mouse style animation

6.1 the effect is as follows:

6.2 paste this code into – page customization CSS code

/*Mouse style animation*/
			body{
			background-repeat: repeat;
			background-attachment: fixed;
			background-size:cover;
			cursor: url(https://files.cnblogs.com/files/monster-jian/cursor.ico),auto;
	}

7. Mouse style animation

7.1 the effect is as follows. There are people in the lower left corner of the page

7.2 post this code in – footer HTML   In code

L2Dwidget.init({ "model": { jsonPath:          "https://unpkg.com/[email protected]/assets/haruto.model.json",<br>        "scale": 1 }, "display": { "position": "left", "width": 66, "height": 88,"hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },"react": { "opacityDefault": 0.8, "opacityOnHover": 0.1 } });

7.3 modify the display content according to your preferences

Blog Garden Background page dynamic effects

8. Quick recommendation

The renderings are as follows:

code:

/*Quick recommendation*/
			#div_digg {
			position: fixed;
			bottom: 10px;
			right: 15px;
			border: 2px solid #ECD7B1;
			padding: 10px;
			width: 140px;
			background-color: #fff;
			border-radius: 5px 5px 5px 5px !important;
			box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
	}

9. Complete the style display

 

10. The URLs in the above styles, SRC with JS files, are all their own file paths. They can copy links, find their own JS files or files in other formats, and upload them to their own files, as shown in the figure:

 

 

Personal blog address:https://www.cnblogs.com/liyhbk/