Parallax Scrolling Horizontal

Question

I would like an explanation of how Parallax Scrolling Horizontal works.

Effect equal to this site.

Answer 1

Theoretically it is similar to vertical, but perhaps even easier.

A number of elements are aligned with float:left. Only one appears on the screen, with a 100% width and height div and overflow:hidden. Has a scroll:none no body also to show scroll bars.

When the mouse or keyboard scroll, the body remains scrolled, but the javascript decreases the left of the next element until it reaches zero. This way, he’s on top of the others. If you return, that is, navigate to the other side, the left reaches 100% and the element is slid to the other side.

I don’t know if this is how the plugin you showed works, but if I were to do it from scratch I would start thinking this way.

EDITED

I managed to make an example in http://codepen.io/mapreuss/pen/yjozm that can/should be improved, but is just one example.

In HTML I put a data-attr="n" in each article to know which element I’m dealing with.

In CSS it is only important to leave the article with position:absolute.

JS with jQuery:

// Configurações padrão
$(document).ready(function(){
  // Posicionamento dos segundos quadros
  $("article").each(function(i){
    if($(this).attr("data-index") != 1){
      $(this).css("left","100%");
    } else {
      // Se for o primeiro slide, adicione a classe ativo
      $(this).addClass("ativo");
    }
  });
});
// Ao apertar teclas chame as funções
$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // esquerda
        back();
        break;

        case 38: // cima
        back();
        break;

        case 39: // direita
        go();
        break;

        case 40: // baixo
        go();
        break;

        default: return;
    }
    e.preventDefault(); 
});

// Ao apertar para baixo ou para a direita
function go(){
  // Slide atual
  var ativo = parseInt($(".ativo").attr("data-index"));
  // Próximo slide
  var novo = ativo + 1;
  // o novo precisa ser menor que o total de slides
  var total = $("article").length;
  if (novo <= total){
  // Passa por cada slide
    $("article").each(function(i){
      // vê qual é o index atual
      var atual = parseInt($(this).attr("data-index"));
      // se o index atual for igual ao novo
      if($(this).attr("data-index") == novo){
        // o novo vem por cima, então mudar o z-index        
        $(this).css("z-index",1);
        // põe o slide com left 0
        $(this).animate({
          left: "0",
        }, 1500 );        
        // determina que o slide é o ativo
        $(this).addClass("ativo");
      // se for o slide anterior
      } else if(atual < novo) {
        // passa o z-index pra zero, pra ficar atrás
        $(this).css("z-index","0");
        // tira a classe ativo
        $(this).removeClass("ativo");
      // se o slide for o próximo
      } else if(atual > novo){
        // deixa o left com 100%
        $(this).css("left","100%");
      }
    });
  }
}

// Ao apertar para cima ou para a esquerda
function back(){
  // Slide atual
  var ativo = parseInt($(".ativo").attr("data-index"));
  // Slide anterior
  var novo = ativo - 1;
  // O novo precisa ser > 0 porque se for 0 não deve acontecer nada
  if(novo > 0){
    // Passa por cada slide
    $("article").each(function(i){
      // vê qual é o index atual
      var atual = parseInt($(this).attr("data-index"));
      // se o index atual for igual ao novo
      if($(this).attr("data-index") == novo){
        // o novo está em baixo então o z-index dele é zero
        // põe o slide com left 0 sem ninguém ver
        $(this).css({
          "z-index":0,
          "left":0  
        });       // determina que o slide é o ativo
        $(this).addClass("ativo");
      // se for o slide anterior
      } else if(atual < novo) {
        // passa o z-index pra zero, pra ficar atrás
        $(this).css("z-index","0");
        // tira a classe ativo
        $(this).removeClass("ativo");
      // se o slide for o próximo
      } else if(atual > novo){
        // faz animação para sair
        $(this).animate({
          left: "100%",
        }, 1500 );      
       }
    });
  }  
}

I tried to leave it explained in the comments. It looks like a code block but if you read it slowly, it makes sense.

(I know you can write this in a more beautiful way, repeating a lot less code, but I’m in a hurry. Anyway every suggestion is welcome)