CONNEXION
  • RetourJeux
    • Tests
    • Soluces
    • Previews
    • Sorties
    • Hit Parade
    • Les + attendus
    • Tous les Jeux
  • RetourActu
    • Culture Geek
    • Astuces
    • Réalité Virtuelle
    • Rétrogaming
    • Toutes les actus
  • RetourHigh-Tech
    • Actus JVTECH
    • Bons plans
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTECH
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch
    • Xbox Series
    • Overwatch 2
    • FUT 23
    • League of Legends
    • Genshin Impact
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • PS4
  • One
  • Switch
  • Wii U
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Etoile Abonnement RSS

Sujet : jQuery: scroll div différentes vitesses

DébutPage précedente
1
Page suivantePage suivante
[CH]Satche [CH]Satche
MP
Niveau 9
20 avril 2014 à 14:33:53

Bonjour,

Le titre n'est pas très parlant, je vais essayer de mieux résumer la chose.
Je dois faire un travail de diplôme qui concerne une génération de monde. L'idée est d'avoir 4-5 div (foreground, midground, background, etc) qui représentent des plans d'un monde (p.e. premier plan: arbres; deuxième plan: sol+herbe; troisième plan: ciel).

L'idée c'est de permettre à l'utilisateur de se déplacer dans ce monde horizontalement en scrollant. Pour que ça soit réaliste, j'aimerais que les divs agissent en parallax; bouger comme lorsqu'on est en voiture ou en train:
Premier plan: vitesse V
Deuxième plan: V-1
Troisième plan: V-2
...etc.

Savez-vous donc si il est possible de forcer certaines div à se déplacer plus lentement lorsqu'on scroll ?

Merci d'avance !

Pseudo supprimé
Niveau 10
20 avril 2014 à 19:55:02

Cherche " parallaxe web design " sur google :oui:

http://www.webdesign-inspiration.com/web-designs/style/parallax

Caletlog Caletlog
MP
Niveau 10
20 avril 2014 à 20:09:40

C'est exactement ça. Parallax.js pour une lib poussée pas forcément facile à prendre en main, ou Stellar.js, plus limitée mais plus facile.
Dans ton cas suivant la complexité que tu veux donner à ton effet tu peux te contenter de stellar, ça peut se gérer avec un simple attribut supplémentaire dans tes divs (de mémoire, data-stellar-background-ration avec 1 la vitesse de référence) et les lignes d'activation dans ton fichier principal js.

[CH]Satche [CH]Satche
MP
Niveau 9
21 avril 2014 à 17:23:31

J'ai déjà vu les noms de Parallax.js et Stellar.js, mais il me semble que ça ne s'applique qu'à un scroll vertical… Je me trompe ?

lisarael lisarael
MP
Niveau 13
21 avril 2014 à 20:01:54

Celui-ci est très bien, je l'ai utilisé plusieurs fois avec beaucoup de plaisir : https://github.com/Prinzhorn/skrollr

[CH]Satche [CH]Satche
MP
Niveau 9
23 avril 2014 à 00:01:12

Je vais essayer ce que vous m'avez donné. Merci en tout cas !

DébutPage précedente
1
Page suivantePage suivante
Répondre
Prévisu
?
Victime de harcèlement en ligne : comment réagir ?
Infos 0 connecté(s)

Gestion du forum

Modérateurs : Thymotep
Contacter les modérateurs - Règles du forum

Sujets à ne pas manquer

La vidéo du moment