Titulos con efectos de animacion

Hola Amigos este código JavaScript crea un efecto genial en las los títulos de tu blog o pagina web, desvanece etiquetas H1 con una animación o movimiento frescos en los navegadores modernos.

Tu no  tienes que alterar tu documento físico en absoluto, solo pegas el código en el head de tu web jimdo.

Tambien lo puedes utilizar en un widget html y lo aplicaras solo para esa pestaña.

Mas Avanzado:

Si tiene conocimiento en javascritp puedes hacer maravillas coN este codigo,

en esta zona del codigo que esta en el final puedes cambiar los colores a tu gusto y darle hasta efecto arcoiris

['#FFFFFF', '#DDDDDD', '#BBBBBB', '#999999', '#777777', '#555555']

 

Titulo con efecto o animación ejemplo 1

smiley

  <script type="text/javascript">
//<![CDATA[
<!--
// HEADER FADER ANIMATION (c) 2004-2009 Angus Turnbull http://www.twinhelix.com
function HeaderFader(tagName, colors)
{
        this.tagName = tagName; // Pass "h1" or similar.
        this.colors = colors; // An array of colours in order.
        this.left = true; // false for right-aligned.
        this.frames = 20;
        this.elements = [];

        var obj = this;
        if (window.addEventListener) {
                window.addEventListener('load', function() {
                        obj.setup();
                }, false);
        } else {
                var oldOnload = window.onload;
                window.onload = function() {
                        if (oldOnload) oldOnload();
                        obj.setup();
                }
        }
};

HeaderFader.prototype.setup = function() {
        this.elements = document.getElementsByTagName(this.tagName);
        for (var h = 0; h < this.elements.length; h++) {
                var h1 = this.elements[h],
                        text = h1.firstChild.nodeValue;
                h1.removeChild(h1.firstChild);
                h1.animNodes = [];
                for (var i = 0; i < text.length; i++) {
                        var span = document.createElement('span');
                        span.appendChild(document.createTextNode(text.substring(i, i+1)));
                        h1.appendChild(span);
                        h1.animNodes[h1.animNodes.length] = span;
                }
                h1.animCount = 0;
                var obj = this;
                h1.animTimer = setInterval((function(hh) {
                        return function() {
                                obj.animate(hh);
                        }
                }(h)), 50);
        }
};

HeaderFader.prototype.animate = function(h) {
        var h1 = this.elements[h], c = h1.animCount++, noAnim = 1;
        for (var i = 0; i < h1.animNodes.length; i++) {
                var s = h1.animNodes[i],
                        pc = (this.left ? (c-i) : (c-(h1.animNodes.length+this.frames-i))),
                        frac = Math.max(0, Math.min(1, pc/this.frames)),
                        marg = document.all && !window.opera ? 'marginRight' : 'marginLeft';
                if (s.animDone) continue;
                noAnim = 0;
                s.style.color = this.colors[Math.floor(frac * 0.99999 * this.colors.length)];
                if (frac == 1) {
                        s.style[marg] = '0';
                        s.animDone = 1;
                } else {
                        s.style[marg] = 0.6*(1-frac) + 'em';
                }
        }
        if (noAnim) {
                clearInterval(h1.animTimer);
        }
        h1.style.visibility = 'inherit';
};

// SCRIPT SETUP
if (document.documentElement)
{
        // Hide H1 elements for animation and trigger show on load.
        document.write('<style type="text/css"> h1 { visibility: hidden } <\/style>');
        // Off we go!
        var h1Anim = new HeaderFader(
                'h1',
                ['#FFFFFF', '#DDDDDD', '#BBBBBB', '#999999', '#777777', '#555555']
        );
        //h1Anim.left = true; // Try setting to false if using text-align: right;
        //h1Anim.frames = 10;
}
-->
//]]>
</script>

¿Donde es el head en jimdo?

aqui es el head en jimdo

¿Donde pongo un html o widget en jimdo?

Comentarios: 19
  • #19

    cialis (miércoles, 30 noviembre 2016 03:39)

    Hello!

  • #18

    for (martes, 29 noviembre 2016 11:41)

    Hello!

  • #17

    purchase_cialis (jueves, 24 noviembre 2016 16:00)

    Hello!

  • #16

    cialis (martes, 18 octubre 2016 02:47)

    Hello!

  • #15

    dosage (martes, 18 octubre 2016 02:34)

    Hello!

  • #14

    dosage (martes, 18 octubre 2016 02:29)

    Hello!

  • #13

    online (lunes, 17 octubre 2016 15:31)

    Hello!

  • #12

    online (lunes, 17 octubre 2016 04:14)

    Hello!

  • #11

    cialis (jueves, 13 octubre 2016 03:03)

    Hello!

  • #10

    cialis (viernes, 07 octubre 2016 20:58)

    Hello!

  • #9

    misyam1993xfashion (domingo, 05 abril 2015 23:41)

    ['#FFFFFF', '#DDDDDD', '#BBBBBB', '#999999', '#777777', '#555555']


  • #8

    lacharangalosgayoleros (domingo, 13 julio 2014 06:20)

    es una ayuda muy grande, esta tdo muy bien explicado, em encanta trabajar con jimdo, es fácil hacer un blog bonito ya que dais muchas fácilidades a los que no sabemos, se agradece vuestro trabajo, No cambio jimdo por nada, probe antes otros, y nunca pude hacer lo que en jimdo he hecho FELICITACIONES

  • #7

    limpiezasdelimp (jueves, 10 julio 2014 12:19)

    Maravilloso muchas gracias

  • #6

    seoanalisis (jueves, 31 octubre 2013 12:24)

    Excelente aporte gracias por compartir

  • #5

    garalonso (domingo, 24 febrero 2013 00:18)

    muchas gracias por el aporte, una mas que me aprendo

  • #4

    Olga Villegas Lopez (miércoles, 26 septiembre 2012 17:22)

    EXCELENTE APORTACIÓN

  • #3

    notas-de-canciones (lunes, 24 septiembre 2012 00:36)

    ¿TE GUSTA LA MUSICA? Entra a Notas-de-canciones.jimdo.com

  • #2

    mcecursosautomotrices (jueves, 13 septiembre 2012 09:13)

    Valiosa aportacion para todos los usuarios de Jimdo
    Y para todos los amigos Mecanicos, Electricos y Cerrajeros del ramo Automotriz que necesiten Ahorrar en Costos de Operacion, atraer Nuevos Clientes, Expandir Su Negocio y Generar Jugosas GANANCIAS visiten nuestra pagina y les ayudaremos con todo Gusto.

  • #1

    pimetrik (jueves, 30 agosto 2012 11:36)

    Hola a todos.
    Primero felicitar a disemucho.net por su gran pagina web.
    Esta información es muy valiosa, gracias por compartirla con los jimderos.
    Ahora me gustaría hacerles a todos una invitación a mi web, en donde podrán descargarse plantillas jimdo profesionales, menús desplegables horizontales o verticales, encontrar códigos para tu web y mucho mas...
    Visitala y dame tu opinión.
    Atentamente: Pimetrik