Buena Joni, googleando como siempre me tope con un .js que cuando vean de que trata seguro que va a poner de lo mas feliz a mas de uno jaja.
Se trata del parallax.
La verdad, este .js es asombroso! pero por mas que leí, y leí, e investigue, hice cerca de 50 pruebas diferentes, etc... no lo pude hacer andar... (en
bleachanime.com.ar)
En teoría, es muy simple, pero por mas que intento no logro que me trabaje en el lugar del banner de mi sitio...
webdev.stephband.info/parallax.html
Esa es la dirección del .js
En teoría (insisto), debería ser tan simple como agregar el script del jquery.jparallax.js en el <header>, dar la indicación del movimiento y luego en el lugar del banner, agregar las imágenes con <div>... pero NO puedo hacerlo funcionar de ninguna manera.
Hago lo siguiente:
dentro del head coloco:
<script type="text/javascript" src="jquery.jparallax.js"></script>
<script type="text/javascript">
<!--
// jQuery.noConflict();
// RUN
jQuery(document).ready(function(){
jQuery('h1').html('');
jQuery('#wrapper_top').jparallax(
{},
{xtravel: '0px', ytravel: '0px'},
{xtravel: '320px', ytravel: '320px'},
{xtravel: '120px', ytravel: '120px'}
);
});
//-->
</script>
y luego en el <div id=wrapper_top> coloco lo siguiente:
<div id="wrapper_top">
<div style="width: 700px; height: 300px;">
<img alt="" src="images/0.png"/></div>
<div style="width: 750px; height: 280px;">
<img style="position:absolute; top:0px; left:350px;" alt="" src="images/1.png"/></div>
<div style="width: 700px; height: 250px;">
<img style="position:absolute; top:200px; left:0px;" alt="" src="images/2.png"/></div>
</div>
Pero no hay caso... no funciona lamentablemente.
Si necesitas un joomla para hacer testeos, mañana mismo te paso un enlace con el joomla montado y los mismos componentes que el sitio actual (mi sitio de pruebas).
(otro detalle, es que como no estaba seguro donde colocar el jquery.jparallax.js lo fui colocando en todas las carpetas para asegurarme que lo tome jajajaja)
Un abrazo!