¿Qué función / truco de CSS se está utilizando en este sitio web?

Según su código fuente, jQuery 1.9.1, jQuery flexslider, jQuery UI, Modernizr, imagesloaded.js, skrollr, textrotator.js, mainParalax.js y main.js. Eso sí, he creado una página similar que se desplaza de manera similar al establecer el fondo de mi cuerpo en un tamaño de fondo de portada y permitir que los divs, secciones o artículos se deslicen verticalmente, mientras se configuraron en todo el ancho del viewport, menos el ancho de la barra de desplazamiento, si usé uno.

Simplemente podría alterar mi método configurando múltiples fondos div para ‘cubrir’, con los divs apilados verticalmente, luego agregar divs secundarios desplazables a cada div padre apilado.

Otra forma de crear ese efecto sería intercambiar los roles padre e hijo en mi método anterior. Por ejemplo, entre párrafos, puede incluir un div con un ancho de calc (100vh – el ancho de la barra de desplazamiento) y una identificación específica, luego use esa identificación para diseñar el div con una imagen de fondo con un tamaño de fondo de portada. Eso sí, el ancho establecido del div es puramente para que cubra todo el ancho de la ventana gráfica; un ancho más pequeño también puede hacer un buen efecto.

Sin trucos, de verdad. Las imágenes son las imágenes de fondo de divs que están dentro de cada sección de la página. El efecto es a través del uso específico del tamaño para cada sección, el contenido de la sección y las imágenes mismas. Solo estás desplazándote por la página. Las imágenes y sus contenedores se dimensionan para que coincidan con el puerto de visualización (su pantalla). Aquí están las reglas de estilo para el div. Centran la imagen, le dicen que no se repita, FIJAN la imagen en su lugar (esto y el uso del atributo COVER son las claves principales del efecto), configuran la altura y el ancho del DIV para que sea el 100 por ciento del tamaño del contenedor y ancho (también clave para el efecto), y

  1. posición de fondo: centro centro;
  2. repetición de fondo: sin repetición;
  3. adjunto de fondo: fijo;
  4. tamaño de fondo: cubierta;
  5. altura: 100%;
  6. ancho: 100%;

De MDN –

cover

Una palabra clave que es la inversa de contain . Escala la imagen lo más grande posible y mantiene la relación de aspecto de la imagen (la imagen no se aplasta). La imagen “cubre” todo el ancho o la altura del contenedor. Cuando la imagen y el contenedor tienen diferentes dimensiones, la imagen se recorta a la izquierda / derecha o arriba / abajo.

La propiedad fija de fondo adjunto: evita que la imagen se desplace hacia arriba con el resto del contenido en el div. Por lo tanto, todo parece desplazarse hacia arriba frente a él, hasta que el siguiente div sea visible en la pantalla.