Mostrar elementos al hacer scroll

Hola a todos!, alguien sabe cómo hacer efectos al hacer scroll, como en este sitio yootheme.com/demo/joomla/square.

No se si es con JavaScript y hay algo para ello o con CSS3. Sólo necesito que me guíen diciendo si es con JavaScript alguna librería o plugin, y si es con CSS3 que es lo que se usa más o menos.

Un saludo!!

Respuestas

Cuando YooTheme presentó el tema Square Theme, una de sus funcionalidades destacadas era la siguiente:

"Background scroll effect and Slideshow Style for Widgetkit"

Widgetkit es una librería JavaScript propietaria de YooTheme (aquí tienes los precios) y que se utiliza como un conjunto de utilidades para simplificar el desarrollo de temas que incluyan efectos avanzados.

Si no quieres comprar Widgetkit, puedes utilizar cualquiera de los plugins de efectos visuales que ya existen para JavaScript. Si utilizas por ejemplo jQuery, tienes decenas de plugins gratuitos muy buenos. Uno de los más avanzados se llama SuperScrollorama . Aquí puedes ver una demo de su funcionamiento.

@javiereguiluz

8 noviembre 2013, 15:17

Hola, no he revisado el ejemplo de yootheme al que haces referencia pero para hacer efectos de scroll en las web que desarrollo utilizo el siguiente código javascript:

$('a.scrollTo[href*=#]').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
      && location.hostname == this.hostname) {
    var $target = $(this.hash);
    $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
 
    if ($target.length) {
      var targetOffset = $target.offset().top - 50;
      $('html,body').animate({scrollTop: targetOffset}, 1000);
 
      return false;
    }
  }
});

Luego para aplicarlo sólo es necesario asignar la clase scrollTo a la etiqueta de tipo <a> que tenga de valor en el atributo href una referencia al id de un elemento existente en la página, ejemplo:

<a class="scrollTo" href="#lista_ejemplos">Ir al listado</a>

Espero que te haya servido de ayuda.

Quedo al tanto.

@mr_brazzi

11 noviembre 2013, 4:43

Wow, muchas gracias a los dos. Lo voy a probar y os diré. El de pago, no puedo permitirme pagar cada 6 meses. El de jQuery no está mal. Hay algún efecto que no me gusta, como el de las letras que según donde dejes el scroll se quedan en el camino.

@mr_brazzi creo que lo que me has puesto no es exactamente lo que busco, ¡aún así lo probaré!

@AlbertoVioque

12 noviembre 2013, 9:02