Comment faire pour déplacer/animer les éléments à partir de la côte avec Stellar.js sur un défilement vertical?

Je suis en utilisant Stellar.js plugin jQuery pour créer une parallaxe défilement affecter, mais je ne suis pas sûr si Stellaire prend en charge ce que je suis en train d'accomplir. J'ai la base de la parallaxe défilement affecter fonctionne correctement (en grande partie basée sur ce tutoriel de TutsPlus).

Ce que je suis en train d'accomplir, c'est qu'il en soit ainsi lorsque l'utilisateur fait défiler la page, certains éléments se déplacer/s'anime à la vue de tous les différents angles--être liée à la position de défilement. Par exemple, lorsque l'utilisateur fait défiler la page, une pomme entre dans la vue d'en haut à droite de la position de l'écran, et que l'utilisateur continue à défiler en bas de la page, la pomme se déplace dans un chemin en diagonale vers le bas à gauche de la position de l'écran. L'utilisateur doit faire défiler en arrière, la pomme serait continuer sur ce même chemin dans un en arrière de la mode. Est-ce possible avec Stellaire? Dois-je utiliser un autre plugin? Puis-je utiliser un autre plugin AVEC Stellar pour atteindre cet affect?

Toute aide serait grandement appréciée. Si vous avez besoin de plus d'informations, s'il vous plaît laissez-moi savoir.

Merci!

OriginalL'auteur jjfrizzle | 2012-10-31

13

Stellar.js prend en charge la création de la position de la propriété des plugins qui vous permettent d'écrire personnalisé logique de positionnement.

J'ai écrit un exemple de plug-in, appelé "pomme", qui fait quelque chose qui ressemble à ce que vous souhaitez:
```
$.stellar.positionProperty.apple = {
    setTop: function($el, newTop, originalTop) {
        $el.css({
            'top': newTop,
            'left': $el.hasClass('apple') ? originalTop - newTop : 0
        });
    },
    setLeft: function($el, newLeft, originalLeft) {
        $el.css('left', newLeft);
    }
};
```
Vous remarquerez qu'il comprend un ternaire qui ne s'applique qu'à la gauche de la valeur si l'élément a de la "pomme" de la classe:
```
'left': $el.hasClass('apple') ? originalTop - newTop : 0
```
Ceci est un exemple de la façon dont vous pouvez appliquer différentes logique de positionnement pour chaque élément.

Alors maintenant, vous pouvez utiliser le plugin comme ceci:
```
$.stellar({
    horizontalScrolling: false,
    positionProperty: 'apple'
});
```
Évidemment, vous aurez besoin d'ajuster ce pour répondre à vos fins, mais cela devrait être suffisant pour vous aider à démarrer.

Vous pouvez voir une démo de ce en action sur JSFiddle.

Marque, you rock! Merci beaucoup pour cette réponse détaillée. C'est exactement ce que je cherchais. Merci!
C'est une grande réponse, j'ai été à la recherche partout. Question. Ces scripts anime les choses à partir de la gauche, ce qui se passe si dans le même site web, j'ai le défilement horizontal des objets à partir de la gauche mais aussi de droite? J'ai essayé d'ajouter, sans succès. Merci d'avance

OriginalL'auteur markdalgleish

Jaypee, j'ai utilisé ce code pour le faire:

$.stellar.positionProperty.custom = {
  setTop: function($el, newTop, originalTop) {

    if( $el.data('stellar-moveleft') !== undefined ) {
      $el.css({ 'left': originalTop - newTop });
    } else if( $el.data('stellar-moveright') !== undefined ) {
      $el.css({ 'right': originalTop - newTop });
    }

    $el.css({ 'top': newTop });

  },

  setLeft: function($el, newLeft, originalLeft) {
    $el.css('left', newLeft);
  }

};

En fonction de la réponse originale à cette question par markdalgleish , Il prend les données de la balise: data-stellar-moveleft ou data-stellar-moveright pour atteindre ce que vous désirez, le reste de

OriginalL'auteur simey.me

Vous devez vous connecter pour publier un commentaire.