Hello everyone, it's TrickPk again, today I will share with you the code of apricot flowers for bloggers. Ok let's start!
The new year is coming, surely bloggers like me are also looking for some background or effects to decorate the Blog. Through searching on the internet, I found the effect of apricot flowers falling to increase the Tet atmosphere for the Blog. Here, I would like to share it with those of you who are also looking for this effect!
New Year Decoration Blog: custom falling yellow and golden apricot flower effect. In addition, the falling cherry blossom effects , falling leaf effects (when it turns to autumn), snowing effects , falling star effects , etc., are also from this one piece of code.
IMPLEMENTATION STEPS
Step 1: Go to Blog => Themes => Edit HTML . Press Ctrl + F and find the </head> tag and paste the entire code below or, ceate a new widget and add this code
<script type='text/javascript'> //<![CDATA[ var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXvvmVpDj8XcPRSujlABgk_lbk39m-YECuDOEgjX79wp4nL8-cokUrzNrjcPw9T9xMySBqpn5a43YYFhyphenhyphenbFmmSyJ8Dr1KILxNQZLykPSBnkngBmkWD2A2DU1nmoKA_qLSh4RFGD4bgfR4/s1600/hoamai.png"; //the location of the snowflakes var pictureWidth = 15; //the width of the snowflakes BY TRICKPK var pictureHeight = 15; //the height of the snowflakes BY TRICKPK var numFlakes = 10; //the number of snowflakes BY TRICKPK var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms) BY TRICKPK var lrFlakes = 10; //the speed that the snowflakes should swing from side to side BY TRICKPK if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; } //draw the snowflakes for( var x = 0; x < numFlakes; x++ ) { if( document.layers ) { //releave NS4 bug BY TRICKPK document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>'); } else { document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>'); } } //calculate initial positions (in portions of browser window size) BY TRICKPK var xcoords = new Array(), ycoords = new Array(), snFlkTemp; for( var x = 0; x < numFlakes; x++ ) { xcoords[x] = ( x + 1 ) / ( numFlakes + 1 ); do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() ); } while( typeof( ycoords[snFlkTemp] ) == 'number' ); ycoords[snFlkTemp] = x / numFlakes; } //now animate BY TRICKPK function flakeFall() { if( !getRefToDivNest('snFlkDiv0') ) { return; } var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0; //find screen settings for all variations. doing this every time allows for resizing and scrolling BY TRICKPK if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else { if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) { scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else { if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } } if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else { if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else { if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } } } //move the snowflakes to their new position BY TRICKPK for( var x = 0; x < numFlakes; x++ ) { if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; } var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; } if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0; divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix; divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix; ycoords[x] += downSpeed; } } //DHTML handlers BY TRICKPK function getRefToDivNest(divName) { if( document.layers ) { return document.layers[divName]; } //NS4 BY TRICKPK if( document[divName] ) { return document[divName]; } //NS4 also BY TRICKPK if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera) BY TRICKPK if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4 BY TRICKPK return false; } window.setInterval('flakeFall();',100); //]]> </script>
Step 2: Save and enjoy!
OUTCOMES
Above is the entire article, if you have any questions, please comment below. Have a nice day.