Перейти к содержимому

Эти SVG-пути залили всю мою страницу

CodeRef

0:00 / 0:00

Эти SVG-пути залили всю мою страницу

260 просмотров · 2 дня назад
CodeRef
542 подписчика
260 просмотров · 2 дня назад
В этом уроке мы создадим эффект перехода между страницами, где несколько SVG-контуров заполняют весь экран, прежде чем отобразить следующую страницу. Вместо использования одной SVG-фигуры мы создадим несколько толстых SVG-контуров с разными кривыми, шириной и временем заполнения, чтобы создать эффект многослойного заполнения. Затем GSAP используется для анимации появления и исчезновения контуров и управления временем перехода. ☕ Поддержите канал: Если эти креативные уроки по программированию вам полезны, подумайте о том, чтобы купить мне чашку кофе, чтобы поддержать создание будущих проектов! Поддержите меня, купив кофе: https://ko-fi.com/coderef 📌 Источник вдохновения: https://www.awwwards.com/sites/lxl-cr... #GSAP #SVG #NextJS #WebDevelopment #Awwwards #CreativeCoding #JavaScript #Frontend #PageTransitions #ReactJS #animation #react #tailwindcss #frontend #awwwards #reactjs #gsap #animation #websitedevelopment #coding #javascript #frontenddevelopment #frontenddeveloper #tailwind #fullstack #fullstackdeveloper #fullstackempir #ytviral #ytviral #javascript #fyp #javascripttutorial #awwwards #awwwards_website #awwwards_clone #awwwards_website_tutorial #awwwards_website_clone #awwwards_rebuild #awwwards_website_design #awwwards_website_tutorial_react #awwwards_react #awwwards_website_react #gsap_react #gsap_react_tutorial