Vytvořte 3D animaci při scrollování a integrujte ji do Frameru

Spline 3DZačátečník12 min

V tomto návodu se naučíme vytvořit 3D animaci při scrollování, ve které rostlina roste, jak uživatel posouvá stránku. Nastavíme události scrollování, přidáme přechody a zapojíme pohyb kamery. Nakonec interaktivní 3D scénu vložíme na web pomocí nástroje Framer.

👇 Pomocí odkazů níže můžete remixovat návrh z videa:

🪴 Web a remix finální scény: https://inspired-walkthroughs-144071.framer.app/ 🌱 3D návrh rostliny (bez animací): https://app.spline.design/file/c4dc75ac-ebaf-4b00-a6cc-a1e47347f522

---

Objevte další úžasné tvůrce a projekty #MadeInSpline na https://community.spline.design/

Co se naučíte

  1. 0:00Úvod
  2. 0:18Základní cvičení s kostkou
  3. 1:20Pohled na nastavení události Scroll
  4. 2:42Úprava nastavení přehrávání animace při scrollování
  5. 3:06Animace růstu listů
  6. 7:59Přidání rotace do animace rostliny
  7. 9:10Přidání pohybu kamery
  8. 10:29Export jako Viewer
  9. 10:40Vložení 3D animace na web ve Frameru

Související zdroje

Související návody

Všechny návody