Effect for two Ivs to move to opposite sides

Question

I need two divs have the transition effect equal to of that website (press the arrow keys on the keyboard "UP" and "Down" to see what I’m talking about).

I need that when the user rolls the scroll down, the divs and its contents change according to the example I mentioned. That is, when it is scrolled down, the DIV from the left goes up and from the right goes down. This alternation can be random.

.left{
  float: left;
  height: 1000px;
  width: 50%;
}
.right{
  float:right;
  height: 1000px;
  width: 50%;
}
#tela1 .left{
    background:#000;
}
#tela1 .right{
    background:#888;
}
#tela2 .left{
    background:#689;
}
#tela2 .right{
    background:#366;
}

       <div id="tela1">
           <div class="left">
               Conteúdo da esquerda que move para baixo
           </div>
           <div class="right">
               Conteúdo da direita que move para cima
           </div>
        </div>
      <div id="tela2">
           <div class="left">
               Conteúdo da esquerda que move para baixo
           </div>
           <div class="right">
               Conteúdo da direita que move para cima
           </div>
        </div>

I posted the my structure here: