Parallax Scrolling Horizontal [duplicate]

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 div of width and height of 100% and overflow:hidden . It has scroll:none in the body also to not show scroll bars.

When the mouse or keyboard scrolls, the body continues without scrolling, but javascript decreases the left of the next element until it reaches zero. In this way, he stands on top of the others. If you come back, that is, navigate to the other side, the left reaches 100% and the element is slid to the other side.

I do not 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've been able to make an example in link that can / should be improved, but it's just an example.

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

In CSS it is only important to leave 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 much less code, but I'm in a hurry. Anyway, any suggestion is welcome.)