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 résolu : Comment reproduire ces effets sur le site d'Apple ?

DébutPage précedente
1
Page suivantePage suivante
molikuju molikuju
MP
Niveau 16
18 mai 2021 à 14:04:45

https://www.apple.com/macbook-pro-16/
Quand on scroll vers le bas, il y a tout plein d'effets qui se produisent :hap:
Je trouve ça vraiment cool, vous savez ce qui provoque ces effets ? (je suis un amateur)

Message édité le 18 mai 2021 à 14:05:42 par molikuju
Xeway Xeway
MP
Niveau 4
19 mai 2021 à 10:40:13

Salut !

Alors moi aussi je suis amateur mais je pense que tu peux faire une partie des effets grâce à l'API Intersection Observer.
En gros tu choisis les éléments que tu souhaite observer et tu peux définir à partir de quand on déclenche du code pour modifier telle et telle chose.
Ex : j'observe un simple paragraphe, dès que ce dernier apparait dans ma fenêtre, je lui ajoute une classe qui permettra de créer une animation pour le faire apparaitre de manière plus stylé (avec un effet "fade-in" par exemple). Et là tu viens de créer un effet d'apparition au défilement :)
Si tu veux la doc : https://developer.mozilla.org/fr/docs/Web/API/Intersection_Observer_API
Je te conseille les tutoriels de Grafikart à ce sujet, c'est super bien expliqué : https://youtu.be/Qoa-N30FrSY , https://youtu.be/2decTjcdDKo et ça te permet de bien voir des cas pratiques.
Y'a aussi la vidéo de Dev Theory qui explique bien : https://youtu.be/x0Dvpu2jcUo

Voilà voilà :)

molikuju molikuju
MP
Niveau 16
19 mai 2021 à 12:15:03

Merci beaucoup je vais m'approfondir avec tout ça !!! :-)

Message édité le 19 mai 2021 à 12:15:14 par molikuju
Pseudo supprimé
Niveau 38
02 juin 2021 à 16:18:12

Effectivement, IntersectionObserver. Tu peux aussi regarder du côté de RequestAnimationFrame si tu veux faire de l'animation.

Sinon, GSAP qui est une librairie très très utilisée.

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