=D

Especial Sophia

Esse Scrapbook Fiz Para Minha Sobrinha Muito Fofa... Ela Ama Tirar Fotos! Então Peguei Uma De Cada Momento Da Vida Dela Para Eternizar Cada Um Deles Pois Sei Que São Muito Importantes... Espero Que Gostem!

Tutorial - Efeito estrelas caindo do ponteiro do mouse

Tutorial - Efeito estrelas caindo do ponteiro do mouse

  

  Hoy, hoje vou ensinar algo fácil é bonito que com certeza você já viu em alguns blog. 

Mais devo lhe orientar que não é qualquer blog que pode usar esse efeito ( porque imagine por exemplo, um daqueles blogs de download padrão com esse efeito? Não ia ficar bom né? Para ficar mais interessante veja um exemplo abaixo.

Bem vamos lá!

1. Va em Design > Editar HTML > de Ctrl+f e procure por:

</body> 

2. Acima dele cole o seguinte código:

<script type='text/javascript'>
// <![CDATA[
var colour="#FFD700";
var sparkles=50;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

3. Para mudar a cor das estrelas, na terceira linha esta escrito: 

var colour="#FFD700";

4. No lugar de "#FFD700" coloque o código da cor das estrelas.
5. Visualize e se estiver tudo certo, SALVE.


OBS.: Para ver a paleta de cores completa Clique Aqui 

Postado por: Bruno

Virginiano, 14 anos, menino divertido, engraçado e inteligente, ama blogar, assistir TV mais em primeiro lugar Deus e sua família, adora ficar com os amigos e com a família, embora de uma hora pra outra fique muito triste.@BrunoRodiguesS

Menu horizontal com abas(sub-menu)

Menu horizontal com abas(sub-menu)

     Bom pessoal, anteriormente tinha feito um tutorial AQUI de como fazer um menu horizontal com efeito hover, caso você não viu ainda só clickar nesse Link. Então viram?

        E hoje vou ensinar a fazer outro menu horizontal mais o efeito dele é diferente, ele terá um efeito com abas como mostra o exemplo abaixo. Então vamos lá.

     1º Vá em "Designer"->"Editar HTML"

     2º  Procure pelo seguinte código </head> utilize "Ctrl + F", e antes dele insira o código abaixo.

<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143; /*COR DO MENU*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*COR DO SUBMENU*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}
</style>


<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;
</script>

     3º  Em seguida Salve as alterações.
    4º  Vá agora em "Designer"->"Elementos da página"->"Adicionar um Gadget"-> Selecione "HTML/JavaScript" e adicione o código abaixo.

<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">NOME</a>
<ul>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
</ul>
</li>
<li><a href="#">NOME</a>
<ul>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
</ul>
</li>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
</ul>

    5º O símbolo "#" reference aos links, em Vermelho são os títulos dos links que serão exibidos no menu horizontal.
   6º Salve as alterações e visualize. 


Então, espero que todos tenham gostado, e até a próxima postagem, caso alguém queira um tutorial só deixar aqui como comentário que farei o máximo possível para ajudar.

Postado por: Jeff Bolton

Capricorniano, 17 anos, garoto divertido e engraçado, gosta muito de blogar e assistir TV, odeia falsidade e adora curtir a vida do jeito que ela é, e é claro, não perde um cineminha. @ecletiicus

Tags : Tutorial

vsca

vem