jQuery parallaxe tutoriel?

- Je besoin pour utiliser jquery parallaxe dans un site, je suis en construction pour un client, je suis surtout un développeur back-end donc je suis en train d'apprendre plus sur l'extrémité avant et jquery etc. Je suis venu à travers des exemples comme http://www.nikebetterworld.com/ et des tutoriels mais je suis inquiet au sujet de questions de droit d'auteur, donc je me demandais si quelqu'un avait découvert un support fiable et facile tutoriel pour les débutants à créer un effet de parallaxe? Grâce

OriginalL'auteur green_arrow | 2012-01-23

  1. 15

    Je suis très en retard à la fête, mais juste pour jeter un autre là-bas pour les auto-promotion éhontée :), j'ai mis un simple tutoriel ensemble il y a quelques jours:

    http://blog.fraser-hart.co.uk/jquery-parallax-scrolling/

    Si vous avez des questions à propos de rien, n'hésitez pas à pop-moi un message et je peux vous parler à travers tout ce que vous n'êtes pas sûr.

    Salut Fraser, wow comme c'est bizarre, en fait, je suis tombé sur votre plugin, l'autre jour 🙂 fab travail que j'ai à dire et c'est exactement ce que je cherchais dans mon projet. Il est beaucoup plus efficace et j'ai vraiment compris comment c'est fait 🙂
    Content qu'il était de l'aide 🙂 je vais travailler sur un autre ce week-end, qui intègre un sprite de l'animation.
    J'ai ajouté un nouveau poste qui se développe pour inclure quelques belles sprite animation trop si vous êtes intéressé
    Hey Fraser, mon portefeuille a actuellement un pur CSS de parallaxe sur le héros de l'image (kylevassella.github.io) mais je suis passer à votre jQuery stratégie. J'aimerais qu'il fonctionne de la même façon qu'il l'est maintenant, sauf que je veux que mon héros de l'image pour faire défiler vers le bas à un rythme lent, plutôt que de rester stationnaire (décalage de défilement). Je peux obtenir le jQuery de parallaxe à arriver, mais je suis incapable de faire mon "portefeuille" de la section défilement vers le haut pour couvrir mes héros de l'image. Au lieu de cela, mon "Portefeuille" de la section est caché juste derrière le héros de l'image, car ils ont tous deux position: fixed. Pourriez-vous me dire comment modifier cela fonctionne pour moi?
    Passons sur le fait, pensé à elle. Avais-je besoin pour appliquer l'une de vos classes, permet de dire ".les poissons", à mon héros. Les placer correctement la section portfolio sous mes héros, il ne nécessite pas de jQuery ou de parallaxe propriétés - j'ai simplement donné le portefeuille de la section, les propriétés css de position: relative et top: 100vh. Ce tire le portefeuille de la section de 100% de la fenêtre d'affichage de la hauteur et permet de fixer en dessous de la position fixe héros. Merci beaucoup pour le code élégant.

    OriginalL'auteur Fraser

  2. 22

    Des tutoriels, désolé pour tout ceux mentionnés précédemment dans ce fil:

    Certains, éventuellement, des plugins qui pourrait bien fonctionner avec la parallaxe:

    J'aime particulièrement la inview plugin pour déclencher des animations CSS3 lors du défilement de la vue.

    Et, quelques beaux exemples de plus de parallaxe sites web pour trouver de l'inspiration et du code snooping:

    http://www.awwwards.com semble être débordant de parallaxe sites web.

    Grand liens, Thx ! Toutes les suggestions sur la Parallaxe des exemples qui peuvent être mis en œuvre sur les iPads ?
    Malheureusement je n'ai pas de iPad, de sorte que la parallaxe sur iPad etc est étranger à moi. Ne pas iOS ont un problème avec position fixe?

    OriginalL'auteur DBUK

  4. 3

    essayer cela aussi 🙂 vraiment facile à utiliser et à personnaliser
    http://johnpolacek.github.com/scrolldeck.js/

    OriginalL'auteur STEEL

  5. 3

    Je viens de finir de travailler sur un juste jesterday 🙂
    vous devriez envisager d'utiliser:
    http://johnpolacek.github.com/scrolldeck.js/ ou
    http://www.jarallax.com/demo/ (fonctionne sur android) #son un projet totalement nouveau de sorte que son toujours en cours d'élaboration

    pour facilement personnalisable scrollpoints vous pouvez utiliser ceci: http://cssdeck.com/labs/swayiqbq/2 (son très utile, tout par défaut de substitution scrollpoints(qui est à partir d'une diapositive à l'autre dans scrolldeck.js))

    Vous ne savez pas si vous êtes entrain de travailler sur le code, ou vous êtes doin à la fois graphique et le code, si c'est le premier scénario, vous devez devenir le précepteur de son concepteur au sujet de comment ça fonctionne en ordre à vraiment utiliser l'effet de parallaxe.
    Aussi, rendant le tout plus attrayant en 1920x1080 comme en 1024x768 pourrait être quire difficile dans certains cas.

    +1 pour le tutorat designer, les choses pourraient vraiment méchant!

    OriginalL'auteur mmln

  6. 0

    Ici, j'ai recueilli certains des meilleurs de la parallaxe défilement des tutoriels à partir de différents sites web, vous pouvez apprendre à partir de là. Voici le lien
    http://www.andwecode.com/tutorials/parallax-scrolling-tutorials/

    OriginalL'auteur monkeytempal