[Tutorial] Volver arriba con efecto kawaii

Se que el diseño aun no esta terminado. Pero es tan difícil encontrar un render que salga con el diseño T_T & eh estado por más de una semana buscando uno, y por suerte, encontré uno para la firma pero solo 1 T^T Por favor, si tienen algún render que vean que salga con el diseño del blog, díganme cual es y así no me mortifico tanto n.n

Bueno como no eh traído tutorial hace bastante tiempo, hoy les traigo uno muy lindo ♥ Sigue leyendo para saber cual es n_n

Wao por cierto ¡Hola! :3 como dije anteriormente hoy les traigo un tutorial con un efecto muy kawaii....

|| Vista previa online ||

Pues bien, este es un efecto chimenea, pero le han cambiado a un efecto de "Subir" y para ponerlo en tu blog tienes que prestar mucha atención. Así que aquí vamos.

 Coloca el siguiente código encima de /b:skin> :

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

 Coloca encima de /head> :

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

Si ya tienes una linea srcipt con jQuery, no hace falta colocar la primera linea.

En caso de que no lo sepas, colócala, de igual manera no sucederá nada.

 Para cerrar, encima de /header> coloca:

<div style='position:fixed;width:131px; height: auto; right: 0; bottom: 0;'>

<div id="puffSpawnPoint">

<a href="#"><img src=’http://fc01.deviantart.net/fs70/f/2012/323/7/4/744ec84790ba446cc6aa14757072ef00-d5lgny4.gif' title='Top' />

</a></div>

<script type='text/javascript'>

puffEffect.imgLocation = "http://i62.tinypic.com/24gj3gm.png";

puffEffect.puffWidth = 15;

puffEffect.puffHeight = 14;

puffEffect.makeEffect("puffSpawnPoint", 24, 12);

</script>

</div>

¡listo! Pueden cambiar las imágenes que están con Azul o bien pueden dejarlas.

 Width: Ancho de la imagen que vuelve arriba, en este caso: La muñequita.

 Height: Largo de la imagen que vuelve arriba: La muñequita.

 Right: Mover a la derecha: La muñeca. Cambiar a left si se quiere mover a la izquierda.

 Bottom: Distancia desde el pie de pagina.

 puffEffect.puffWidth = 15 ;-Ancho de la 2da imagen.

 puffEffect.puffHeight = 14 ;-Largo de la 2da imagen

Eso es todo, doy créditos a su respectivo autor Espero que les haya gustado ^^ ¡Besos!

Ps: Estoy participando en el concurso de larita, podéis votar al que quieras {Si te gusta mi diseño votadme a mi n.n} pero claro que no es obligación, de acuerdo, solo era para avisarles que estaré ahí si les gusta mi diseño, pero OJO, como dije anteriormente, no es obligación ^^ eso era todo, nos leemos en la próxima entrada ^^ ¡Adiós! de nuevo xd

Créditos a los recursos : deviantart.