Simple jQuery Snowfall Effect

Simple jQuery Snowfall effect is the code snippet which allows user to add snowfall effect to their website. This snowfall library simple consist of JQUERY, CSS and HTML. We can simply just download this library and use it.

Steps to Download and Run Snowfall Effect Library:

  • Download this library.
  • Run Index.html in any browser and you can see the effect.

Now If, anybody wants to integrate this snowfall effect in their website, follow this steps:

  • Firstly Add JQuery to your website. if already added avoid this step.
    ( if using in wordpress no need to follow this step )

    
    <script src="JQUERY-URL-PATH" type="text/javascript"></script>
    
    
  • Then From the library add required script and css to the website.

    
    <script type="text/javascript" src="assets/script.js" ></script>
    <link rel="stylesheet" type="text/css" href="assets/style.css">
    
    
  • Now just Call Snowfall function and Enjoy the Effect 🙂

    
    jQuery(document).ready(function(){
        snowfall_effect();
    });
    
    

You can download the Library from link below:

textbox watermark text effect

What is it

click on the textboxes below:



Add watermark text effect to your textbox and textarea controls. Texboxes will show default text to begin with. When the textbox gains focus, the default text goes off, user types in his own text and that persists. If user doesn’t type in anything and moves on to other parts of your web page, your textbox again show the default text.

How to achieve that

I’ve written this small javascript which renders the said effect to textboxes and textareas. To set things up all you need to do is:

  1. give the textboxes/textareas an additional class of ‘js_watermark’. eg:
  2. Add the following javascript somewhere
    $(document).ready(function(){
    /*---watermark functions ------------*/
    		$(".js_watermark").each(function(){
    			$(this).after("");
    		});
    		$(".js_watermark").focus(function(){
    			var wm_text = $(this).next('.js_watermar_text').html();
    
    			if($(this).val()==wm_text){$(this).val('');}
    		});
    		$(".js_watermark").blur(function(){
    			var wm_text = $(this).next('.js_watermar_text').html();
    			if($.trim($(this).val())==""){$(this).val(wm_text);}
    		});
    		/*--------------------------------------*/
    });

The approach is simple:
once the html is loaded the javscript adds a hidden <span> tag next to each textboxes/textareas which have the class js_watermark and ‘stores’ the default values of textboxes in those spans. When you click on any textbox (gain focus event) its text is deleted. When textbox loses focus the script check if its text is blank (after trimming blank spaces), if yes it fetches the default value from the hidden span next to the textbox and sets the textboxes value with the default value again.

Hope you find it useful.

text effects – giving random size and color

link for the demo is available at the end of the artile

Text effects – random size and color

What is it

This little demo show how to give random size and colors to the words . Lets say i have a <div> or <p> tag and i want all the words inside it to acquire random size and color. At the same time i also want a choice among those colors so that it suits my websites background and all. Check the demo page (link provided at the end of the article)

The setup

Give any <div> or <p> tag a class of js_typografy

<p class='js_typografy'>

Next Add the following javascript to your page

function typografy() {
            var minSize = 15;
            var maxSize = 80;
            var colorise = true;
            var colorArray = ['#369', '#000', '#aaa'];
            $(".js_typografy").each(function () {
                var retHTML = "";
                //get the text
                var allText = $(this).text().trim().split(' ');

                //now add each word one by one
                for (i = 0; i < allText.length - 1; i++) {
                    var size = getRandomInt(minSize, maxSize);
                    size = Math.ceil(size / 10) * 10;
                    if (colorise == true) {
                        var j = getRandomInt(0, colorArray.length - 1);
                        if (j < 0) { j = 0; }
                        retHTML += " " + allText[i] + "";
                    }
                    else
                    { retHTML += " " + allText[i] + ""; }
                }
                $(this).text('');
                $(this).html(retHTML);
                
            });
        }
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        $(document).ready(function () {
            typografy();
        });

you need to change the following according to your needs

var minSize = 15;//the minimum size of font - in pixels
var maxSize = 80;//the maximum size of font - in pixels
var colorise = true;//whether you want to give random colors or not
var colorArray = ['#369', '#000', '#aaa'];//the set of colors to choose from

What it does

Basically it finds all the elements with the class ‘js_typografy’, captures there text, wraps around each word in a span tag with style attribute having randomly generated size and color.

check the demo and refresh the demo page to see the random behaviour…