How to add Snowfall Effect in Blogger (Blog) Css,jquery,HTML

#HindiAndEnglishContent

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

मुझे पता है कि आप अपने ब्लॉग में इतना अच्छा प्रभाव जोड़ने के लिए काफी उत्साहित हैं। चिंता न करें मैं आपके ब्लॉग में हिमपात प्रभाव जोड़ने के लिए नीचे स्क्रिप्ट साझा करूंगा। यहां तक ​​कि आपको किसी कोडिंग कौशल की आवश्यकता नहीं है।

इस हिमपात प्रभाव की विशेषताएं?

यह विजेट वास्तव में सरल लेकिन सुंदर और रोचक है। और आप अपने हिसाब से Customize कर सकते है। इसके अलावा इस विजेट की कुछ विशेषताएं इस प्रकार हैं:

इसे अपने ब्लॉग में सेटअप करना बेहद आसान है। इसे इंस्टॉल करने में 5 मिनट से भी कम समय लगेगा। 

यह आपकी साइट के लोडिंग समय को प्रभावित नहीं करता है। साथ ही यह अन्य विजेट के साथ संघर्ष नहीं करेगा।

स्नोफ्लेक्स के आकार, आकार, गति, संख्या, रंग और रूप को आसानी से अनुकूलित किया जा सकता है

आपको अपने ब्लॉग पर किसी अन्य तृतीय-पक्ष साइट से लोड होने वाली किसी होस्ट की गई जावास्क्रिप्ट फ़ाइल का उपयोग करने की आवश्यकता नहीं है।

आसानी से हटाने योग्य विजेट, जब भी आप चाहें प्रभाव को हटा सकते हैं।

Jquery लाइब्रेरी जोड़ना (वैकल्पिक)

यह एक ऐच्छिक कार्य है। अधिकांश ब्लॉगर टेम्प्लेट में जैकरी फ़ाइल होती है। लेकिन अगर आपके ब्लॉगर टेम्पलेट में Jquery फाइल नहीं है, तो आप क्लोजिंग हेडर सेक्शन के ऊपर नीचे दी गई फाइल को जोड़ सकते हैं।

चरण # 1:  अपने ब्लॉगर खाते में प्रवेश करें और अपने  ब्लॉगर डैशबोर्ड पर जाएँ

चरण # 2:  अब क्लिक करें ->  टेम्पलेट  ->  HTML संपादित करें पर क्लिक करें

चरण #3:  अब  + (विंडोज़) या + (मैक) दबाकर </head> खोजें Ctrl+F, CMD+F

चरण #4:  नीचे दिए गए कोड को कॉपी करें और कोड को  </head> के ऊपर/पहले पेस्ट करें

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

चरण  # 5:  अंत में सेव टेम्प्लेट  को हिट  करें 

बस इतना ही है कि आपने अपने ब्लॉग में Jquery लाइब्रेरी को सफलतापूर्वक जोड़ लिया है। यदि आपके टेम्पलेट में पहले से ही यह फ़ाइल है और Jquery फ़ाइल का कोई अद्यतन संस्करण है तो बस अगले चरण पर जाएँ।

डायनेमिक स्नो फॉल इफेक्ट कैसे जोड़ें?

कृपया अपने ब्लॉगर टेम्प्लेट में क्यूट डायनेमिक स्नो फॉल इफेक्ट जोड़ने के लिए नीचे दिए गए चरणों का पालन करें  ।

चरण # 1:  अपने ब्लॉगर खाते में प्रवेश करें और अपने  ब्लॉगर डैशबोर्ड पर जाएँ

चरण # 2:  अब क्लिक करें ->  टेम्पलेट  ->  HTML संपादित करें पर क्लिक करें

चरण #3:  अब  </body> को  + (विंडोज) या + (मैक) दबाकर खोजें Ctrl+F, CMD+F

चरण #4:  नीचे दिए गए कोड को कॉपी करें और कोड को  </body> के ऊपर/पहले पेस्ट करें

Copy To Clipboard

<script type='text/javascript'> //<![CDATA[ var snowStorm=(function(window,document){this.autoStart=true;this.excludeMobile=false;this.flakesMax=128;this.flakesMaxActive=64;this.animationInterval=33;this.useGPU=true;this.className=null;this.excludeMobile=true;this.flakeBottom=null;this.followMouse=true;this.snowColor='#fff';this.snowCharacter='•';this.snowStick=true;this.targetElement=null;this.useMeltEffect=true;this.useTwinkleEffect=false;this.usePositionFixed=false;this.usePixelPosition=false;this.freezeOnBlur=true;this.flakeLeftOffset=0;this.flakeRightOffset=0;this.flakeWidth=8;this.flakeHeight=8;this.vMaxX=5;this.vMaxY=4;this.zIndex=0;var storm=this,features,isIE=navigator.userAgent.match(/msie/i),isIE6=navigator.userAgent.match(/msie 6/i),isMobile=navigator.userAgent.match(/mobile|opera m(ob|in)/i),isBackCompatIE=(isIE&&document.compatMode==='BackCompat'),noFixed=(isBackCompatIE||isIE6),screenX=null,screenX2=null,screenY=null,scrollY=null,docHeight=null,vRndX=null,vRndY=null,windOffset=1,windMultiplier=2,flakeTypes=6,fixedForEverything=false,targetElementIsRelative=false,opacitySupported=(function(){try{document.createElement('div').style.opacity='0.5';}catch(e){return false;} return true;}()),didInit=false,docFrag=document.createDocumentFragment();features=(function(){var getAnimationFrame;function timeoutShim(callback){window.setTimeout(callback,1000/(storm.animationInterval||20));} var _animationFrame=(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||timeoutShim);getAnimationFrame=_animationFrame?function(){return _animationFrame.apply(window,arguments);}:null;var testDiv;testDiv=document.createElement('div');function has(prop){var result=testDiv.style[prop];return(result!==undefined?prop:null);} var localFeatures={transform:{ie:has('-ms-transform'),moz:has('MozTransform'),opera:has('OTransform'),webkit:has('webkitTransform'),w3:has('transform'),prop:null},getAnimationFrame:getAnimationFrame};localFeatures.transform.prop=(localFeatures.transform.w3||localFeatures.transform.moz||localFeatures.transform.webkit||localFeatures.transform.ie||localFeatures.transform.opera);testDiv=null;return localFeatures;}());this.timer=null;this.flakes=[];this.disabled=false;this.active=false;this.meltFrameCount=20;this.meltFrames=[];this.setXY=function(o,x,y){if(!o){return false;} if(storm.usePixelPosition||targetElementIsRelative){o.style.left=(x-storm.flakeWidth)+'px';o.style.top=(y-storm.flakeHeight)+'px';}else if(noFixed){o.style.right=(100-(x/screenX*100))+'%';o.style.top=(Math.min(y,docHeight-storm.flakeHeight))+'px';}else{if(!storm.flakeBottom){o.style.right=(100-(x/screenX*100))+'%';o.style.bottom=(100-(y/screenY*100))+'%';}else{o.style.right=(100-(x/screenX*100))+'%';o.style.top=(Math.min(y,docHeight-storm.flakeHeight))+'px';}}};this.events=(function(){var old=(!window.addEventListener&&window.attachEvent),slice=Array.prototype.slice,evt={add:(old?'attachEvent':'addEventListener'),remove:(old?'detachEvent':'removeEventListener')};function getArgs(oArgs){var args=slice.call(oArgs),len=args.length;if(old){args[1]='on'+args[1];if(len>3){args.pop();}}else if(len===3){args.push(false);} return args;} function apply(args,sType){var element=args.shift(),method=[evt[sType]];if(old){element[method](args[0],args[1]);}else{element[method].apply(element,args);}} function addEvent(){apply(getArgs(arguments),'add');} function removeEvent(){apply(getArgs(arguments),'remove');} return{add:addEvent,remove:removeEvent};}());function rnd(n,min){if(isNaN(min)){min=0;} return(Math.random()*n)+min;} function plusMinus(n){return(parseInt(rnd(2),10)===1?n*-1:n);} this.randomizeWind=function(){var i;vRndX=plusMinus(rnd(storm.vMaxX,0.2));vRndY=rnd(storm.vMaxY,0.2);if(this.flakes){for(i=0;i<this.flakes.length;i++){if(this.flakes[i].active){this.flakes[i].setVelocities();}}}};this.scrollHandler=function(){var i;scrollY=(storm.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||(noFixed?document.body.scrollTop:0),10));if(isNaN(scrollY)){scrollY=0;} if(!fixedForEverything&&!storm.flakeBottom&&storm.flakes){for(i=0;i<storm.flakes.length;i++){if(storm.flakes[i].active===0){storm.flakes[i].stick();}}}};this.resizeHandler=function(){if(window.innerWidth||window.innerHeight){screenX=window.innerWidth-16-storm.flakeRightOffset;screenY=(storm.flakeBottom||window.innerHeight);}else{screenX=(document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-storm.flakeRightOffset;screenY=storm.flakeBottom||document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight;} docHeight=document.body.offsetHeight;screenX2=parseInt(screenX/2,10);};this.resizeHandlerAlt=function(){screenX=storm.targetElement.offsetWidth-storm.flakeRightOffset;screenY=storm.flakeBottom||storm.targetElement.offsetHeight;screenX2=parseInt(screenX/2,10);docHeight=document.body.offsetHeight;};this.freeze=function(){if(!storm.disabled){storm.disabled=1;}else{return false;} storm.timer=null;};this.resume=function(){if(storm.disabled){storm.disabled=0;}else{return false;} storm.timerInit();};this.toggleSnow=function(){if(!storm.flakes.length){storm.start();}else{storm.active=!storm.active;if(storm.active){storm.show();storm.resume();}else{storm.stop();storm.freeze();}}};this.stop=function(){var i;this.freeze();for(i=0;i<this.flakes.length;i++){this.flakes[i].o.style.display='none';} storm.events.remove(window,'scroll',storm.scrollHandler);storm.events.remove(window,'resize',storm.resizeHandler);if(storm.freezeOnBlur){if(isIE){storm.events.remove(document,'focusout',storm.freeze);storm.events.remove(document,'focusin',storm.resume);}else{storm.events.remove(window,'blur',storm.freeze);storm.events.remove(window,'focus',storm.resume);}}};this.show=function(){var i;for(i=0;i<this.flakes.length;i++){this.flakes[i].o.style.display='block';}};this.SnowFlake=function(type,x,y){var s=this;this.type=type;this.x=x||parseInt(rnd(screenX-20),10);this.y=(!isNaN(y)?y:-rnd(screenY)-12);this.vX=null;this.vY=null;this.vAmpTypes=[1,1.2,1.4,1.6,1.8];this.vAmp=this.vAmpTypes[this.type]||1;this.melting=false;this.meltFrameCount=storm.meltFrameCount;this.meltFrames=storm.meltFrames;this.meltFrame=0;this.twinkleFrame=0;this.active=1;this.fontSize=(10+(this.type/5)*10);this.o=document.createElement('div');this.o.innerHTML=storm.snowCharacter;if(storm.className){this.o.setAttribute('class',storm.className);} this.o.style.color=storm.snowColor;this.o.style.position=(fixedForEverything?'fixed':'absolute');if(storm.useGPU&&features.transform.prop){this.o.style[features.transform.prop]='translate3d(0px, 0px, 0px)';} this.o.style.width=storm.flakeWidth+'px';this.o.style.height=storm.flakeHeight+'px';this.o.style.fontFamily='arial,verdana';this.o.style.cursor='default';this.o.style.overflow='hidden';this.o.style.fontWeight='normal';this.o.style.zIndex=storm.zIndex;docFrag.appendChild(this.o);this.refresh=function(){if(isNaN(s.x)||isNaN(s.y)){return false;} storm.setXY(s.o,s.x,s.y);};this.stick=function(){if(noFixed||(storm.targetElement!==document.documentElement&&storm.targetElement!==document.body)){s.o.style.top=(screenY+scrollY-storm.flakeHeight)+'px';}else if(storm.flakeBottom){s.o.style.top=storm.flakeBottom+'px';}else{s.o.style.display='none';s.o.style.bottom='0%';s.o.style.position='fixed';s.o.style.display='block';}};this.vCheck=function(){if(s.vX>=0&&s.vX<0.2){s.vX=0.2;}else if(s.vX<0&&s.vX>-0.2){s.vX=-0.2;} if(s.vY>=0&&s.vY<0.2){s.vY=0.2;}};this.move=function(){var vX=s.vX*windOffset,yDiff;s.x+=vX;s.y+=(s.vY*s.vAmp);if(s.x>=screenX||screenX-s.x<storm.flakeWidth){s.x=0;}else if(vX<0&&s.x-storm.flakeLeftOffset<-storm.flakeWidth){s.x=screenX-storm.flakeWidth-1;} s.refresh();yDiff=screenY+scrollY-s.y+storm.flakeHeight;if(yDiff<storm.flakeHeight){s.active=0;if(storm.snowStick){s.stick();}else{s.recycle();}}else{if(storm.useMeltEffect&&s.active&&s.type<3&&!s.melting&&Math.random()>0.998){s.melting=true;s.melt();} if(storm.useTwinkleEffect){if(s.twinkleFrame<0){if(Math.random()>0.97){s.twinkleFrame=parseInt(Math.random()*8,10);}}else{s.twinkleFrame--;if(!opacitySupported){s.o.style.visibility=(s.twinkleFrame&&s.twinkleFrame%2===0?'hidden':'visible');}else{s.o.style.opacity=(s.twinkleFrame&&s.twinkleFrame%2===0?0:1);}}}}};this.animate=function(){s.move();};this.setVelocities=function(){s.vX=vRndX+rnd(storm.vMaxX*0.12,0.1);s.vY=vRndY+rnd(storm.vMaxY*0.12,0.1);};this.setOpacity=function(o,opacity){if(!opacitySupported){return false;} o.style.opacity=opacity;};this.melt=function(){if(!storm.useMeltEffect||!s.melting){s.recycle();}else{if(s.meltFrame<s.meltFrameCount){s.setOpacity(s.o,s.meltFrames[s.meltFrame]);s.o.style.fontSize=s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';s.o.style.lineHeight=storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';s.meltFrame++;}else{s.recycle();}}};this.recycle=function(){s.o.style.display='none';s.o.style.position=(fixedForEverything?'fixed':'absolute');s.o.style.bottom='auto';s.setVelocities();s.vCheck();s.meltFrame=0;s.melting=false;s.setOpacity(s.o,1);s.o.style.padding='0px';s.o.style.margin='0px';s.o.style.fontSize=s.fontSize+'px';s.o.style.lineHeight=(storm.flakeHeight+2)+'px';s.o.style.textAlign='center';s.o.style.verticalAlign='baseline';s.x=parseInt(rnd(screenX-storm.flakeWidth-20),10);s.y=parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;s.refresh();s.o.style.display='block';s.active=1;};this.recycle();this.refresh();};this.snow=function(){var active=0,flake=null,i,j;for(i=0,j=storm.flakes.length;i<j;i++){if(storm.flakes[i].active===1){storm.flakes[i].move();active++;} if(storm.flakes[i].melting){storm.flakes[i].melt();}} if(active<storm.flakesMaxActive){flake=storm.flakes[parseInt(rnd(storm.flakes.length),10)];if(flake.active===0){flake.melting=true;}} if(storm.timer){features.getAnimationFrame(storm.snow);}};this.mouseMove=function(e){if(!storm.followMouse){return true;} var x=parseInt(e.clientX,10);if(x<screenX2){windOffset=-windMultiplier+(x/screenX2*windMultiplier);}else{x-=screenX2;windOffset=(x/screenX2)*windMultiplier;}};this.createSnow=function(limit,allowInactive){var i;for(i=0;i<limit;i++){storm.flakes[storm.flakes.length]=new storm.SnowFlake(parseInt(rnd(flakeTypes),10));if(allowInactive||i>storm.flakesMaxActive){storm.flakes[storm.flakes.length-1].active=-1;}} storm.targetElement.appendChild(docFrag);};this.timerInit=function(){storm.timer=true;storm.snow();};this.init=function(){var i;for(i=0;i<storm.meltFrameCount;i++){storm.meltFrames.push(1-(i/storm.meltFrameCount));} storm.randomizeWind();storm.createSnow(storm.flakesMax);storm.events.add(window,'resize',storm.resizeHandler);storm.events.add(window,'scroll',storm.scrollHandler);if(storm.freezeOnBlur){if(isIE){storm.events.add(document,'focusout',storm.freeze);storm.events.add(document,'focusin',storm.resume);}else{storm.events.add(window,'blur',storm.freeze);storm.events.add(window,'focus',storm.resume);}} storm.resizeHandler();storm.scrollHandler();if(storm.followMouse){storm.events.add(isIE?document:window,'mousemove',storm.mouseMove);} storm.animationInterval=Math.max(20,storm.animationInterval);storm.timerInit();};this.start=function(bFromOnLoad){if(!didInit){didInit=true;}else if(bFromOnLoad){return true;} if(typeof storm.targetElement==='string'){var targetID=storm.targetElement;storm.targetElement=document.getElementById(targetID);if(!storm.targetElement){throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');}} if(!storm.targetElement){storm.targetElement=(document.body||document.documentElement);} if(storm.targetElement!==document.documentElement&&storm.targetElement!==document.body){storm.resizeHandler=storm.resizeHandlerAlt;storm.usePixelPosition=true;} storm.resizeHandler();storm.usePositionFixed=(storm.usePositionFixed&&!noFixed&&!storm.flakeBottom);if(window.getComputedStyle){try{targetElementIsRelative=(window.getComputedStyle(storm.targetElement,null).getPropertyValue('position')==='relative');}catch(e){targetElementIsRelative=false;}} fixedForEverything=storm.usePositionFixed;if(screenX&&screenY&&!storm.disabled){storm.init();storm.active=true;}};function doDelayedStart(){window.setTimeout(function(){storm.start(true);},20);storm.events.remove(isIE?document:window,'mousemove',doDelayedStart);} function doStart(){if(!storm.excludeMobile||!isMobile){doDelayedStart();} storm.events.remove(window,'load',doStart);} if(storm.autoStart){storm.events.add(window,'load',doStart,false);} return this;}(window,document)); //]]> </script>

Copy

चरण  # 5:  अंत में सेव टेम्प्लेट   को हिट  करें। 

... अनुकूलन गाइड प्रभाव को संशोधित करने के लिए

यह विजेट स्क्रिप्ट बहुत उन्नत है और बिना किसी फ्लेक पीएनजी छवि के यह प्रभाव प्रदर्शित करने में सक्षम है। और आप अपनी पसंद के हिसाब से कस्टमाइज कर सकते हैं।

एनिमेशन इंटरवल = 33; एनीमेशन अंतराल को नियंत्रित करने के लिए बस मान बदलें। उदाहरण 35 ।

फ़ॉलोमाउस = true; सही या false का प्रयोग करें। यह इंगित करेगा कि बर्फ माउस का पीछा करेगी या नहीं।

यह.बर्फ का रंग='#fff'; आप रंग कोड #fff बदलकर बर्फ का रंग बदल सकते हैं। जैसे #ccc

.flakeWidth=8; यह मान परत की चौड़ाई को बदल देगा। विजेट बदलने के लिए बस मान बदलें। जैसे 10

.फ्लेकहाइट = 8; यह मान परत की ऊँचाई को बदल देगा। ऊंचाई बदलने के लिए बस मान बदलें। जैसे 10

.बहिष्कृत मोबाइल = false; अगर आप मोबाइल डिवाइस पर प्रभाव को निष्क्रिय करना चाहते हैं तो बस गलत को सच बना दें ।

Share this post =>