Wykres 3D w CSS i #React.js - Mój trik jak zrobić efekt 3D 😉
🚀 Newsletter: https://www.subscribepage.com/web3mailing
➡️ Zapytaj na Discordzie: https://discord.gg/TepkFyV7
➡️ Twitter: https://twitter.com/le_brande
➡️ Instagram: https://www.instagram.com/lebrande
🔴 Jeśli chcesz zrobić efekt 3d na twojej stronie, to wcale nie musisz myśleć o trzech wymiarach. Możesz wszystko osadzić w pozornej siatce izometrycznej a następnie dokonać kilku transformacji.
Kod na Githubie: https://github.com/lebrande/animated-column-chart
Gotowy projekt: https://animated-column-chart.netlify.app/
Biblioteka do animacji w React.js framer-motion: https://www.framer.com/motion/
0:00 - Wstęp
1:00 - Postaw projekt (jakikolwiek)
1:40 - Komponent Grid
11:50 - Komponent Chart (kloc)
21:25 - Suwaki, input danych do animowania
27:45 - Dokładanie kolejnych słupków (kloców)
31:00 - Dokładanie kolejnych suwaków (inputów)
35:50 - Prawdziwe animowanie wykresu
39:24 - Wyświetlanie wartości słupka
40:18 - Błyszczące krawędzie
👨🏫 To jest kanał JS Dżem i mówię tu o programowaniu i web3
Chcesz więcej? Sprawdź w oryginale!
Przejdź do filmu