Coder une page d'accueil animée en JavaScript.
HTML-код
- Опубликовано: 3 июл 2024
- 🎓 Tous mes cours sur l'École du Web (si tu veux tous les suivre d'un seul coup) : www.ecole-du-web.net/
🎁 Tous mes cours sur UDEMY : www.liste-des-cours.com/
🚀 1 Cours gratuit en t'abonnant à ma newsletter :
www.le-designer-du-web.com/news
TimeCode :
HTML - 1:21
CSS - 3:51
JS - 11:58
Code source : github.com/Ziratsu/GSAP-Accue...
Le lien du Discord : / discord
Ma chaine en Anglais :
/ @thewebschool
Je suis aussi sur la plateforme Tuto.com :
fr.tuto.com/formateur/enzo_us...
Abonne-toi à ma chaîne :
/ @ecoleduweb
Suis-moi sur Twitter :
/ ledesignerduweb
Si tu veux que je fasse des vidéos sur certains sujets dis le moi!
-----------------------------------------------------------------------------------------
![Eminem - Tobey (feat. Big Sean & Babytron) [Official Audio]](http://i.ytimg.com/vi/9xn0OHEZZ8Q/mqdefault.jpg)
🎓 Tous mes cours sur l'École du Web (si tu veux tous les suivre d'un seul coup) : www.ecole-du-web.net/
🎁 Tous mes cours sur UDEMY : www.liste-des-cours.com/
Coucou Enzo faut vraiment que l'on encourage tu fais un travail de ouf et surtout de qualité Merci
Exactement ce que je cherchais, juste une tuerie !! Merci beaucoup Enzo, tu as vraiment le contenu le plus précieux du web pour tout ce qui est web design et front ...
Énorme travail abattu depuis quelque temps courage Enzo : )
M A L A D E !!!
Solides bases pour la compréhension mais aussi la pratique!
Bien sûr que je te suis dès maintenant! New Letter aussi sous peu!
Bravo et M E R C I !!!
Superbe, trés pratique et trés clair. Merci a toi
c'est bon, j'ai réussi à acclimaté ton code au mien, merci mec, tout marche bien.
La classe, génial le design je trouve !
super tuto même si on est pas trop motivé avec la voix ça me donne plus de courage , c'est hyper cool en plus les explications sont trop top merci
Merci pour la vidéo. C’est top. Je ne sais pas coder mais j’essaie d’avoir quelques bases
Merci beaucoup pour cette super vidéo
Merci Enzo pour ton super travail , sur les 30h de cours sur (udemy ) html, css . Tu ma apporté quelque astuce intéressante. Continue comme cela c'est vraiment génial . Bonne continuation , bon courage , reste fort . Peace paul
Merci pour le soutien Paul-Érick!
merci pour le tuto King
C'est vraiment génial
Merci infiniment, javascipt est compliqué pour moi.
Mec t’es juste hyper bon je te souhaite de beaucoup réussir dans la vie juste bravo
Merci l'ami 🔥
super. Merci pour cette video
Ta vitesse de frappe.... Bravo, je suis très impressionné de voir ton travail, et tu me donne envie de m'intéresser à fond sur le design!! Le seul truc que je regrette, c'est de ne pas avoir ton niveau, et de ne t'avoir pas découvert plus tôt! xD
Continue comme ça!
Ce n’est que de la pratique, tu peux y arriver aussi ;)
Merci pour le soutien!
@@EcoleduWeb Je fais en ce moment une formation dactylographie (44mpm, je vais y arriver xD)
Merci de prendre le temps de répondre aux commentaires!
coucou j'adore ta vidéo je trouve que c'est très pratique et très clair mais petit bémol un peu trop vite à mon gout surtout que je suis étudiante donc débutante en quelque sorte sinon bravo continue😊
Thank you !!!
Wow tu es en forme enzo même un dimanche 👍. Encore merci pour ton travaille. En plus toujours voulu savoir comment faire ce genre d'animation merci.
Yep je m'arrête pas ;)
@@EcoleduWeb gaffe au burn out, quand meme ;-)
@@alpasc Pour l'instant ça va, merci de s'en soucier!
trop cool
vidéo parfaite
😀
😃
J'adore 👍🙂
Tu dois sûrement commencer à être fatigué de nous faire toute ces vidéos vu le titre que tu as choisi ! 😄😄😄
Aha oui! Message subliminal :)
Bonjour
vous pouvez nous mettre une vidéo sur end et start de scrollTrigger avec explications détaillées avec exemple *** top top** bottom center*** etc
merci
Vraiment super vidéo continu comme sa tu gère, j'ai pas vu si tu m'avais répondu dans les commentaires au sujet du carrousel ?!
Quelle était la question ? :)
Le Designer du Web - Enzo Ustariz je te demandais si tu pouvais faire une vidéo pour faire une galerie (carrousel) !
@@theomhn Elle existe déjà ;)
Le Designer du Web - Enzo Ustariz oui mais tu la fait avec boostrap non ?!
@@theomhn Il y en a un en HTML/CSS/JS Natif ;)
Salut !
Petite question technique.
Pour les animations il n'existe que le Javascript ?
Si non, est-ce le meilleur ?
Ou peut-être le plus simple ?
Top la vidéo elle m'a beaucoup aidée, j'ai juste une petite question, dans mon JS le gsap ne fonctionne pas il ma marque "any" quand je le survole, savez-vous pourquoi ?
Salut tu pourrais me dire comment faire pour que les buttons marche par exemple quand je click sur le bouton Discover ou contact ça m'envoie sur ma page même pour les réseaux jcp comment mettre un lien deçu ducoup c beau oui mais on peut pas les utiliser 😢
c 'est superbe mais comment fait si on veut reproduire la meme chose avec reac.js
Si on met pas le CDN en bas du fichier index ça marche quand-même ?
Mais on m'a appris à faire du Mobile First !! Je rigole, belle production au top 😍
Aha c’était pour avoir de grandes animations mais on peut le faire en mobile first :)
J suis époustouflé par ta vitesse d exécution, depuis combien de temps tu codes ? Moi j viens juste de commencer cette année 😅
7-8 ans !
Continue à travailler consciencieusement et ça va le faire :)
Svpl comment activer les boutons Facebook instagram..
gsap est intéressant mais n'est-ce pas mieux de faire ce genre d'animation directement sur css pour ne pas avoir à importé une lib pour juste gagné quelque ligne de code ?
Tout dépend de ce que tu veux faire, dès que le nombre d’animations devient élevé il est préférable d’utiliser GSAP :)
GSAP permet aussi les animations au scroll, les fonctions callback, les timelines et j’en passe
@@EcoleduWeb d'accord donc c'est surtout intéressant pour les gros projets ou des effets particulier comme le scroll. Merci de l'info
bonjour, j'ai essayé de recopier ça n'a pas fonctionné chez moi snif
C'est pas mieux de les faire en css les animations ?
Sauber !! comme on dit ici, peut-tu me mettre le nom de la Librairie js que nous recommande merci.... bon boulot ,tu es le meilleur
La librairie c'est Greensock.
Salut, moi j'ai un propbem ,dans ma console s'est écrire gsap n'est pas defini
Hello, il faut que tu importes la librairie GSAP au dessus de ton script JS
Hello, super vidéo.
J'ai un problème pour afficher la photo en arrière plan, elle ne s'affiche pas alors que les chemin est reconnu dans le code.
Avez-vous une idée ?
Vérifiez vos chemins, c'est une erreur courante quand on veut afficher un média
Super vidéo, elle m'est très utile ^^
J'ai juste un petit problème, les animations de déplacement ne fonctionnent pas (left, top etc...), mais toutes les autres marchent (width, opacity) je sais pas pourquoi '-'
Il faut animer avec x & y et éviter left et top.
En effet la prop transform est super optimisée pour les animations :)
@@EcoleduWeb D'accord, merci beaucoup ^^ Je vais essayer !
@@EcoleduWeb J'ai essayé de le faire avec la documentation, mais je vois pas quelle propriété il faut utiliser ^^' J'ai essayé avec transform : translateY, mais ça ne fait que déplacer l'image, ça crée pas une animation ^^'
@@blackwolfman4423 Juste x: -50 fonctionne pour moi
Salut excusez moi mais j'ai besoin du code source je me suis abonné partout mais j'arrive à rien. J'ai pas accès au code source
Quelqu'un peut m'aider
It’s done ✔️ Thanks for the help … New Sub in your Channel and lot of likes 👍👍 Keep going on!