Voltar ao Topo com Efeito Kawaii

Oie...no tutorial de hoje vou mostrar como personalizar uma imagem para voltar ao topo adicionando um efeito indicando que ao clicar nessa imagenzinha, você voltará ao topo, claro...como essa que uso atualmente aqui no blog...
Para isso, vamos usar códigos e script feito pelo autor do site Gaya Design, lembram quando recomendei o site e disse que ia tentar fazer o efeito da chaminé? Então, é esse! Só mudei a imagem da chaminé, que será onde você vai clicar, e da fumaça, indicando para o topo, e posicionei no rodapé do blog. Vamos lá!
1. Cole o código abaixo antes de ]]></b:skin>:
.upii {
 position: absolute;
 width: 0px;
 height: 0px;
}

2. Antes de </head>, cole isso (se você usa jquery, não precisa colocar o primeiro script):
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
var puffEffect = {
 
 imgLocation: "", //url to image here
 puffWidth: 80, //standard width
 puffHeight: 45, //standard height
 
 //don't touch this:
 puffPos: new Array(),
  
 makeEffect: function(id, posX, posY) {
  //set position from the "parent"
  puffEffect.puffPos[id] = new Array();
  puffEffect.puffPos[id]['x'] = posX;
  puffEffect.puffPos[id]['y'] = posY;
  
  //set a random time to start upiiing
  var time = (Math.floor(Math.random()*3001));
  setTimeout("puffEffect.animate('" + id + "')", time);
 },
 
 animate: function(id) {

  //create the puff cloud
  var upii = document.createElement("IMG");
  $(upii).attr("src", puffEffect.imgLocation);
  $(upii).attr("alt", "upii");
  $(upii).attr("class", "upii");
  
  //create a temp id for the cloud so we can delete it later on
  var tempId = "upii" + Math.floor(Math.random()*1001);
  $(upii).attr("id", tempId);
  
  //append the cloud to the body
  $(document.body).append($(upii));
  
  var objPos = $('#' + id).offset();
  
  //do puff animation
  $(upii).css({
   top: (objPos['top'] + puffEffect.puffPos[id]['y']) + "px",
   left: (objPos['left'] + puffEffect.puffPos[id]['x']) + "px",
   zIndex: 25,
   opacity: 0.4
  });
  $(upii).animate({
   width: puffEffect.puffWidth + "px",
   height: puffEffect.puffHeight + "px",
   marginLeft: "-" + (puffEffect.puffWidth / 2) + "px",
   marginTop: "-" + (puffEffect.puffHeight * 1.5) + "px",
   opacity: 0.9
  },{
   duration: 1500
  }).animate({
   marginTop: "-" + (puffEffect.puffHeight * 3.5) + "px",
   opacity: 0.0
  },{
   duration: 2500
  });
  
  //create timeout and run the animation again
  var time = 5500 + (Math.floor(Math.random()*4501));
  
  setTimeout("puffEffect.animate('" + id + "')", time);
  
  //remove the old one
  setTimeout("$('#" + tempId + "').remove()", 4200);
  
 }
}
</script>

3. Para encerrar, depois de </header> cole isso:
<div style='position:fixed;width:131px; height: auto; right: 0; bottom: 0;'>
<div id="puffSpawnPoint">
    <a href="#"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSoH-1StxuUZF18eZTlN5LB8OBLsE2usZ2g1nV8KU-B8d4VwEnYKqJQ151M5a4LSpej-InizPgNtlFNIgOxm79vIbCwzM7xYYyqEskP5UM3oP3Q5tr-Nit_xicCKHTtuIaD0RAtgsdYmY/s1600/sakura.gif' title='Top' />
</a></div>
<script type='text/javascript'>
    puffEffect.imgLocation = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsZvN5wX-uxsqD2fwcz0MOvpbii8poEhxaxzT3o0jdoJDKuF5ouBEm6TbjB6lgm-k-GwQENfkltaDs-sqrWCTDCJYMrhl6iicvwO0VcTDs4riJ12QeP7AAziZYh6GS9BDBFkrdUUOljGE/s1600/hamustar1.gif";
    puffEffect.puffWidth = 15;
    puffEffect.puffHeight = 14;
puffEffect.makeEffect("puffSpawnPoint", 24, 12);
</script>
    </div>

Pronto! Nesse vocês terão essas duas imagens abaixo, uma da Sakura e uma estrelinha:
  • width:131px; - largura da imagem em que se clica para voltar ao topo (Sakura)/largura de toda área da imagem;
  • height: auto; - altura da imagem em que se clica para voltar ao topo (Sakura);
  • right: 0; - distância da direita; mude para left para estabelecer valores de distância da esquerda;
  • bottom: 0; - distância do rodapé do blog;
  • puffEffect.puffWidth = 15; - largura da imagem no caso uma estrela;
  • puffEffect.puffHeight = 14;- altura da imagem no caso uma estrela.

É isso! Espero que gostem 

10 Comments

  1. annyz29 novembro

    adorable <3!!! me encanto tu diseño esta precioso >.<

    ResponderExcluir
  2. Unknown30 novembro

    nossa estava mesmo procurando por algo assim de 'voltar ao topo' com estilo fofo, amo muito seu blog sempre venho aqui pra aprender algo >< parabéns pelo trabalho u.u e pode colocar qualquer outra imagem sem precisar ser a da sakura?? kissu

    http://amedcornerstone.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Roberta01 dezembro

      Pode sim :3 Só trocar a URL da imagem da Sakura por outra que preferir.
      Obrigada e bjuuu :D

      Excluir
  3. Unknown30 novembro

    Nossa, que fofo. Não usei, mas achei bem Kawaii! Gostei muito do tutorial, muito explicadinho :3

    imperio--kawaii.blogspot.com | Espero a sua visita no meu blog :3

    ResponderExcluir
  4. lia01 dezembro

    Que fofinho *u* A palavra em forma de "fumacinha" ficou um amor!
    Cada dia que venho aqui teu blog tá mais fofo!
    Muito obrigada pela visita <3

    www.rendasedoces.com

    ResponderExcluir
  5. Anônimo10 junho

    Amei,mas quando clica não aparece nada!

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up