Reino 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...

.upii {
 position: absolute;
 width: 0px;
 height: 0px;
}

<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>

<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>

• 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