गिरती बर्फ खेल की स्क्रिप्ट। वेब डिज़ाइन और खोज इंजन अनुकूलन। संग्रह डाउनलोड करें और इसे अनज़िप करें

जैसे-जैसे नया साल आता है, ज्यादातर वेबसाइटों पर दो चीजें दिखाई देती हैं: "गिरती बर्फ" और बिक्री और छूट का एक पृष्ठ। दोनों ही बहुत सरलता से किये जाते हैं। स्नो - jQuery प्लगइन्स का उपयोग करना, और कीमत टैग के ऊपर एक मोटी लाल रेखा के साथ पार की गई बड़ी संख्या को दर्शाकर छूट और बिक्री, जो कथित तौर पर पुरानी कीमत के अनुरूप है।

हालाँकि, अब हम केवल साइट पेज पर "गिरती बर्फ" डालने में रुचि रखते हैं। इसके लिए कई सरल विकल्प हैं। आइए jQuery पर आधारित उनमें से दो को देखें।

हम एक नया फ़ोल्डर, जिसे स्वाभाविक रूप से स्नो नाम दिया गया है, बनाकर "फ़ॉलिंग स्नो" की स्थापना शुरू करते हैं, फिर संग्रह को डाउनलोड करते हैं और इसे इस फ़ोल्डर में अनपैक करते हैं। इसमें हमारी दो स्क्रिप्ट jquery-1.8.3.min.js और jquery.snow.js होंगी।

इसके बाद, आपको टैग के अंदर पेज हेडर में जोड़ना होगा ... इन स्क्रिप्ट्स के पथों को इंगित करने वाली निम्नलिखित पंक्तियाँ, और "गिरती बर्फ" को आरंभ करने के लिए एक छोटी जावास्क्रिप्ट:

$(दस्तावेज़).तैयार(फ़ंक्शन())(
$.fn.बर्फ();
});

साइट पेज पर बर्फ दिखाने के लिए, बस टैग के अंदर जोड़ें
.

इस प्लगइन में केवल चार सेटिंग्स हैं। वे jquery.snow.js फ़ाइल की शुरुआत में स्थित हैं और इन्हें किसी भी संपादक या नोटपैड में बदला जा सकता है:
न्यूनतम आकार: 10 , // न्यूनतम बर्फ के टुकड़े का आकार
अधिकतम आकार: 20 , // बर्फ के टुकड़े का अधिकतम आकार
न्यूऑन: 500 , // एमएस में बर्फ के टुकड़ों की उपस्थिति की आवृत्ति, यानी बर्फ का घनत्व
परत का रंग: "#bbbbbb" // बर्फ के टुकड़ों का रंग

बर्फ के लिए z-index:10 मान भी नोट करें, जो jquery.snow.js फ़ाइल की पहली पंक्तियों में सेट है। यह स्लाइडर्स (स्लाइड शो) और ड्रॉप-डाउन मेनू के शीर्ष पर बर्फ के टुकड़ों की स्थिति निर्धारित करता है, यदि आपके पृष्ठ पर वे हैं।

"गिरती बर्फ" का दूसरा संस्करण
इस विकल्प के लिए, आप बर्फ के टुकड़ों की अपनी तस्वीरों का उपयोग करें, जैसा कि चित्र 1 में दिखाया गया है। इसके लिए धन्यवाद, प्लगइन अधिक रंगीन है, और इसके अतिरिक्त, इसे अन्य प्रभावों के लिए सफलतापूर्वक उपयोग किया जा सकता है। उदाहरण के लिए, बर्फ के टुकड़ों की तस्वीरों को गुलाब की पंखुड़ियों से बदलकर, आप एक शादी की वेबसाइट के पेज को सजा सकते हैं, और गिरती हुई डेज़ी गर्मी की छुट्टियों के बारे में एक वेबसाइट पर फिट हो जाएंगी।

स्थापित करने के लिए, हम फिर से स्नो फ़ोल्डर का उपयोग करते हैं, केवल अब हम इसमें एक और संग्रह को अनपैक करेंगे, जिसमें स्क्रिप्ट के अलावा, स्नोफ्लेक की चार अलग-अलग छवियां हैं। अगला, पहले उदाहरण के समान, टैग के अंदर... नई "गिरती बर्फ" फ़ाइलों के पथ को इंगित करने वाली पंक्तियाँ डालें:

और अंत में, टैग के अंदर लाइन जोड़ें (अधिमानतः पृष्ठ की शुरुआत में)
.

यदि आपके पास बर्फ नहीं है, तो सुनिश्चित करें कि आपने स्नोफ्लेक छवियों का पूरा पता स्नो.जेएस फ़ाइल की निम्नलिखित पंक्ति में सही ढंग से दर्ज किया है:
वर img='' "; .

बर्फ के घनत्व का समायोजन उसी फ़ाइल में पंक्ति में एक संख्यात्मक तर्क द्वारा निर्दिष्ट किया गया है
सेटटाइमआउट('बर्फ('+आईडी+');',100 ); // बर्फ के टुकड़ों की आवृत्ति,
और एक पंक्ति में बर्फ के टुकड़ों की गति की गति
$("#snow_"+id).animate((top:"150%",left:""+end_x+"%"),20000 ,function() // स्नोफ्लेक्स मूवमेंट स्पीड

इसके अलावा, पहले विकल्प की तरह, z-index:10 मान पर ध्यान दें ताकि बर्फ पृष्ठ पर स्थित स्लाइडर्स, ड्रॉप-डाउन मेनू आदि को ओवरलैप कर सके।

शुभ दिन और नया साल मुबारक। नए साल की पूर्व संध्या पर, मैं आपके साथ एक बहुत ही हल्का, सुंदर और सरल गिरती बर्फ प्लगइन साझा करना चाहता हूं। यह स्क्रिप्ट वास्तव में बहुत हल्की है और आसानी से HTML फ़ाइल में फिट हो जाती है, जिससे साइट के HTML कोड के साथ काम करना मुश्किल नहीं होता है। सच है, इसे एक अलग फ़ाइल में रखा जा सकता है। लेकिन सुविधा के लिए, मैंने सब कुछ एक फ़ाइल में किया।

यहां कहने को ज्यादा कुछ नहीं है, इस गिरती बर्फ का प्रदर्शन देखना बेहतर है। इसके अलावा, एक बहुत ही सुंदर पृष्ठभूमि और Google से एक सुंदर "लॉबस्टर" फ़ॉन्ट में लिखा गया शिलालेख "हैप्पी न्यू ईयर" है। आप इस फ़ाइल को आसानी से ऑनलाइन ग्रीटिंग कार्ड में बदल सकते हैं।

यह इस प्रकार जुड़ता है: टैग के बीच और निम्नलिखित कोड डालें:

सीएसएस कोड को अपनी सीएसएस फ़ाइल में चिपकाएँ (आमतौर पर style.css):

#कैनवास (बॉर्डर: 1px ठोस काला; स्थिति: निरपेक्ष; z-सूचकांक: 10000; ) #फ्लेक (रंग: #fff; स्थिति: निरपेक्ष; फ़ॉन्ट-आकार: 25px; शीर्ष: -50px; )

आइए एक फ़ाइल स्नो.जेएस बनाएं और वहां निम्नलिखित जावास्क्रिप्ट कोड डालें:

var t = setInterval(function())( var documentHeight = $(document).height(); varstartPositionLeft = Math.random() * $(document).width() - 100; varstartOpacity = 0.5 + Math.random ( ); var sizeFlake = 10 + Math.random() * 20; var EndPositionTop = documentHeight - 40; var EndPositionLeft =startPositionLeft - 100 + Math.random() * 200; var periodFall = documentHeight * 10 + Math.random() * 5000; $("#flake") .clone() .appendTo("body") .css(( बाएँ:startPositionLeft, opacity:startOpacity, "font-size": sizeFlake )) .animate(( शीर्ष:endPositionTop, बाएँ: समाप्ति स्थिति बाएँ, अपारदर्शिता: 0.2 ), अवधिफ़ॉल, "रैखिक", फ़ंक्शन() ($(यह).निकालें()); ), 500); वर बर्फ = (); वर स्नोफ्लेक्स = (); स्नोफ्लेक्स.क्रिएट = फ़ंक्शन (स्नोफ्लेक्स) (var फ्लेक्स = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; फ्लेक्स . style.top = - 50 + Math.random() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; flex.style.position = "absolute"; flex. शैली .रंग = "#F3F3F3"; flex.style.opacity = Math.random(); document.getElementsByTagName("body").appendChild(flex); return flex; ); स्नो.स्नोफ्लेक्स = फंक्शन()( var फ्लेक्स = स्नोफ्लेक्स.क्रिएट(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parseInt(flex . style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; यदि (parseInt(flex.style.top) > 1500) ( ClearInterval(t) ) ; document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); स्नो.स्टॉर्म = फंक्शन())( var t = सेटइंटरवल(फंक्शन())( स्नो.स्नोफ्लेक्स(); ), 500); ); //बर्फ.तूफान(); वर कोहरा = (); फॉग.ड्रा = फ़ंक्शन(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.closePath(); ctx.fill(); ); Fog.start = function())( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function())( x = 300 + 300*गणित.पाप(x); y = 300 + 300* -गणित.cos(x); //कोहरे शुरुआत();

हम js फ़ाइल को इसमें शामिल करते हैं:

खैर, सबसे महत्वपूर्ण बात यह है - कहीं भी गिरती बर्फ का HTML कोड डालें:

❄

यदि आपने सब कुछ सही ढंग से किया, तो आपकी साइट पर बर्फ गिरनी शुरू हो जाएगी।

यह विकल्प इस मायने में अलग है कि इसमें एक पृष्ठभूमि छवि और एक बड़ा "नया साल मुबारक" शीर्षक है। गिरती बर्फ स्क्रिप्ट के इस संस्करण को अपनी वेबसाइट से कनेक्ट करना काफी सरल है। करने की जरूरत है:

jQuery लाइब्रेरी को शामिल करना सुनिश्चित करें (यदि आपके पास पहले से ही यह लाइब्रेरी शामिल है तो यह आवश्यक नहीं है)। यह इस प्रकार जुड़ता है: टैग के बीच और निम्नलिखित कोड डालें:

JQuery लाइब्रेरी को कनेक्ट करने के समान, हम अपने "हैप्पी न्यू ईयर" शिलालेख के लिए फ़ॉन्ट कनेक्ट करते हैं:

स्वाभाविक रूप से, यदि आपको इस शिलालेख और फ़ॉन्ट की आवश्यकता नहीं है, तो आपको इसे शामिल करने की आवश्यकता नहीं है, लेकिन फिर सीएसएस में, H1 विशेषता से "फ़ॉन्ट-फ़ैमिली: "लॉबस्टर", कर्सिव;" हटा दें, या इसे बदल दें अपने स्वयं के फ़ॉन्ट के साथ

विकल्प ए: सीएसएस कोड को अपनी सीएसएस फ़ाइल में पेस्ट करें। यहाँ कोड है:

Img.bg (/* पृष्ठभूमि भरने के लिए नियम सेट करें */ न्यूनतम-ऊंचाई: 100%; न्यूनतम-चौड़ाई: 1024px; /* आनुपातिक स्केलिंग सेट करें */ चौड़ाई: 100%; ऊंचाई: ऑटो; /* स्थिति सेट करें */ स्थिति: निश्चित; शीर्ष: 0; बाएँ: 0; ) h1 (फ़ॉन्ट-फ़ैमिली: "लॉबस्टर", कर्सिव; रंग: #FFF; फ़ॉन्ट-आकार: 90px; पाठ-संरेखण: केंद्र; पंक्ति-ऊँचाई: 95px; फ़ॉन्ट- वजन: सामान्य; मार्जिन-टॉप: 300px; टेक्स्ट-छाया: 5px 5px 5px #000; ) @मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 1024px) ( /* इस विशेष छवि के लिए विशिष्ट */ img.bg (बाएं: 50% ; मार्जिन-बाएं: -512पीएक्स; /* 50% */ ) ) एचटीएमएल, बॉडी (फ़ॉन्ट-फ़ैमिली: हेल्वेटिका, एरियल, सेन्स-सेरिफ़; फ़ॉन्ट-आकार: 12पीएक्स; लाइन-ऊंचाई: 16पीएक्स; पैडिंग: 0; मार्जिन: 0; रंग: #333; ) .बार (पृष्ठभूमि-रंग: #111; रंग: #f0f0f0; बॉक्स-छाया: 0px 0px 2px #333; लाइन-ऊंचाई: 25px; पैडिंग: 0px 20px; अस्पष्टता: 0.7; ) । बार: होवर (अस्पष्टता: 1; ) .बार ए (रंग: #DDD; ) .बार ए: होवर (रंग: #FFFFFF; ) ए (रंग: #FFFFFF; पाठ-सजावट: कोई नहीं; ) ए: होवर ( रंग : #CCC; ) #कैनवास (बॉर्डर: 1px ठोस काला; स्थिति: पूर्ण; z-सूचकांक: 10000; ) #फ्लेक (रंग: #fff; स्थिति: पूर्ण; फ़ॉन्ट-आकार: 25px; शीर्ष: -50px; ) #पेज (स्थिति: सापेक्ष;)

विकल्प बी. आप एक अलग फ़ाइल भी बना सकते हैं, उदाहरण के लिए स्नो.सीएसएस और उसी कोड को वहां पेस्ट कर सकते हैं, हालांकि इसे निम्नानुसार शीर्ष में शामिल करने की आवश्यकता होगी:

विकल्प A. ऐसा करने के लिए, हमें साइट के बिल्कुल नीचे (बंद करने से पहले) निम्नलिखित जावास्क्रिप्ट कोड डालना होगा:

var t = setInterval(function())( var documentHeight = $(document).height(); varstartPositionLeft = Math.random() * $(document).width() - 100; varstartOpacity= 0.5 + Math.random ( ); var sizeFlake= 10 + Math.random() * 20; var EndPositionTop= documentHeight - 40; var EndPositionLeft=startPositionLeft - 100 + Math.random() * 200; var periodFall= documentHeight * 10 + Math.random() * 5000; $("#flake") .clone() .appendTo("body") .css(( बाएँ:startPositionLeft, opacity:startOpacity, "font-size": sizeFlake )) .animate(( शीर्ष:endPositionTop, बाएँ: समाप्ति स्थिति बाएँ, अपारदर्शिता: 0.2 ), अवधि पतन, "रैखिक", फ़ंक्शन() ($(यह).निकालें()); ), 500); वर बर्फ = (); वर स्नोफ्लेक्स = (); स्नोफ्लेक्स.क्रिएट = फ़ंक्शन (स्नोफ्लेक्स) (var फ्लेक्स = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; फ्लेक्स . style.top = - 50 + Math.random() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; flex.style.position = "absolute"; flex. शैली .रंग = "#F3F3F3"; flex.style.opacity= Math.random(); document.getElementsByTagName("body").appendChild(flex); return flex; ); स्नो.स्नोफ्लेक्स = फंक्शन()( var फ्लेक्स = स्नोफ्लेक्स.क्रिएट(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parseInt(flex . style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; यदि (parseInt(flex.style.top) > 1500) ( ClearInterval(t) ) ; document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); स्नो.स्टॉर्म = फ़ंक्शन())( var t= सेटइंटरवल(फ़ंक्शन())( स्नो.स्नोफ्लेक्स(); ), 500); ); //बर्फ.तूफान(); वर कोहरा = (); फॉग.ड्रा = फ़ंक्शन(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.closePath(); ctx.fill(); ); Fog.start = function())( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function())( x = 300 + 300*गणित.पाप(x); y = 300 + 300* -गणित.cos(x); //कोहरे शुरुआत();

विकल्प बी. सीएसएस कोड की तरह, जावास्क्रिप्ट को एक अलग फ़ाइल में रखा जा सकता है और इसे स्नो.जेएस भी कहा जाता है और शीर्ष में शामिल किया जा सकता है:

अपनी साइट के मूल में संग्रह से छवि bg.jpg अपलोड करें

खैर, सबसे महत्वपूर्ण बात जो बची है वह है गिरती बर्फ का HTML कोड डालना:

नए साल की शुभकामनाएँ! ❄

गिरती बर्फ़ स्क्रिप्ट को सफलतापूर्वक कनेक्ट कर दिया गया है। इसे कार्रवाई में अवश्य देखें। शुभकामनाएं!

सर्दियों से पहले बहुत कम समय बचा है, और बड़ी संख्या में वेबमास्टर अपनी साइटों पर उचित माहौल बनाना शुरू कर रहे हैं। इस अवसर पर, हम आपकी वेबसाइट के लिए बर्फ प्रभावों का चयन प्रस्तुत करते हैं।

हम अपना चयन एक बहुत ही सुंदर बर्फ प्रभाव के साथ शुरू करेंगे, जिसे "jSnow" नामक प्लगइन का उपयोग करके साइट पर जोड़ा गया है।

प्रदर्शन:

सहमत - सुंदर!

इस प्रभाव को अपनी वेबसाइट पर स्थापित करने के लिए, निम्नलिखित कार्य करें।

1. लेख के अंत में jsnow.zip संग्रह डाउनलोड करें। एफ़टीपी या आपके लिए सुविधाजनक अन्य विधि के माध्यम से सामग्री को अनज़िप करें और अपनी वेबसाइट पर अपलोड करें।

दुर्भाग्य से, स्क्रिप्ट jQuery के नए संस्करणों के साथ काम नहीं करती है, इसलिए हमारे पास जो कुछ है हम उससे संतुष्ट हैं।

3. पहलेस्क्रिप्ट शामिल करने के लिए समापन टैग का उपयोग करें:

$(document).ready(function() ($("body").jSnow(( vआकार: 100, // गुच्छे क्षेत्र का आकार: 30, // बर्फ के टुकड़ों की संख्या परत रंग: ["#fff"], // रंग फ्लेक न्यूनतम आकार: 10, // बर्फ के टुकड़े के टुकड़े का न्यूनतम आकार अधिकतम आकार: 20, // बर्फ के टुकड़े के गिरने का अधिकतम आकार गति न्यूनतम: 1, // बर्फ के टुकड़े के गिरने की न्यूनतम गति गति अधिकतम: 2, // बर्फ के टुकड़े के टुकड़े की अधिकतम गति कोड:["।" ] // बर्फ के टुकड़े का प्रकार )); ) );

यह कोड बर्फ के टुकड़ों के आकार, उनके कब्जे वाले क्षेत्र की ऊंचाई, रंग और अन्य टिप्पणी किए गए मापदंडों को समायोजित करता है।

जैसा कि आप समझते हैं, स्क्रिप्ट सार्वभौमिक है, और गोल बर्फ के बजाय आप तारे जोड़ सकते हैं, उदाहरण के लिए, इस तरह:

फ्लेककोड:["*"] // स्नोफ्लेक उपस्थिति

या गोल बर्फ और तारों का एक गुच्छा:

फ्लेककोड:[।"", "*"] // स्नोफ्लेक उपस्थिति

साथ ही किसी अन्य प्रतीक (और यहां तक ​​कि डॉलर चिह्न - $) की तरह।

स्क्रिप्ट मुख्य सामग्री को ओवरलैप किए बिना साइट के शीर्ष को सजाने के लिए बहुत अच्छी है।

आप पूछते हैं, स्मार्ट क्यों? क्योंकि इस स्क्रिप्ट में (इस लेख में चर्चा की गई अन्य स्क्रिप्ट के विपरीत) बर्फ के टुकड़ों को दूर करने का एक अतिरिक्त प्रभाव है। यानी जब आप अपनी साइट पर माउस कर्सर घुमाते हैं तो बर्फ के टुकड़े उससे विपरीत दिशा में दौड़ते हैं। कर्सर स्क्रीन के मध्य से जितना दूर होगा, बर्फ के टुकड़े उतनी ही तेजी से आगे बढ़ेंगे।

प्रदर्शन:

इस प्रभाव को आपकी साइट पर स्थापित करने के लिए, किसी अतिरिक्त लाइब्रेरी की आवश्यकता नहीं है। आपको बस इतना करना है:

1. लेख के अंत में स्नोस्टॉर्म.ज़िप संग्रह डाउनलोड करें। आपके लिए सुविधाजनक तरीके से अपनी साइट पर सामग्री को अनज़िप करें और अपलोड करें।

window.onload = function() ( स्नोस्टॉर्म.स्नो कलर = "#fff"; // स्नोफ्लेक्स का रंग स्नोस्टॉर्म.फ्लेक्समैक्सएक्टिव = 100; // दृश्यमान स्नोफ्लेक्स की अधिकतम संख्या स्नोस्टॉर्म.फॉलोमाउस = सत्य; // सत्य - कर्सर का पीछा करें, गलत - कोई स्नोस्टॉर्म.स्नो कैरेक्टर = "।"; // स्नोफ्लेक का प्रकार);

यदि आवश्यक हो, तो स्क्रिप्ट एनीमेशन में परिवर्तन करें।

इस तथ्य के अलावा कि बर्फ के टुकड़े कर्सर से दूर धकेल दिए जाते हैं, उनमें से कुछ स्क्रीन के नीचे चिपक जाते हैं, जिससे बर्फ के टुकड़े के बर्फ के बहाव का हल्का सा आभास होता है।

मुझे यह स्क्रिप्ट सबसे अधिक पसंद है, क्योंकि यह बारीक बर्फ के कणों को लागू करती है और निर्दिष्ट तत्वों पर छोटे स्नोड्रिफ्ट भी एकत्र करती है।

प्रदर्शन:

इस प्रभाव को स्थापित होने में दूसरों की तुलना में थोड़ा अधिक समय लगता है।

1. यदि आपकी साइट में jQuery लाइब्रेरी नहीं है, तो इसे HEAD अनुभाग में शामिल करें:

3. शुरुआती टैग को "डार्कबीजी" वर्ग निर्दिष्ट करें:

4. पहलेसमापन टैग के साथ स्क्रिप्ट शामिल करें:

$(document).ready(function() ( document.body.className = "darkBg"; $(document).snowfall((collection: ".collectonme", flakeCount: 200 // बर्फ के टुकड़ों की संख्या )); ));

5. और अंतिम चरण में, उन तत्वों को एक वर्ग निर्दिष्ट करें जिन पर स्नोड्रिफ्ट बनना चाहिए:

क्लास='कलेक्टोनमी'

यदि आप नहीं चाहते कि साइट पर स्नोड्रिफ्ट का निर्माण हो, तो स्क्रिप्ट से लाइन हटा दें:

संग्रह: ".collectonme",

यह एक अनिवार्य कार्रवाई है, अन्यथा आपकी साइट पर बर्फ नहीं गिरेगी।

उत्कृष्ट स्क्रिप्ट, यह बिल्कुल वही है जो हमने पहले अपनी वेबसाइट पर उपयोग किया था।

यहां, जैसा कि आप समझते हैं, हम सभी प्रकार की स्क्रिप्ट का उपयोग नहीं करेंगे, बल्कि शुद्ध सीएसएस से काम चलाएंगे।

प्रदर्शन:

जादुई, है ना?

इस प्रभाव को अपने लिए स्थापित करने के लिए, तीन सरल कदम उठाएँ।

1. लेख के अंत में स्नो_आईएमजी.ज़िप संग्रह डाउनलोड करें। एफ़टीपी के माध्यम से या अपने होस्टिंग फ़ाइल प्रबंधक के माध्यम से सामग्री को अनज़िप करें और अपनी साइट पर अपलोड करें।

2. अपनी स्टाइल फ़ाइल में, सम्मिलित करें (अधिमानतः सबसे नीचे):

स्नोकंटेनर (चौड़ाई: 100%; ऊँचाई: 100%; स्थिति: पूर्ण; शीर्ष: 0; बाएँ:0; z-सूचकांक: -1; ) #स्नो (चौड़ाई: 100%; ऊँचाई: 100%; पृष्ठभूमि-छवि: यूआरएल ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -वेबकिट-एनीमेशन: स्नो 20s रैखिक अनंत; -moz-एनीमेशन: स्नो 20एस रैखिक अनंत; -एमएस-एनीमेशन: स्नो 20एस रैखिक अनंत; एनीमेशन: स्नो 20एस रैखिक अनंत; ) @कीफ्रेम स्नो (0% (पृष्ठभूमि-स्थिति: 0पीएक्स 0पीएक्स, 0पीएक्स 0पीएक्स, 0पीएक्स 0पीएक्स;) 100% (पृष्ठभूमि-स्थिति) : 500px 1000px, 400px 400px, 300px 300px; ) ) @-moz-keyframes बर्फ ( 0% ( पृष्ठभूमि-स्थिति: 0px 0px, 0px 0px, 0px 0px; ) 100% ( पृष्ठभूमि-स्थिति: 500px 1000px, 400px 4 00px, 300px 300px; ) ) @-वेबकिट-कीफ़्रेम स्नो ( 0% ( पृष्ठभूमि-स्थिति: 0px 0px, 0px 0px, 0px 0px; ) 100% ( पृष्ठभूमि-स्थिति: 500px 1000px, 400px 400px, 300px 300px; ) ) @-ms- कीफ़्रेम स्नो ( 0% ( पृष्ठभूमि-स्थिति: 0px 0px, 0px 0px, 0px 0px; ) 100% ( पृष्ठभूमि-स्थिति: 500px 1000px, 400px 400px, 300px 300px; ) )

फिर सभी परिवर्तन सहेजें.

यहां बर्फ के प्रभावों का एक अच्छा चयन है जो निस्संदेह आपकी वेबसाइट के आगंतुकों को प्रसन्न करेगा।