fare animazione con scrollTop

Question

Amici, ho creato una funzione che fa un elemento animate o 'desanimate' a seconda di dove il rotolo del corpo o di un div è, sta funzionando bene, come funziona?

<li data-animation-time="[100, 800]" data-animation-position="right" class="list-item one"></li> 

il valore first dell'array data-animation-time è il valore initial, cioè la funzione animatore deve essere chiamato quando il scrollTop passaggio tale valore, il valore second è il end, la funzione 'desanimate' deve essere chiamato quando il passaggio scrollTop quel valore.

Tutto funziona come si può vedere qui -> Codepen: http://codepen.io/celicoo/pen/ogKGEP (è necessario scorrere per vedere l'animazione accade).

Ora voglio per determinare in che modo l'animazione per accadere e in che modo dovrebbe finire, per questo ho cambiato questo attr:

data-animation-position="right-to-left" invece di right o left, e aggiungo alcune dichiarazioni IFS al animation e la funzione 'desanimation':

Animate:

var animate = function(target, position) { 
    target.css('display', 'inline-block'); 

    if (position === 'right-to-right') { 
     target.animate({ 
      opacity: 1, 
      right: '0px' 
     }, 500); 
    } 
    else if (position === 'right-to-left') { 
     target.animate({ 
      opacity: 1, 
      right: '0px' 
     }, 500); 
    } 
    else if (position === 'left-to-left') { 
     target.animate({ 
      opacity: 1, 
      left: '0px' 
     }, 500); 
    } 
    else if (position === 'left-to-right') { 
     target.animate({ 
      opacity: 1, 
      left: '0px' 
     }, 500); 
    } 
}; 

'Desanimate':

var desanimate = function(target, position) { 

    if (position === 'right-to-right') { 
     target.animate({ 
      opacity: 0, 
      right: '245px' 
     }, 500); 
    } 
    else if (position === 'right-to-left') { 
     target.animate({ 
      opacity: 0, 
      left: '245px' 
     }, 500); 
    } 
    else if (position === 'left-to-left') { 
     target.animate({ 
      opacity: 0, 
      left: '245px' 
     }, 500); 
    } 
    else if (position === 'left-to-right') { 
     target.animate({ 
      opacity: 0, 
      right: '245px' 
     }, 500); 
    } 
}; 

E non sta funzionando nel modo "desanimato", qualcosa non funziona bene, e davvero non posso vedere di cosa si tratta.

Qualcuno potrebbe darmi una mano qui? Cosa potrebbe fare "desanimato" non funziona quando ho invertito i valori del passo?

Esempio:

left-to-right 
right-to-left 

Codepen with old code working just with one side (ex: left or right);

Code pen with new code not working 100% with multiple sides (ex: left to left, left to right, right to right or right to left);

Answer 1

Aggiornato il codepen link. Basta dare un'occhiata e fammi sapere se corrisponde al requisito.

+ function($) { 

     var animate = function(target, position) { 
      target.css('display', 'inline-block'); 

      if (position === 'right-to-left' || position === 'right-to-right' ) { 
     target.css('right', '500px'); 
     target.css('left',''); 
       target.animate({ 
        opacity: 1, 
        right: '0px' 
       }, 500); 
      } 
      else if (position === 'left-to-right' || position=="left-to-left") { 
     target.css('left', '500px'); 
     target.css('right', ''); 
       target.animate({ 
        opacity: 1, 
        left: '0px' 
       }, 500); 
      } 
     }; 

     var disanimate = function(target, position) { 

      if (position === 'right-to-left' || position ==="left-to-left") { 
     target.css('left',''); 
       target.animate({ 
        opacity: 0, 
        right: '245px' 
       }, 500); 
      } 
      else if (position === 'left-to-right' || position === "right-to-right") { 
       target.css('left',''); 
     target.animate({ 
        opacity: 0, 
        left: '245px' 
       }, 500); 
      } 
     }; 

     $(window).on('load', function() { 

      var target = $('[data-animation-time]'); 
      var animationInitial = target.data('animation-time')[0]; 
      var animationFinal = target.data('animation-time')[1]; 
      var position = target.data('animation-position'); 
      var shown = false;    

      $('.container').scroll(function() { 
       var scroll = $(this).scrollTop(); 

       if (!shown && (animationInitial < scroll && animationFinal > scroll)) { 
     console.log("animate") 
        animate(target, position); 
        shown = true; 
       } 
       else if (shown && (animationFinal < scroll || animationInitial > scroll)) { 
     console.log("disanimate") 
        disanimate(target, position); 
        shown = false; 
     if (position.split("-")[0] == position.split("-")[2]) 
     position = anti(position); 
       } 
      }); 

     }); 

    }(jQuery); 

    var anti = function (position){ 
     if (position == "left-to-left") 
     return "right-to-right" 
     else 
      return "left-to-left" 
    } 

1. Css: - era giusto 500px. così la posizione iniziale della carta è fissa. l'ho modificato in dinamico in base all'input e ogni volta che aggiungi il giusto (css) devi assicurarti che left (css) sia nullo perché se lasci sia a destra che a sinistra otterrà confuso durante l'animazione
2. sinistra-a -right & da destra a sinistra hanno la loro posizione iniziale e finale uguali .. quindi non c'è bisogno di accessori extra .. quindi funzionerà anche se venite dal basso
3. da sinistra a sinistra & da destra a destra non hanno la loro posizione iniziale e finale allo stesso modo ... così da sinistra a sinistra diventerà da destra a destra nel ciclo inverso. l'ho fatto usando l'anti-funzione