Добавить анимацию пользовательских интерфейсов на ваш сайт
Sep 11, 2025
Инструкции
Большинство людей ежедневно видят пользовательские интерфейсы в день, будь то внутри мобильного приложения или на веб-сайте, поэтому важно получить его правильно при создании их (A
Строитель сайта
сделает это просто для вас), и если вы можете оживить их с некоторыми
CSS анимация
, тем лучше.
Исследуйте новый график анимации CSS
Во время здания в Интернете, особенно когда речь идет о анимации, вы должны рассматривать такие вещи, как поддержка браузера и производительность (достойный
веб хостинг
поможет здесь). В этом руководстве мы собираемся прогуляться по двум из лучших решений для создания анимации пользовательских интерфейсов и переходов.
Мы будем использовать комбинацию CSS и
Гренс
(GSAP). Мы все знаем о CSS, но некоторые из вас, возможно, не знают о платформе GreenSock. GreenSock - это JavaScript Framework, которая позволяет легко создавать потрясающие анимации с элементами HTML, используя только несколько строк кода.
Изображения и логотипы особенно выделялись намного больше за последние несколько лет. Как часто мы используем Emojis, а не текст? Мобильные навигации, кажется, используют значки, а не текст, а со временем пользователи знают, где каждый займет нас. Мы собираемся начать с создания анимированной панели навигации, просто используя логотипы. Когда вы наведите курсор за каждую, он будет анимировать в последнее состояние, которое будет выглядеть похоже на этот скриншот. Получил много средств массовой информации, чтобы добавить? Обратно в
облачное хранилище
Отказ
У нас есть шесть иконок навигации, и один из них показывает, что будет выглядеть государство Hover, как только анимация будет завершена
Построить навигацию
Прежде всего, мы создадим новый файл index.html и настроить нашу область навигации вместе с шестью ссылками. Каждая ссылка будет состоит из значка, взятого из иониконов. Нам нужно будет назначить класс каждому.
& lt; class = "NavipateBar" & gt;
& lt; href = "#" Class = "Navlogo Ion-iOS-Star-Starline" & gt; & lt; / a & gt;
& lt; href = "#" CLASS = "NAVLOGO ION-IOS-LIST-CLESTLINE" & LT; / A & GT;
& lt; href = "#" Class = "Navlogo Ion-iOS-Chatboxes-Outline" & gt; & lt; / a & gt;
& lt; href = "#" Class = "NAVLOGO ION-IOS-HOME-DESTLINE" & GT; & LT; / A & GT;
& lt; href = "#" Class = "NAVLOGO ION-IOS-PIE-CRIELLINE" & LT; / A & GT;
& lt; href = "#" CLASS = "NAVLOGO ION-IOS-IOS-RECALLINE" & GT; & LT; / A & GT;
& lt; / div & gt;
Далее нам нужно настроить анимацию для наших
.navlogo
элемент. Здесь мы создадим эффекты вращения и перехода, а также изменение цвета элемента на наклоне.
Наконец, нам нужно будет добавить событие, которое удаляет класс Hover, когда мышь больше не зависает на наши логотипы. Это убедиться, что наш логотип выходит из анимации. Создайте новый файл JavaScript называемый Main.js, а затем введите следующий код:
Наша навигация теперь готова пойти, кроме добавления гиперссылок. Нам удалось достичь этого просто с помощью CSS3.
Создание и анимированные кнопки на нагрузке
Кнопки появятся один за другим с задержкой в одну секунду. GreenSock позволяет сделать это с любым HTML-элементом
Теперь мы добавим четыре кнопки на нашу страницу и используем библиотеку GreenSock, чтобы медленно привести к каждой кнопке, одна за другой с задержкой в одну секунду. Это создаст приятный эффект перехода.
Во-первых, нам нужно будет восстановить файл index.html и создать нашу кнопку раздел, используя код ниже:
Затем нам нужно создать ссылку на библиотеку GreenSock внутри & lt; head & gt; раздел.
Наконец, нам нужно создать нашу анимацию. Это займет только одну строку кода.
Стэггерскрыл
это функция, которая будет смягчать время начала нашего элемента. В наших брекетах мы указываем имя элемента. В этом случае это было бы
.anibutton
Отказ Нам также необходимо установить продолжительность и в этом случае он установлен на одну секунду между каждым
анибуттон
элемент.
Вот как пользовательский интерфейс будет смотреть после перехода фона и кнопки от одного цвета на другой
Следующая вещь, которую мы собираемся посмотреть, - это переходный веб-сайт и кнопки из одного цвета на другой. Мы часто не сталкиваемся с этой функцией на веб-сайтах, хотя, безусловно, будет интересно, таких как доступность или для настроек веб-приложений, когда пользователь может захотеть установить собственную цветовую схему.
Убедитесь, что у вас есть цвет фона и цветной и текстовый цвет, созданный для вашей страницы в файле style.css.
Мы собираемся на большее количество темного режима, так что фон будет темным, но кнопки появятся свет. Первая строка кода изменит цвет фона в более темное изменение в течение трех секунд. Вторая и третья строка изменит цвет и границу текста на белый в течение трех секунд.
Наконец, нам нужно будет позвонить
Changebackground ()
Функция из одной из наших кнопок, найденных в файле index.html.
Проект теперь готов к запуску. Конечно, вы можете пойти еще больше, добавив новые элементы и изменив цвет в цвете для тех, которые тоже.
Эта статья была первоначально опубликована в выпуске 309
сеть
Самый продаваемый журнал мира для веб-дизайнеров и разработчиков.
Купить выпуск 309 здесь
или же
Подписаться здесь
Отказ
