JQuery

Texto animado (Animated Placeholder)

Publicado por antlou em 01/09/2017

Este objeto pode mostrar texto animado em espaços reservados a entradas de texto.
O texto do espaço reservado é animado deslocando cada caractere a uma velocidade determinada pelo intervalo de repetição.

Resultado:

Começarei pela apresentação do ficheiro placeholder.html.

placeholder.html



<html>
<head>
<!--
********************************************
* Animated Placeholder                                     
* Author:antlou                            
* Version:1.0                              
* Date:01/09/2017                         
********************************************
-->
    < script src="jquery-latest.min.js"> </script >
    < script src="placeholder_js.js"> </script >    
</head >
< body >
<form >
    <p> Your name: </p>
    <input type="text" name="name" id="name" style="width: 250px; padding: 3px; font-size: 17px">
    <p> Your Age: </p>
    <input type="text" name="age" id="age" style="width: 250px; padding: 3px; font-size: 17px">
    <p> Your Adress: </p>
    <input type="text" name="address" id="address" style="width: 250px; padding: 3px; font-size: 17px">
</form >

<script >
    var obj = new placeholder();
    obj.interval_time(5000); // optional, default 4000 milliseconds
    // pass an object as parameter
    // key(s) : input field names
    // value(s) : text to show as placeholder
    obj.set_fields({'name': 'your name..', 'age': 'your age..', 'address': 'your address..'});

</body>   
</html>

placeholder_js


/*
 * Animated placeholder(s)
 * Shows animated text in form input placeholders elements.
 *
 * @author     antlou
 * @version    1.00.00
 *
 * call paramms:
 * set_fields({'field_name_1': 'Text to show', 'field_name_1': 'text_to_show'});
 *
 * optional set interval time in milliseconds (default 4000)
 * interval_time(5000);
 */
 
var milliseconds = 4000;

placeholder = function(){
            
    this.write_placeholder = function(field, text, n) {
        if (n < (text.length)) {
            $('#'+field).attr("placeholder", text.substring(0, n+1));
            n++;
            setTimeout(function() {
                var obj = new placeholder();
                obj.write_placeholder(field, text, n)
            }, 65);
        }
    }
                
    this.set_fields = function(objFields){
        for (var key in objFields) {
            // skip loop if the property is from prototype
            if (!objFields.hasOwnProperty(key)) continue;
                this.write_placeholder(key, objFields[key], 0);
                this.intervallize(objFields);
        }
    }
                
    this.intervallize = function(objFields){
        var interval = setInterval(function() {
            for (var key in objFields) {
                if (!objFields.hasOwnProperty(key)) continue;
                    var obj = new placeholder();
                    obj.write_placeholder(key, objFields[key], 0);
            }
        }, milliseconds);
    }
                
    this.interval_time = function(ms){
        milliseconds = ms;
    }
                
}

voltar para o topo ↑

Download Código

Espero ter sido útil e motivados a fazer mais experiências. Deixe aqui a sua avaliação.

1 votos - 5 pontos - 20 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.