ฤดูหนาวอยู่ที่นี่และพื้นที่บล็อกจำนวนมากได้เพิ่มเกล็ดหิมะดังนั้นฉันจึงไปดูเอฟเฟกต์ของพวกเขา มีรหัสเอฟเฟกต์หลายอย่างดังนั้นฉันจึงเอามันไป เพื่อนที่ต้องการสามารถพาพวกเขาไปและลองพวกเขา
ภาพเกล็ดหิมะขนาดใหญ่:
รหัสเอฟเฟกต์ 1
<script type = "text/javaScript" language = "JavaScript"> (function () {function k (a, b, c) {ถ้า (a.addeventListener) a.addeventListener (b, c, false); a; else {var b = window.onload; window.onload = function () {b (); a ()}}} ฟังก์ชั่น h () {var a = {}; สำหรับ (พิมพ์ใน {top: "", ""}) {var b = type == "top"? "undefined") [type.toLowerCase ()] = window ["หน้า" + b + "ออฟเซ็ต"]; else {b = document.documentelement.clientHeight? (window.innerHeight) b = window.innerHeight; อื่น ๆ ถ้า (A.ParentElement.clientHeight) b = a.parentElement.clientheight; อื่น ๆ ถ้า (a && a.clientheight) b = a.clientheight; return b} ฟังก์ชั่น i (a) {this.parent + 5; this.el.style.width = math.round (this.size) + "px"; this.el.style.height = math.round (this.size) + "px"; this.maxleft = document.offsetWidth - this.size; this.maxleft; this.top = h (). top + 1; this.angle = 1.4 + 0.2 * math.random (); this.minangle = 1.4; this.maxangle = 1.6; this.angledelta = 0.01 * math.random (); speed = 2 + math.random () true; window.createsNow = function (a, b) {ถ้า (j) {var c = [], m = setInterval (ฟังก์ชัน () {f && b> c.length && math.random () <b * 0.0025 && c.push (ใหม่ i (a)); - f &&! c.length && clearinterval (m); สำหรับ (var e = h (). ด้านบน, n = l (), d = c.length-1; d> = 0; d-) ถ้า (c [d]) ถ้า (c [d] .top <e || c [d] .top + c [d]. null; c.splice (d, 1)} else {c [d] .move (); c [d] .draw ()}}, 40); k (หน้าต่าง, "scroll", ฟังก์ชั่น () {สำหรับ (var e = c.length-1; e> = 0; b)})}; window.removesNow = function () {f = false}; i.prototype = {createel: ฟังก์ชั่น (a, b) {this.el = document.createelement ("img"); this.el.el.setattribute ("src", b + "ที่อยู่ "Absolute"; this.el.style.display = "block"; this.el.style.zindex = "99999"; this.parent.appendchild (this.el)}, ย้าย: function () {ถ้า (this.angle <this.minangle this.angledelta; this.left += this.speed * math.cos (this.angle * math.pi); this.top -= this.peed * math.sin (this.angle * math.pi); ถ้า (this.left <0) this.left = this.maxleft; {this.el.style.top = math.round (this.top) + "px"; this.el.style.left = math.round (this.left) + "px"}, ลบ: function () {this.parent.removechild (this.el);คัดลอกและวางรหัสด้านบนลงในไฟล์ส่วนหัวหรือส่วนท้ายในหัวข้อโดยตรง หากคุณต้องการให้หน้าบทความแสดงให้เพิ่มลงในซิงเกิลโดยตรง ด้านล่างเราจะให้ภาพเกล็ดหิมะ (วัสดุที่จำเป็น) ภาพขนาดเล็ก: คุณต้องอัปโหลดไปยังหัวข้อปัจจุบันของบล็อกของคุณจากนั้นเปลี่ยนลิงค์ในรหัสเป็นตำแหน่งของรูปภาพ เอฟเฟกต์ดังแสดงในหน้านี้
รหัสเอฟเฟกต์ 2:
<html> <head> <script> function start () {var array = new Array (); var canvas = document.getElementById ("mycanvas"); var context = canvas.getContext ("2d"); สำหรับ (var i = 0; i <50; i ++) shownow (); array.push (shownow);} time = setInterval (function () {context.clearRect (0,0, Canvas.width, Canvas.height); สำหรับ (var i = 0; i <array.length; i ++) {array [i] .move (); showsnow () {var y = parseint (math.random ()*50)*10; var x = parseint (math.random ()*80)*10; this.draw = ฟังก์ชั่น (บริบท) {context.font = "50px calibri "; context.filltext ("*", x, y);} this.move = function () {y+= 20; ถ้า (y> 600) {y = 0;}}} </script> </head> <body> สีน้ำเงิน "> </canvas> </body> </html>เอฟเฟกต์นี้แสดงให้เห็นดังต่อไปนี้ (รู้สึกน่าเกลียดไม่แนะนำ):
รหัสเอฟเฟกต์สาม
ในความเป็นจริงหากคุณใช้บล็อก WordPress คุณสามารถใช้ปลั๊กอินของ Let It Snow
ฉันจะไม่พูดถึงวิธีการใช้ให้ปลั๊กอินหิมะที่นี่ ไม่แตกต่างจากการติดตั้งปลั๊กอินอื่น ๆ คุณสามารถดาวน์โหลดและอัปโหลดไฟล์ในโฟลเดอร์ได้โดยตรงปล่อยให้หิมะตกไปที่/wp-content/plugins/directory จากนั้นเปิดใช้งานปลั๊กอินนี้และตั้งปลั๊กอินในเมนูแผงการจัดการ WordPress หรือค้นหาโดยตรงในไลบรารีปลั๊กอินด้านหลังคุณสามารถค้นหาได้
ปล่อยให้เว็บไซต์อย่างเป็นทางการของหิมะ: คลิกเพื่อเยี่ยมชม
รหัสเอฟเฟกต์สี่
ฉันเคยเห็นปลั๊กอินพายุหิมะที่ทรงพลังมากทางออนไลน์ มันยอดเยี่ยมมากดูเหมือนว่ารหัสสำหรับการค้นหาปล่อยให้มันหิมะบน Google จะมีเอฟเฟกต์หิมะและน้ำค้างแข็งซึ่งสร้างสรรค์มาก หากคุณคิดว่าคุณมีรองเท้าเด็กที่ดีคุณสามารถไปที่เว็บไซต์อย่างเป็นทางการได้ด้วยตัวเอง
ฉันพบรหัสเอฟเฟกต์เกล็ดหิมะแบบสุ่มแบบง่าย ๆ ออนไลน์เพื่อแบ่งปันกับคุณ (เอฟเฟกต์นี้เขียนด้วยรหัสบริสุทธิ์เกล็ดหิมะคือ *.):
มีการอธิบายฟังก์ชั่นบางอย่างสั้น ๆ :
1. LetitsNow ()
หิมะตก (ประโยคนี้ยังไร้ประโยชน์) จากนั้น CreateSnow จะถูกเรียกให้สร้างเกล็ดหิมะ
2. CreateSnow ()
เกล็ดหิมะแต่ละอันเป็นแท็ก <i> และ "*" ถูกวางไว้ข้างในเพื่อจำลองเกล็ดหิมะ (สำเนาของ Google ไม่สามารถดาวน์โหลดได้จริง ๆ แล้วมันแสดงให้เห็นว่ามันเป็นพื้นที่ฉันทำดวงอาทิตย์ ... ) จากนั้นวางไว้ในภาชนะขนาดใหญ่ที่เรียกว่ากล่องหิมะ เกล็ดหิมะใช้วิธีการวางตำแหน่งแบบสัมบูรณ์พร้อมกล่องหิมะเป็นข้อมูลอ้างอิง ด้านบนคือ 0px และซ้ายใช้ math.random ()*window.screen.width เพื่อให้สามารถสร้างเกล็ดหิมะแบบสุ่มในความกว้างของหน้าจอ
ใช้สีเพื่อควบคุมความลึกสีของเกล็ดหิมะเพื่อสร้างความลึกของสนามตั้งแต่ 0 ถึง 200
ใช้ตัวอักษรเพื่อควบคุมขนาดเกล็ดหิมะตั้งแต่ 10px ถึง 15px
ใช้เวลาในการควบคุมช่วงเวลาการโทรของเกล็ดหิมะที่ตกลงมาตั้งแต่ 40ms ถึง 50ms
ใช้ SnowInterval เพื่อควบคุมช่วงเวลาของการสร้างเกล็ดหิมะตั้งแต่ 500ms ถึง 1,000ms
จากนั้นเรียกตัวเองว่าเรียกซ้ำตัวเองและเกล็ดหิมะจะถูกสร้างขึ้นอย่างต่อเนื่อง
3. Falldown ()
ตามชื่อที่แนะนำนั่นหมายความว่าเกล็ดหิมะลดลงด้วยความเร็ว 2px ซึ่งหมายความว่าแต่ละแนวตั้งลดลง 2px ในเวลานี้ทำการทดสอบ หากเกล็ดหิมะลดลงถึงความสูงคงที่ซึ่งสูงกว่าภาชนะแม่ให้เอาออก สิ่งนี้สามารถลดความดันบนเบราว์เซอร์ มิฉะนั้นเกล็ดหิมะจำนวนมากเกินไปจะทำให้เบราว์เซอร์ช้าลงและช้าลง อย่างไรก็ตามมันล้น: ซ่อนเร้นและมองไม่เห็นและมันสะอาดถ้าคุณไม่เห็น จากนั้นเรียกฟังก์ชั่น Windblow ในขณะที่ลงมาในแนวตั้งเพื่อทำให้เกล็ดหิมะมีศิลปะมากขึ้น
4. Windblow ()
ชื่อดูเหมือนจะพัดลม แต่จริงๆแล้วมันเป็นผลของการพัดลม (มันไร้ประโยชน์มากขึ้นฮ่าฮ่า) ใช้ math.sin () เพื่อสร้างผลกระทบของเกล็ดหิมะที่ลอยอยู่ในอากาศเพื่อให้เกล็ดหิมะจะไม่ตกอยู่ในลักษณะที่น่าเบื่อ แต่จะตกอยู่ในรูปงูควบคุมช่วงเวลาของการลดลงเพื่อให้ความต่อเนื่องดีขึ้นและดูสบายขึ้น
ฟังก์ชั่น letitsNow () {var snowbox = document.getElementById ("Snowbox"); var iarray = new Array (); createsNow (Snowbox, iarray);} ฟังก์ชั่น Falldown (temobj, array) {var speed = 2; var top = parseint ความดันเบราว์เซอร์สำหรับ (var i = 0; i <iarray.length; i ++) {ถ้า (temobj == iarray [i]) {iarray.splice (i, 1); var snowbox = document.getelementbyid ("Snowbox"); ลม = windblow (temobj, top); temobj.style.left = parseint (temobj.style.left)+ลม*2+"px";} ฟังก์ชั่น windblow (temobj, ด้านบน) {ถ้า (parseint (math.random ())%2 == 1) Math.sin กลับมา createSnow (Snowbox, iarray) {var temobj = document.createElement ("i"); var temtext = document.createtextNode ("*"); temobj.appendchild (temtext); temobj.style.left = parseint (math.random ()*window.screen.width)+"px"; temobj.style.top = "0px" Temnum = parseint (math.random ()*200); temobj.style.color = "#"+Temnum.toString (16)+Temnum.toString (16)+Temnum.toString (16)+Temnum.toString (16); Temnum = 0; ในขณะที่ (Temnum <10) {Temnum = ParseInt (math.random ()*15);} temobj.style.fontsize = temnum+"px"; var time = 0; ในขณะที่ (เวลา <40) {time = parseint (math.random ()*50);} temobj.timer = setInterval (ฟังก์ชัน () {Falldown (temobj, iarray);}, เวลา); var snowinterval = 0; createTimer = settimeout (function () {createSnow (Snowbox, iarray); ClearTimeout (createTimer);}, Snowinterval);}ที่อยู่ตัวอย่าง: http://demo.vevb.com/js/2014/snow/
ตกลงรหัสเอฟเฟกต์ทั้งสี่จบลงที่นี่ หวังว่ามันจะช่วยเพื่อนที่ต้องการ หากคุณมีคำถามใด ๆ โปรดฝากข้อความไว้ด้านล่าง