Este tutorial es bastante sencillo de hacer, solamente debemos agregar entre <head> y </head> los dos siguientes scripts para luego a los enlaces que queramos aplicar una transición les aplicamos la clase transición como <a class="transicion" href="sitio.com">texto</a>:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>*Para el caso de Blogger no se olviden poner justo despues de <script type='text/javascript'> el fragmento:
<script type='text/javascript'>
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(0);
$("a.transicion").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
</script>
//<![CDATA[Y justo antes de ;</script>
//]]>En la parte de CSS de la página agreguen la siguiente regla
html {Jugando con las reglas CSS
background-color: #333 /* pon el mismo color de fondo que en body */
}
Por defecto está ajustado para que todos los enlaces con una class de nombre "transicion" sean los únicos que hagan el efecto, pero hay otras maneras de usarlo para que sea más cómodo.
Como deben imaginarse usar una transición generan muchos problemas de usabilidad y usarlo todo el tiempo no es recomendable, así que solo a ciertos enlaces se les puede aplicar, por ejemplo, en Blogger si aplicamos este script digamos que en vez de la regla "a.transicion" (Ver lo marcado en amarillo), lo ponemos como "a" todos los enlaces harán una transición, incluso los enlaces de comentarios que impedirá.
Pero que tal si en vez de poner a cada enlace un class de transición, no aprovechamos las existentes, por ejemplo, en Blogger, la regla .post-body controla todo lo contenido dentro de la entrada de un blog, excluyendoel títulos, los comentarios y todo lo que esté fuera de esa sección.
 |
| El efecto consiste en un desvanecimiento entre páginas. |
Si queremos incluir varias secciones podemos hacer lo mismo que si incluyeramos varias reglas CSS por ejemplo ".post-body a, #PageList1 ul li a, #BlogList1 ul li a, #blog-pager a" de esa forma en un solo paso aplicamos las transiciones a las secciones que deseemos.
Como pueden apreciar es bastante práctico.
Controlando el tiempo
Para el tiempo veremos en el script la parte que dice fadeOut(1000, redirectPage); el valor 1000 equivale a 1 segundo disminuyan o aumenten el tiempo segun consideren oportuno.
Veran que el valor fadeIn está a 0, porque creo que el fade in (desvanecimiento de entrada) no funciona correctamente con todas las webs y hace demasiado larga la carga del sitio, pero si lo quieren probar no está de más hacerlo.
Ejemplo
Puede verlo funcionarlo en la siguiente web aplicado al menú principal, los enlaces de los post y los enlaces de navegación:
matiusboom.blogspot.mxEs un desarrollo de la idea de onextrapixel.com, sin embargo sin el efecto de fade in.
Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.
La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...
Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.
Película lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.
Comentarios y Consultas
Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.
Puedes marcar Notificarme para recibir la notificación de la respuesta.
5 comentarios:
me aparece un error de sintaxis en
ResponderBorrar$("body").css("display", "none");
pero no se en donde se encuentra el error.
Si es blogger debes envolver el contenido del Script en:
Borrar<script type='text/javascript'>
//<![CDATA[
contenido del script
//]]>
</script>
Me gusta tu forma de pensar y de decirlas, he visto esta pagina por curiosidad pero veo que eres una persona dedicada, sigue adelante, tus aportes son muy valiosos. gracias
ResponderBorrarhola,lo intente en dreamweaver y no me funciono, alguna alternativa?
ResponderBorrarMi problema es exactamente el contrario: he descargado una plantilla muy linda pero que tiene este efecto y me retrasa cerca de 10 segundos en cargar la página, como puedo hacer para eliminarlo? Gracias
ResponderBorrar