transicciones y animaciones en web

[fernandorb10]

Hola buenas tardes amigos,


Me gustaría crear una animacion en mi pagina web, sería lo siguiente, al pinchar en uno de los menus, por ejemplo:


mi menu consta de "home", "servicios",... etc.  al pinchar en servicios te lleva a servicios.html, pues me gustaría que servicios apareciese con algun efecto, por ejemplo desde la izquierda.


He probado muchas maneras, con slideit etc... pero no me llegan a funcionar y las veo muy complejas.

¿Hay algun codigo que se pueda hacer mas sencillo? ¿Como me recomendais?


Gracias de antebrazo,

Saludos.

[#!drvy]

Sin código es difícil ayudarte. Hay una infinidad de plugins y scripts para hacer animaciones pero la mayoría se basan en javascript (cosa que ya no es recomendable). Deberías leer sobre animaciones y transiciones de CSS.

Saludos

[fernandorb10]

Buenas tardes,

Voy a concretarte un poco mas.

Código [Seleccionar] Expandir



<nav id="nav" >
<ul >

<li class="current">
<div class="nav2">

<a href="index.html">Home</a>
</div>

</li>


<li ><a href="quienessomos.html"> ¿Quiénes somos?</a>

</li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="right-sidebar.html">Partners</a></li>

<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>







Este sería mi codigo, al pinchar en Servicios por ejemplo, te abre la pagina servicios.html, pues ahí es donde quiero que aparezca una animacion, transicion... o algo así que quede "friki"


Puedes ayudarme?


Saludos.

[viriatooundil]

Si quieres algo sencillo, usa jquery y con la libreria prueba esto:
(fijate que le he añadido un id al elemento a para simplificar y un iframe para la caga dinamica)

Código (javascript) [Seleccionar] Expandir


$("#cosa").on("click",function(evt){

   evt.preventDefault(); // Necesario para que al pulsar no te mande directaamente
   url = this.getAttribute("src");
   iframe = $("#iframe");
   iframe.setAttribute("src",url);
   iframe.show(300);
)


Tendras que hacerle retoques, pero ahi tienes la base para desarrollar tu idea