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

10 comentarios:

  1. Esta muy muy bonito me gusto muchisimo <3

    ResponderEliminar
    Respuestas
    1. Te nomine a un Tag <3
      http://clasicylove.blogspot.com.es/2015/01/tagun-tamagochi-en-mi-blog.html

      Eliminar
  2. ohhhh esta super lindo este efecto^^

    ResponderEliminar
  3. adakndsdkf amé el efecto *0* haber si lo uso en mi próxima edición ^w^
    saluditos! ^^

    ResponderEliminar
  4. Muy buen tuto y me encanta mucho tu blog ah te sigo espero que visites el mio
    yvonne2608.blogspot

    ResponderEliminar
  5. Carolinaaaaaaaaa ay que bien que volviste a actualizar <3
    Tu blog está super boni, el color es tán casual <3, me recuerda al té de matcha *----*
    Saludame de vuelta eh, que extrañaba leerte. :)

    ResponderEliminar
  6. Si me gustaria afiliar pero no encuentro tus botones, avisame
    http://inspired-for-lifee.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Se encuentran en la parte donde dice afiliados osea links ♥

      Eliminar
  7. No funciona, dice que hay un error con uno de los archivos, en la parte donde se coloca el URL de la imagen :S

    ResponderEliminar
    Respuestas
    1. tienes que colocarlo antes de y verás el resultado

      Eliminar

Tu comentario me haría muy feliz!! :D