Ver Mensaje Individual
  #5 (permalink)  
Antiguo 14/02/2014, 11:17
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Scroll con paradas

Amigo, la dirección la modificas cambiando la palabra "left" por "bottom" y los enlaces solamente tienes que colocarlos junto a las imágenes, el tamaño de las imágenes lo reduces colocando una cifra menor en las propiedades "width" y "height". Si se modifica el alineamiento, solamente tienes que jugar con los valores de "margin". Eso es todo.

Ten en cuenta que las imágenes no se ocultan, simplemente se desplazan, creo que te conviene moverlas de izquierda a derecha porque si van de abajo hacia arriba, se puede superponer al contenido de la página que se encuentre abajo. En ese caso, te conviene jugar con la opacidad de las imágenes.

Código CSS:
Ver original
  1. .noti{
  2.     display: inline-block;
  3.     opacity: 0; /* Por defecto, serán transparentes */
  4.     width: 15em;
  5.     height: 8em;
  6.     position: absolute;
  7.     bottom: -50em;
  8.     z-index: inherit;
  9. }

Código Javascript:
Ver original
  1. var noticias = $(".noti"),
  2.     total = noticias.length,
  3.     cont = 0;
  4.  
  5. //Cuando se vayan a mostrar, les quito la opacidad
  6. $(noticias).eq(cont).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
  7. $(noticias).eq(cont + 1).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
  8.  
  9. var slider = {
  10.     show: function(){
  11.         //Cuando se vayan a desplazar, las hago transparentes
  12.         $(noticias).eq(cont).css({"position": "absolute", "opacity": 0}).animate({bottom: "-=50em"}, "fast");
  13.         $(noticias).eq(cont + 1).css({"position": "absolute", "opacity": 0}).animate({bottom: "-=50em"}, "fast");
  14.        
  15.         cont = cont + 2 == total ? 0 : cont + 2;
  16.      
  17.         //Cuando se vayan a mostrar, les quito la opacidad
  18.         $(noticias).eq(cont).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
  19.         $(noticias).eq(cont + 1).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
  20.     }
  21. };
  22.  
  23. setInterval(slider.show, 5000);

Así es como se ve: http://jsbin.com/qugad/3

También podrías optar por mostrarlas una tras otra sin desplazamiento: http://jsbin.com/qugad/5
El código respectivo: http://jsfiddle.net/UXa3r/

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 14/02/2014 a las 12:09