quinta-feira, 24 de junho de 2010

Cursor do mouse animado

http://1.bp.blogspot.com/_H_MtISBxIEo/SKdyVmAlGKI/AAAAAAAAAY8/kkYpqQL9fVk/s200/Cursor.jpgQue tal animar seu Curso? isso mesmo, ao mexer com o mouse, o cursor vai fazer um animção de giro muito legal.É bem fácil instalar! Copie o código abaixo , Adicione um gadget = HTML/Javascipt e cole o código.Depois Salve!






<script>
// CREDITS:
// JavaScript Animation: Cursor Rotator
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

var i_cursors=0
var cursors=new Array("e-resize","ne-resize","n-resize","nw-resize","w-resize","sw-resize","s-resize","se-resize")

function animatecursor() {   
    document.body.style.cursor=cursors[i_cursors]
    i_cursors++
    if (i_cursors>=cursors.length-1) {i_cursors=0}
}

function resetcursor() {   
    msmove==false
    if (!msmove) {
        document.body.style.cursor="crosshair"
    }
    var timer=setTimeout("resetcursor()",500)
}
document.onmousemove=animatecursor
</script>
 

Marcadores: ,

Caixa de texto animado estilo banner

http://easycaptures.com/fs/uploaded/375/4707538710.jpgMais um efeito de texto bem legal, realmente estilo um banner, só que esse é em javascript, caso queira usar como banner, dai cabe ao seu parceiro aceitar colocar o código em seu site.

Copie o código abaixo , adicione um gadget = HTML/Javascipt e cole o código, em seguida modifique as partes em vermelho. Depois Salve!



 


<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style>
v\:* { behavior: url(#default#VML); }
</style>

<!-- CODE FOR FUN TICKER STARTS HERE -->
<!-- Set the width and height of the Fun Ticker in the table below. -->
<table width=200 height=200 border=0 cellpadding=0 cellspacing=0>
<tr><td>
<script>
// CREDITS:
// Fun Ticker
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

var text=new Array()
var textlink=new Array()
var texttarget=new Array()

/////////////////////////////////////////////////////////////////////
// EDITZONE STARTS HERE
////////////////////////////////////////////////////////////////////

// Add your messages. They should be rather short.
// They should have the same length more or less.
text[0]="HIIIIIII"
text[1]="DO YOU"
text[2]="LOVE"
text[3]="COOL"
text[4]="SCRIPTS?"
text[5]="GREAT!"
text[6]="YEAAAAH!"
text[7]="THAT"
text[8]="MAKES ME"
text[9]="HAPPY!"

// Add a link for each message
// If you don't want to link a message enter "#" instead (see sample below)
textlink[0]="Aqui é o link do texto 0"
textlink[1]="Aqui é o link do texto 1"
textlink[2]="Aqui é o link do texto 2"
textlink[3]="Aqui é o link do texto 3"
textlink[4]="Aqui é o link do texto 4"
textlink[5]="Aqui é o link do texto 5"
textlink[6]="Aqui é o link do texto 6"
textlink[7]="Aqui é o link do texto 7"
textlink[8]="Aqui é o link do texto 8"
textlink[9]="Aqui é o link do texto 9"

// Add a target-window for each link
// Possible values: "_blank","_top", "_self", "_parent" or the name of a frame
texttarget[0]="_blank"
texttarget[1]="_top"
texttarget[2]="_parent"
texttarget[3]="_self"
texttarget[4]="_blank"
texttarget[5]="_top"
texttarget[6]="_parent"
texttarget[7]="_self"
texttarget[8]="_self"
texttarget[9]="_self"

// Set the font
var textfont="Arial Black"

// Add as many font-colors as you like
var textfontcolor=new Array("#FF0000","#0000FF","#00FF00","#660000")

// Add as many font-outline-colors as you like
var outlinecolor=new Array("#000000","#000000","#FDCF15")

// Add as many font-shadow-colors as you like
var shadowcolor=new Array("#FFFF00","#00FFFF","#FDCF15")

// Set the font-rollovercolor (required for Netscape and Opera only)
var textfontcolorrollover="#ff0000"

// Set the font-size (required for Netscape and Opera only)
var textfontsize=20

// Set the background-color
var textbgcolor="#000000"

// Set "bold" or "normal" (required for Netscape and Opera only)
var textweight="normal"

// Set "italic" or "normal" (required for Netscape and Opera only)rsiv sein soll
var textitalic="normal"

// Set width and height of your Fun Ticker (pixels)
// IMPORTANT: width and height must also be set in the table (see top of code)
var textwidth=200
var textheight=200

// Set the delay between the messages (seconds)
var textpause=2

// Set the width of the funticker's border (pixels)
var funtickerborder=3

// Set the color of the funticker's border
var funtickerbordercolor="#FDCF15"

// Set the width of the font-outline (pixels)
var widthfontoutline=1

// Set the strength of the font's opacity (transparency of letters)
var fontopacity="50%"

// Set the strength of the shadow's opacity (transparency of shadow)
var shadowopacity="50%"

// Set true if your font should display a gradient effect
// Set false if your font should display NO gradient effect
var applygradient=true

// Enter a value between 0 and 3 to set the shape for your messages
// If you enter 4 all shapes will be applied
var i_shape=4

/////////////////////////////////////////////////////////////////////
// EDITZONE ENDS HERE
///////////////////////////////////////////////////////////////////

var path=new Array()
path[0]="m20 0c300 140,300 50,580, 0m20 300c400 100,300 250,580 300e"
path[1]="m20 100c300 -50,300 50,580, 100m20 200c300 400,300 300,580 200e"
path[2]="m20 120c300 100,300 50,580, 0m20 180c300 180,300 300,580 300e"
path[3]="m20 0c300 140,300 50,580, 0m150 300c400 100,300 250,450 300e"

var i_path=0
var speed=60
var textdecoration="none"

var innerwidth=Math.floor(0.90*textwidth)
var innerheight=Math.floor(0.90*textheight)

var posleft=Math.floor((textwidth-innerwidth)/2-funtickerborder)
var postop=Math.floor((textheight-innerheight)/2)

var i_message=0
var i_messagelength=0
var i_outlinecolor=0
var i_textfontcolor=0
var i_shadowcolor=0

var textalign="center"
var textvalign="middle"
var textitalicA=""
var textitalicB=""
var textweightA=""
var textweightB=""
var textfontsizeHTML=1
var i_mes=0

var i_substring=0
var i_presubstring=0
var i_text=0
var textcontent=""
var notag=true
var textpresubstring=""
var textaftersubstring=""
textpause*=1000

var browserinfos=navigator.userAgent
var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/) 

function gettextcontent() {
    tablewidth=textwidth-2*funtickerborder
    tableheight=textheight-2*funtickerborder
    textpresubstring=text[i_text].substring(0,i_presubstring)
    var i_prepre=i_presubstring-1
    if (i_prepre<0) {i_prepre=0}
    if (text[i_text].substring(i_prepre,i_presubstring)=="<"){notag=false}
    if (text[i_text].substring(i_prepre,i_presubstring)==">"){notag=true}
    if (notag) {
        textcontent="<table border=0 cellpadding=4 width="+tablewidth+" height="+tableheight+"><tr valign="+textvalign+"><td align="+textalign+">"
        textcontent+="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' style='position:relative; font-family:"+textfont+";text-decoration:"+textdecoration+";font-family:"+textfont+";color:"+textfontcolor[i_textfontcolor]+";font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+"' onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor[i_textfontcolor]+"\'\">"
        textcontent+=textpresubstring
        textcontent+="</a>"
        textcontent+="</td></tr></table>"
    }
}

function showtickerNS6() {
    textcontent="<table border=0 cellpadding=4 width="+textwidth+" height="+textheight+"><tr valign="+textvalign+"><td align="+textalign+">"
    textcontent+="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' style='position:relative; font-family:"+textfont+";text-decoration:"+textdecoration+";font-family:"+textfont+";color:"+textfontcolor[i_textfontcolor]+";font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+"' onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor[i_textfontcolor]+"\'\">"
    textcontent+=text[i_text]
    textcontent+="</a>"
    textcontent+="</td></tr></table>"
    document.getElementById("ticker").innerHTML=textcontent
    i_text++
    i_textfontcolor++
    if (i_text>=text.length) {i_text=0}
    if (i_textfontcolor>=textfontcolor.length-1) {i_textfontcolor=0}
    var timer=setTimeout("showtickerNS6()", textpause)
}

function showticker() {
    if (i_substring<=text[i_text].length) {
            i_substring++
            i_presubstring=i_substring-1
            if (i_presubstring<0) {i_presubstring=0}
            gettextcontent()
            document.getElementById("ticker").innerHTML=textcontent
            var timer=setTimeout("showticker()", speed)
    }
    else {
        clearTimeout(timer)
        var timer=setTimeout("changetext()", textpause)
    }
}

function changetext() {
    i_substring=0
    i_presubstring=0
    i_text++
    i_textfontcolor++
    i_path++
    if (i_text>text.length-1) {i_text=0}
    if (i_textfontcolor>textfontcolor.length-1) {i_textfontcolor=0}
    showticker()
}

function changeform() {
    if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0}
    if (i_textfontcolor >= textfontcolor.length) {i_textfontcolor=0}
    if (i_shadowcolor >= shadowcolor.length) {i_shadowcolor=0}
    if (i_path>path.length-1) {i_path=0}
    document.getElementById('strokeid').color=outlinecolor[i_outlinecolor]
    document.getElementById('fillid').color=textfontcolor[i_textfontcolor]
    document.getElementById('shadowid').color=shadowcolor[i_shadowcolor]
    if (i_shape==path.length) {
        document.getElementById('shapeid').path=path[i_path]
    }
    if (i_message < text.length) {
        tick()
    }
    else {i_message=0;tick()}
}

function tick() {
    if (i_messagelength <= text[i_message].length) {
   
        var messagestringend=""
        var messagestring=text[i_message].substring(0, i_messagelength)+messagestringend
        document.getElementById('textpathid').string=messagestring
        var timer=setTimeout("tick()",speed)
        i_messagelength++
    }
    else {
        clearTimeout(timer)   
        var timer=setTimeout("prechangeform()",textpause)
    }
}

function prechangeform() {
    i_messagelength=0
    i_message++
    i_outlinecolor++   
    i_textfontcolor++   
    i_shadowcolor++   
    i_path++   
    changeform()
}

function openlink() {
    if (texttarget[i_message]=="_blank") {
        codepopup=window.open(textlink[i_message], "code", "status=yes,location=yes,toolbar=yes,menubar=yes,resizable=yes,scrollbars=yes,width=770,height=460,top=10,left=10");
    }
    else if (texttarget[i_message]=="_top") {
        top.location.href=textlink[i_text]
    }
    else if (texttarget[i_message]=="_parent") {
        parent.location.href=textlink[i_text]
    }
    else if (texttarget[i_message]=="_self") {
        document.location.href=textlink[i_text]
    }
    else {
        var jumpto=eval("parent."+texttarget[i_text])
        jumpto.location.href=textlink[i_text]
    }
}

if (ie5) {
    document.write('<div ID="roof" style="position:relative;width:'+textwidth+'px;height:'+textheight+'px;border-style:solid;border-width:'+funtickerborder+'px;border-color:'+funtickerbordercolor+';background-color:'+textbgcolor+';cursor:hand" onClick="openlink()">')
    document.write('<v:shapetype id="shapeid" coordsize="600,320" path="'+path[i_shape]+'">')
    document.write('<v:path textpathok="t"/>')
    document.write('<v:textpath on="t" fitshape="t" xscale="t"/>')
    document.write('</v:shapetype>')
    document.write('<v:shape type="#shapeid" style="position:absolute; top:3px; left:'+posleft+'px; width:'+innerwidth+'px;height:'+innerheight+'px;" strokeweight="1pt">')
    if (applygradient) {
        document.write('<v:fill id="fillid" method="linear sigma" type="gradient" color="'+textfontcolor[i_textfontcolor]+'" opacity="'+fontopacity+'"/>')
    }
    else {
        document.write('<v:fill id="fillid" color="'+textfontcolor[i_textfontcolor]+'" opacity="'+fontopacity+'"/>')
    }
    document.write('<v:stroke id="strokeid" weight="'+widthfontoutline+'pt" color="'+outlinecolor[i_outlinecolor]+'"/>')

    document.write('<v:shadow on="t" id="shadowid" opacity="'+shadowopacity+'" color="'+shadowcolor[i_shadowcolor]+'"/>')
    document.write('<v:textpath id="textpathid" style="font-family:\''+textfont+'\';v-text-kern:t" trim="t" fitpath="t" xscale="f" string="Hello World"/>')

    document.write('</v:shape>')
    document.write('</div>')
}


if (ns6 || opera) {
    if (ns6) {
        textwidth-=2*funtickerborder
        textheight-=2*funtickerborder
    }
    document.write('<div ID="roof" style="position:relative;width:'+textwidth+'px;height:'+textheight+'px;border-style:solid;border-width:'+funtickerborder+'px;border-color:'+funtickerbordercolor+';background-color:'+textbgcolor+'">')
    document.write('<span ID="ticker" style="position:absolute;top:0px;left:0px;width:'+innerwidth+'px;height:'+innerheight+'px;"></span>')
    document.write('</div>')
}

if (ie5) {window.onload=changeform}
if (opera) {window.onload=showticker}
if (ns6) {window.onload=showticker}
</script>
</td></tr></table>
<!-- CODE FOR FUN TICKER ENDS HERE --></xml:namespace>

Marcadores: , ,

Caixa de texto animado

http://easycaptures.com/fs/uploaded/375/6764631026.jpgUma ótima caixa de texto com animação de digitação, ou seja, como se estivesse alguém digitando.Bom para fazer anúncios.


Apenas copie o código abaixo, vá em Layout - Elementos da página - Adicionar um gadget e escolha a opção HTML/Javascript, depois faça as devidas modificações.

Veja algumas partes onde você pode estar modificando.

var textfont="Arial"    - Tipo de fonte
var textfontcolor="#000000"   - Cor da fonte em hexadeciamal
var textfontsize=- Tamanho da fonte

var textbgcolor="#FDCF15" - Cor do fundo da caixa em Hexadeciamal

Nas partes destacada de verde coloque um anuncio , frase ou outra coisa.=D

<script>
// CREDITS:
// Newsticker
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

var text=new Array()
var textlink=new Array()
var texttarget=new Array()

/////////////////////////////////////////////////////////////////////
// START OF
// CONFIGURATION ZONE
////////////////////////////////////////////////////////////////////

// Your messages. Add as many as you like. Experienced webmasters may even embed simple HTML-tags (see samples below)
text[0]="<strong>Welcome to fabulant.com</strong><br> Discover the most exciting place to experience the joy of JavaScript and DHTML! <span style='color:#FF0000'>Download free</span> scripts and use our unique online tools to pimp your website. "

text[1]="<strong>JavaScript</strong><br> is an object-oriented scripting language used to enable programmatic access to objects within both the <span style='text-decoration:underline'>client applications</span> and other applications."

text[2]="<strong>Have fun!</strong><br>JavaScript was influenced by many languages and was designed to look like Java, but to be easier for non-programmers to work with. <em>Have fun!</em>"

// Add a link for each message
// Enter "#" if you don't want to link a message (see sample below)
textlink[0]="http://www.fabulant.com"
textlink[1]="http://www.fabulant.com"
textlink[2]="#"

// Add the target of the link
// Corect values are "_blank","_top", "_self", "_parent" or the name of any frame
texttarget[0]="_blank"
texttarget[1]="_self"
texttarget[2]="_parent"

// Font
var textfont="Arial"

// Font-color
var textfontcolor="#000000"

// Font-color on rollover
var textfontcolorrollover="#ff0000"

// Font-size
var textfontsize=8

// Enter true "true" if you want add an underline, else add "none"
var textdecoration="none"

// Background-color
var textbgcolor="#FDCF15"

// Font-weight. Enter "bold" or "normal"
var textweight="normal"

// Font-style. Enter "italic" or "normal"
var textitalic="normal"

// width and height of ticker (pixels)
var textwidth=240
var textheight=100

// Pause between the Messages (Sekunden)
var textpause=2

// Border-width (write 0 if you don't want to add a border)
var textborder=1

// Border-color
var textbordercolor="#000000"

// Speed (higher=slower)
var speed=40

/////////////////////////////////////////////////////////////////////
// END OF
// CONFIGURATION ZONE
////////////////////////////////////////////////////////////////////
// Do not edit below this line

document.write("<table border=0 cellpadding=0 cellspacing=0>")
document.write("<tr><td width="+textwidth+" height="+textheight+" valign=top>")

var textalign="left"
var textvalign="top"
var textitalicA=""
var textitalicB=""
var textweightA=""
var textweightB=""
var textfontsizeHTML=1
var i_mes=0

var i_substring=0
var i_presubstring=0
var i_text=0
var textcontent=""
var notag=true
var textpresubstring=""
var textaftersubstring=""
textpause*=1000

var browserinfos=navigator.userAgent
var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)

function gettextcontent() {
    tablewidth=textwidth-2*textborder
    tableheight=textheight-2*textborder
    textpresubstring=text[i_text].substring(0,i_presubstring)
    var i_prepre=i_presubstring-1
    if (i_prepre<0) {i_prepre=0}
    if (text[i_text].substring(i_prepre,i_presubstring)=="<"){notag=false}
    if (text[i_text].substring(i_prepre,i_presubstring)==">"){notag=true}
    if (notag) {
        textcontent="<table border=0 cellpadding=4 width="+tablewidth+" height="+tableheight+"><tr valign="+textvalign+"><td align="+textalign+">"
        textcontent+="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' style='position:relative; font-family:"+textfont+";text-decoration:"+textdecoration+";font-family:"+textfont+";color:"+textfontcolor+";font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+"' onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\">"
        textcontent+=textpresubstring
        textcontent+="</a>"
        textcontent+="</td></tr></table>"
    }
}

function showtickerNS6() {
    textcontent="<table border=0 cellpadding=4 width="+textwidth+" height="+textheight+"><tr valign="+textvalign+"><td align="+textalign+">"
    textcontent+="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' style='position:relative; font-family:"+textfont+";text-decoration:"+textdecoration+";font-family:"+textfont+";color:"+textfontcolor+";font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+"' onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\">"
    textcontent+=text[i_text]
    textcontent+="</a>"
    textcontent+="</td></tr></table>"
    document.getElementById("ticker").innerHTML=textcontent
    i_text++
    if (i_text>=text.length-1) {i_text=0}
    var timer=setTimeout("showtickerNS6()", 2*textpause)
}

function showticker() {
    if (i_substring<=text[i_text].length) {
            i_substring++
            i_presubstring=i_substring-1
            if (i_presubstring<0) {i_presubstring=0}
            gettextcontent()
        if (ie4) {
            ticker.innerHTML=textcontent
            var timer=setTimeout("showticker()", speed)
        }
        if (ie5 || opera || ns6) {
            document.getElementById("ticker").innerHTML=textcontent
            var timer=setTimeout("showticker()", speed)
        }
    }
    else {
        clearTimeout(timer)
        var timer=setTimeout("changetext()", textpause)
    }
}

function changetext() {
    i_substring=0
    i_presubstring=0
    i_text++
    if (i_text>text.length-1) {
        i_text=0
    }
    showticker()
}


if (ie5 || ns6 || opera) {
    if (ns6) {
        textwidth-=2*textborder
        textheight-=2*textborder
    }
    document.write('<div ID="roof" style="position:relative;width:'+textwidth+'px;height:'+textheight+'px;border-style:solid;border-width:'+textborder+'px;border-color:'+textbordercolor+';background-color:'+textbgcolor+'">')
    document.write('<span ID="ticker" style="position:absolute;top:0px;left:0px;width:'+textwidth+'px;height:'+textheight+'px;"></span>')
    document.write('</div>')
}

window.onload=showticker
document.write("</td></tr></table>")
</script>

Marcadores: ,