Profile picture of Alexandre Dessoly
Alexandre Dessoly
Formateur Développement Web & Expert Symfony | J’aide les adultes en reconversion à apprendre le développement web et à réussir leur intégration dans le numérique. | Cofondateur Atop-Group | + 100 personnes formées
Follow me
Generated by linktime
December 2, 2024
**La rotation de mon cube ** Troisième post dans cette série avec mon cube 3d que j'ai fini par créer. Mais je n'en suis resté pas là, comme je l'ai dit dans mon post précédent je voulais que mon cube fasse des rotations sur lui même en fonction de mon scroll. Donc je suis reparti dans ma réflexion et dans ma conception des choses. ❓ Je me suis surtout posé les bonnes questions : ❓ - En CSS qu'est ce qui me permet d'initialiser la rotation ? - Toujours en CSS, qu'est qui pourrait me faire une douce transition pour la rotation ** Bonus je suis gentil je vous donne les infos j'ai donc travailler en css avec : 🌟 pour initialiser la rotation j'ai pris : -transform : rotatex(0deg) -transform: rotatey(0deg) Je les ai mis dans ma class cube, toujours dans cette class j'ai ajouté : -la transition: transform 0.1s cela nous permet de régler la vitesse de rotation Vous vous imaginez bien que ce n'est pas fini (sinon c'est pas drôle) 😁 je reviens en javascript pour continuer mon sujet J'ai donc récupéré ma position de défilement dans une variable que j'ai appelé scrollTop (document.documentElement.scrollTop) J'ai pris la source dans la documentation de W3Schools.com, d'ailleurs merci à vous pour votre documentation qui est très riche et très utile. Donc toujours après avoir lu la documentation j'ai utilisé le setRotation qui me permet de mettre à jour les angles de rotation en fonction du défilement. Et pour finir je mets à jour la position de l'image avec setImagePosition. Oui mais si on en reste là ce n'est pas fini. Pour ceux qui connaissent javascript vous savez qu'il manque le addEventListener, l'écouteru d'évènement. ‼️ Ne pas oublier de Nettoyer cet écouteur d'évènement lors du démontage du composant. Ha oui j'ai pas tout dit, j'ai fait ça avec #React Voilà ce que ça donne comme rendu en vidéo. Je me suis creusé la tête pour faire ça. J'avoue c'est pas ce qu'il y'a de plus beau. Mais pourquoi j'ai fait ça? Car j'ai un objectif : J'ai envie de proposer des applications web avec une page d'accueil en 3d donc je suis loin du compte encore car il faut par la suite j'utilise d'autres librairies mais l'idée m'est venu en discutant avec mon collègue Tristan Rogez. Nous avons bien discuté et ça m'a donné l'envie de tester tout ça donc je pars de pas grand chose mais je n'ai pas fini. D'ailleurs nous n'avons pas fini, et nous n'aurons jamais fini. Et toi as tu fais aussi des petits tests sur une technologie pour te permettre d'avancer beaucoup plus? si oui post en commentaire ton parcours ;-) #react #developpement #frontend
Stay updated
Subscribe to receive my future LinkedIn posts in your mailbox.

By clicking "Subscribe", you agree to receive emails from linktime.co.
You can unsubscribe at any time.

December 2, 2024