Efecto transacciónes entre diferentes página htmls

daicon · #1 (**permalink**) 01/03/2013, 16:11

Hola gente:

Estoy usando adobe Muse para crear una página web, y me está saliendo bastante bien.
En la comunidad de adobe, he preguntado si es posible añadir transacciónes que contengan algún efectillo al cambiar entre páginas html5, pero me han dicho que no, que necesito añadir código de terceros.

Estoy un poco perdido con esto, ne podríais indicar que pasos seguir y como hacerlo?

Gracias

daicon · #2 (**permalink**) 04/03/2013, 07:11

nadie? xDD

no puede ser tan difícil no?

emprear · #3 (**permalink**) 04/03/2013, 09:34

Las transiciones de página eran (ni se si siguen funcionando) algo propietario de IE, para hacer transiciones crossbrowser, necesitas aplicar algún efecto en la carga de cada página
Algo muy sencillo sería un fade con jquery
http://www.mkyong.com/wp-content/upl...ng-effect.html

daicon · #4 (**permalink**) 04/03/2013, 11:34

Cita:

Iniciado por emprear

Las transiciones de página eran (ni se si siguen funcionando) algo propietario de IE, para hacer transiciones crossbrowser, necesitas aplicar algún efecto en la carga de cada página
Algo muy sencillo sería un fade con jquery
[url]http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-page-loading-effect.html[/url]

MIRA! ese efecto de difuminar me serviría mismo..

Como podría aplicarlo a la web una vez terminada???, la web esta realizada en HTML 5 y css3

emprear · #5 (**permalink**) 04/03/2013, 11:55

Cita:

Iniciado por daicon

MIRA! ese efecto de difuminar me serviría mismo..

Como podría aplicarlo a la web una vez terminada???, la web esta realizada en HTML 5 y css3

Código HTML:

Ver original<head>
<title>Efecto</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
$('body').hide();
$('body').fadeIn(2000);
});
</script>
</head>

Ponés eso en tu head, en cada página, primero cargás la librería jQuery
luego la script que,
oculta el body $('body').hide();
lo muestra haciendo un fade durente 2 segundos $('body').fadeIn(2000);
El 2000 podés cambiarlo x un valor mayor o menor

Saludos

daicon · #6 (**permalink**) 04/03/2013, 12:09

Cita:

Iniciado por emprear

Código HTML:

Ver original<head>
<title>Efecto</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
$('body').hide();
$('body').fadeIn(2000);
});
</script>
</head>

Ponés eso en tu head, en cada página, primero cargás la librería jQuery
luego la script que,
oculta el body $('body').hide();
lo muestra haciendo un fade durente 2 segundos $('body').fadeIn(2000);
El 2000 podés cambiarlo x un valor mayor o menor

Saludos

Jolin, funciona perfecto, pero hay un pero....
Yo he diseñado la web para que tenga un encabezado y pie de pagina igual en las 4 paginas HTML que posee. Y cada vez que hago clic para cambiar, pega un pantallazo blanco (normal, ya que carga la pagina nueva), pero claro... con este efecto no queda bonito...

¿Qué tendría que hacer para evitar ese "pantallazo/parpadeo" blanco de cambio de pagina? LA idea es que el encabezado y el pie de pagina se mantengan, pero cambie el contenido de todo lo demás mediante el fade.

Si no me he explicado bien, subo la pag como la tenga ahora mismo, y enseño el efecto que ocurre.

emprear · #7 (**permalink**) 04/03/2013, 12:24

Cita:

Iniciado por daicon

Jolin, funciona perfecto, pero hay un pero....
Yo he diseñado la web para que tenga un encabezado y pie de pagina igual en las 4 paginas HTML que posee. Y cada vez que hago clic para cambiar, pega un pantallazo blanco (normal, ya que carga la pagina nueva), pero claro... con este efecto no queda bonito...

¿Qué tendría que hacer para evitar ese "pantallazo/parpadeo" blanco de cambio de pagina? LA idea es que el encabezado y el pie de pagina se mantengan, pero cambie el contenido de todo lo demás mediante el fade.

Si no me he explicado bien, subo la pag como la tenga ahora mismo, y enseño el efecto que ocurre.

Yo pensando que era toda la página te modifique el efecto aplicándoselo al body, si mirás el link original (mirá el código fuente), vas a ver que se lo aplica a un div en particular

si tenés algo asi

Código:

<div id="header"></div>
<div id="contenido"></div>
<div id="pie"></div>

harías algo como

Código Javascript:

Ver original$('#contenido').hide();
$('#contenido').fadeIn(2000);

Saludos

daicon · #8 (**permalink**) 04/03/2013, 12:26

Cita:

Iniciado por emprear

Yo pensando que era toda la página te modifique el efecto aplicándoselo al body, si mirás el link original (mirá el código fuente), vas a ver que se lo aplica a un div en particular

si tenés algo asi

Código:

<div id="header"></div>
<div id="contenido"></div>
<div id="pie"></div>

harías algo como

Código Javascript:

Ver original$('#contenido').hide();
$('#contenido').fadeIn(2000);

Saludos

mmm, no, creo q no me explique bien.

El problema este, no viene a partir del efecto fade.
Antes de aplicárselo ya pasaba, es decir. Cada vez que cambio a un HTML diferente la pagina se recarga entera, habiendo un parpadeo.
La idea es que el pie de pagina y el encabezado se mantenga, y no se recargen, evitando asi un parpadeo.

Después de solucionar esto, supongo que ya seria como me has puesto, aplicar el efecto solo al body.

me entiendes ahora?

Gracias!

emprear · #9 (**permalink**) 04/03/2013, 12:37

Cita:

Iniciado por daicon

mmm, no, creo q no me explique bien.

El problema este, no viene a partir del efecto fade.
Antes de aplicárselo ya pasaba, es decir. Cada vez que cambio a un HTML diferente la pagina se recarga entera, habiendo un parpadeo.
La idea es que el pie de pagina y el encabezado se mantenga, y no se recargen, evitando asi un parpadeo.

Después de solucionar esto, supongo que ya seria como me has puesto, aplicar el efecto solo al body.

me entiendes ahora?

Gracias!

habría que mirar la url, a ver como se cargan los elementos de tu página
Saludos

daicon · #10 (**permalink**) 04/03/2013, 12:39

Cita:

Iniciado por emprear

habría que mirar la url, a ver como se cargan los elementos de tu página
Saludos

edito: http://www.daicon.es/index.html

parece que el problema va sobre frames, o includes en php o algo asi....
Por lo visto los frames son muy antiguos y parece que dan mas problemas que soluciones.
Y los includes de php, no se como usarlos. Ademas de que no sé si queda técnicamente correcto crear una pagina web con html5 y css3, y añadir php solo para esto....

emprear · #11 (**permalink**) 04/03/2013, 13:07

El parpadeo se produce arriba en los laterales, y no se aprecia igual en todos los navegadores. Despues de recorrer los links del menú varias veces, ya no se aprecia, así que supongo que es tema de precargar las imágenes, tanto las del html como las que haya en el css

Si vas a utilizar jQuery para el efecto, podés aproveharlo para hacer una precarga.

En tu página index ponés en el head

<style>
div#precarga{
display:none;
}
</style>
y esta script

Código Javascript:

Ver original<script type="text/javascript">
//<![CDATA[
$.PrecargarContenido = function(){
for(var i = 0; i<arguments.length;i++){
$("#precarga").load(arguments[i])
}
}
//]]>
</script>

Acordate que tenés que tener la librería jQuery cargada antes

antes del cierre de la etiqueta body ponés esto (el div está oculto por el css del principio)

Código HTML:

Ver original<div id="precarga"><!-- precarga --></div>
<script type="text/javascript">
//<![CDATA[
$.PrecargarContenido(
'/competencia2011/css/josefin/JosefinSlab-SemiBold-webfont.ttf',
'/competencia2011/css/josefin/JosefinSlab-Bold-webfont.ttf',
'/competencia2011/img/santa.png',
'/competencia2011/img/sexy.png',
'/competencia2011/img/amianto.png',
'/competencia2011/img/cand.cur',
'/competencia2011/img/carro.png',
'/competencia2011/img/contorno-tierrafire.png',
'/competencia2011/img/est-h.png',
'/competencia2011/img/estrellas.png',
'/competencia2011/img/luna.png',
'/competencia2011/img/regalo.png',
'/competencia2011/img/renos.png',
'/competencia2011/img/smart.png',
'/competencia2011/precarga.txt'
);
//]]>
</script>
</body>

substituis los archivos por las rutas a los archivos que quieras precargar, como ves no solo funciona para imágenes.

Ejemplo
http://emprear.com.ar/competencia2011/
Como se ve utilizo esa página de introducción para cargar las imágens de la animación posterior (incluso las fuentes personalizadas)

Obviamente la página de inicio tarda un poco más en cargar, pero después la navegación es más fluida (ojo, tampoco hay que abusar "precargando" 10 MB de imágenes, flash. fuentes, etc)

Si esto no te soluciona el problema, entonces debe ser una cuestión de javascript, pero eso ya es mucho más dificil de detectar
SAludos

daicon · #12 (**permalink**) 04/03/2013, 18:14

Vale, way, ya mas o menos lo he conseguido poner medio decente. Cuando lo termine lo pongo y te pregunto una cosilla, ya que no termina de ir todo lo fino que a mi me gustaría, pero bueno, no esta mal.

Una cosa mas:
Seria posible realizar el fade de tal forma que al darle a otra pagina no se ponga todo en blanco y haga el fade??
Si no que se fuera fusionando entre la pagina actual y la pagina nueva?

Me explico?

Un saludo y graciasssss

emprear · #13 (**permalink**) 04/03/2013, 18:38

me parece que ya estás queriendo demasiado, de página a página no, de un div al otro, si

daicon · #14 (**permalink**) 04/03/2013, 20:09

Cita:

Iniciado por emprear

me parece que ya estás queriendo demasiado, de página a página no, de un div al otro, si

Vaya, pues seria genial... de hecho en una web lo vi...

Y no podría hacer un FadeOut al cambiar de HTML?
En plan: If cambiamos de HTML{
fadeout
}

por decir algo vaya xD

daicon · #15 (**permalink**) 05/03/2013, 11:51

HE encontrado esto: http://www.bufa.es/transicion-fade-paginas-jquery/

Seguro que no seria posible?
He intentado usarlo, poniendo el código en el head, pero se me queda toda la pagina en blanco.

A ver si me podeis ayudar!

gracias!

daicon · #16 (**permalink**) 05/03/2013, 12:12

ALE! ya esta solucionado!!,

Si que se podía hacer transiciones entre paginas Emprear!!
Aquí esta la solución: http://luiscanada.com/blog/jquery-transicion-entre-paginas-html/

Bueno, pues nada, muchas gracias por todo!!
un saludo!

barrierp · #17 (**permalink**) 08/06/2013, 12:56

daicon yo estaba buscando exactamente esto, me salvaste! pero tengo un problemita y es que me carga toda la pagina, yo quiero solo el body y que el head y que el pie de pagina queden fijos como hago?

fíjate como esto: http://www.ajaxshake.com/demo/ES/1043/91ee0fcb/crear-tranciciones-de-paginas-con-css3-pagetransitions.html

barrierp · #18 (**permalink**) 08/06/2013, 14:56

Encontre alguien explicando sencillamente como evitar la carga del head, pero me parece no funcona por que el adobe muse hace cosas medio raras en el código , o no se, quizás no, a ver si alguien me ayuda.
intente esto pero nada...
http://martinmarlasca.com/index.php?option=com_content&view=article&id=11%3A navegacion-sin-recargar-toda-la-web&catid=5%3Ajavascript&Itemid=4&lang=en

carscx · #19 (**permalink**) 19/12/2013, 14:39

Cuanto daño hacen estos de Adobe, Dreamweaver, Muse, y demas variedades de mal gusto.