Это проблема от блюда новостной рассылки. Первоначально это было опубликовано 16 июля 2020 года. Посещать Внешний интерфейс. Лошадь подписаться и найти больше проблем.
Helloooo, и добро пожаловать в Seabiscuit of Frontend Informatters !
У нас есть кофейная чашка, учебник по интерфейсу Zelda и встречи, которую я провожу все готово к гоночному дню. Надеюсь, ты носишь Некоторая нелепая одежда и ваша самая причудливая шляпа Анкет
Так что сделайте свои ставки, найдите свои места, и давайте начнем!
Кодепен
Кофе для вас
Я поражен уровнем детализации и заботы, который ушел в Вадим Бауэр ЗАКЛЮЧИТЕЛЬНЫЙ чашка кофе . Это отличная часть и Я просто должен был знать, как он это сделал.
Подробный рисунок CSS сам по себе потрясающий. Тем не менее, часть, которая уронила мою челюсть, была анимацией на пузырьках. Они дрейфуют от центра чашки к краю, чтобы присоединиться к другой пене. Когда они приближаются, края пена движется наружу, как реальная форма на жидкости!
Как, черт возьми, он достигает этого эффекта?
Его ответ? SVG фильтры
Welp, это официально: я сокрушаю жесткий На фильтрах SVG. Они просто так грандиозные универсальные! В предыдущих проблемах мы видели, как они использовали для создания эффектов воды и молнии. Теперь вы говорите мне, что они могут собрать вещи вместе? Так рад.
Вадим разрушает эффект:
Это фильтр SVG, который в основном применяет огромное размытие для элементов, а затем увеличивает контраст для альфа -канала, так что теперь большая форма больше не выглядит размытой. Результатом являются элементы, объединяющиеся, когда они приближаются друг к другу. Это известно как липкий эффект. Вы можете найти довольно хороший пост об этом на Css-tricks: Эффект липкой
Это потрясающий урок, и вы можете увидеть, как это похоже на эффект Вадима.
Другая вещь, которую мне нравилось в «Кофе для тебя», был тонкий пар, который дрейфовал. Угадай, как он это сделал?
Это также фильтр SVG. На этот раз с фетурбилентностью для текстуры и FedIsplacemationMap, чтобы исказить ее. Остальное было чистым испытанием и ошибкой, чтобы заставить его выглядеть как какой -то настоящий пар.
Чтобы узнать, Вадим рекомендует копаться в коде, которыми вы восхищаетесь и играете с ними.
Изменение вещей и видеть, что происходит, всегда отличный способ узнать о коде.
Вадим, я не мог согласиться больше.
Проверьте это ->
РУКОВОДСТВО
Построение пользовательского интерфейса Zelda
Я всегда был поклонником видеоигр, и серия Zelda, безусловно, моя любимая франшиза. Поэтому, когда мой друг Тим прислал мне учебник Zelda UI, как я не мог в него копаться?
Сначала я подумал, что это просто классная идея, может быть, забавный трюк для учебного пособия. Но это намного больше, чем это. Автор, Флорент Лагред , показывает вам, как создать качественный пользовательский интерфейс, используя React, Tailwindcss и Framer-Motion.
Это липкий витамин учебных пособий. Зельда – это крюк, но здесь тоже есть отличные вещи.
Большая часть преподавания – это упаковка контента таким образом, что учатся. Вот почему людям нравится Билл Най, научный парень смог проникнуть в наш мозг так много образования.
В обеих статьях Флорент разлагает интерфейс до мелких деталей и конкретно рассказывает о том, как он планирует его реализовать. Превращение спецификации дизайна в веб -макет – это такой важный навык для разработки, и для меня всегда полезно увидеть, как другие люди подходят к нему.
Результат просто потрясающе. Мало того, что вы можете перемещаться с клавиатурой так, как ожидаете в игре, но и точно сочетает в себе любители персонажей, которые вы получаете от определенных частей одежды.
Учебные пособия являются частью чего -то большего: проект Флорента, Игра пользовательского интерфейса в Интернете Анкет Это сайт Флорента, где он воссоздает интерфейс видеоигр и создает учебные пособия по его процессу. Чтобы начать, он воссоздал меню от Hollow Knight и Zelda. Это началось, когда Флорент просматривал ресурс пользовательского интерфейса Интерфейс В игре , который имеет сотни кадров и видео из всех видов видеоигр. Он удивлялся Почему мы не можем сделать это в Интернете ?
Поэтому он построил Полая рыцарь Демо В качестве вызова, и мне было так весело, что его подселили на создание игровых интерфейсов.
Затем я придумал идею создания учебных пособий, которые сосредоточились бы на Делая вместо только Чтение Анкет Как разработчики, я думаю, что мы учимся лучше всего. Тем не менее, это может быть трудно начать. Я считаю, что наличие мотивирующей цели может помочь вам начать. Развлечение в то время как обучение делает процесс еще проще.
Я спросил Флорента, что, по его мнению, веб -разработчики могут учиться на создании этих игровых интерфейсов? Он сказал: • Как сделать взаимодействия более приятными, видимыми и понятными • Небольшие детали, которые добавляют к опыту • Использование звуков в интерфейсе
В то время как у Web Dev сейчас много «сходства», проекты и учебные пособия Флорента по GameUionWeb чувствуют себя уникальными. Создание игровых интерфейсов с помощью веб -технологий – это отличная концепция. Так много принципов дизайна UX.
Выбрать хорошо продуманный игровой интерфейс углубит ваше понимание веб -дизайна и дизайна пользователей. Плюс, как Интернет становится более причудливой , некоторые из этих игровых навыков Dev пригодятся!
Что произойдет У Флорента большие планы на игровой интерфейс в Интернете. Он хочет построить больше игровых интерфейсов, которые выходят за рамки типа «инвентаризации», который он уже сделал. Он также хочет написать учебные пособия, которые обучают веб -разработчиков трюкам, которые приносят восхищение и радость для игр.
Я думаю, можно с уверенностью сказать, что Флорент хочет сделать Интернет намного веселее.
Проверьте Часть 1 и Часть 2 его Zelda Breath of the Wild Ruciory. Тогда проверьте Игра пользовательского интерфейса в Интернете Чтобы увидеть демонстрации того, что он построил до сих пор.
Ресурсы
Это Интерфейс В игре Сайт такой фантастический ресурс. Например, проверьте эту огромную коллекцию Скриншоты и видеоролики животных ! Флорент создал свои превосходные каркасы в Excalidraw , бесплатный веб-инструмент рисования.
МЕРОПРИЯТИЕ
CodeFwd: шаблоны проектирования
Если вы читаете это по мере того, как это выходит, у меня есть несколько захватывающих новостей! Я собираюсь провести встречу с замечательным раундом разговоров, и я хотел бы увидеть вас там!
Мы будем транслироваться на CodeFwd Twitch Channel Начиная с 18:00 по восточному пост. Пожалуйста, пройдите и бросьте в чат в чате! Это мой первый раз, когда я провожу удаленную конференцию, поэтому я очень взволнован.
Вот состав:
- Отзывчивый дизайн в 2020 году – Килиан Вальхоф
- События, управляемые сервером, микросервисы – Гарет Мак Кермки
- Простые правила для сложных систем – Джейк Берден
- Mongodb Лучшие практики дизайна схемы – Джо Карлссон
Я надеюсь увидеть вас там!
Так долго, партнер
И это фото финиша! Какая гонка, мне все равно, кто выиграл, я просто рад, что ты был здесь за это!
Следуйте @Frontendhorse в Твиттере Анкет Если вам это понравилось, я бы был на седьмом небе от луны, если вы поделитесь этим с другом или твитнутом об этом.
Особая благодарность Вадиму Бауэру и Флоренту Лагреда за то, что они поговорили со мной об их работе.
Теперь давайте уйдем отсюда, прежде чем начнется следующая гонка. Вы заботитесь.
Твой сосед,
Алекс
Если вам понравился этот пост, отправляйтесь в Внешний интерфейс. Лошадь Подписаться! Вы получите следующий выпуск, прежде чем он будет опубликован здесь, на разработке.
Оригинал: “https://dev.to/trostcodes/gooey-svg-effects-game-ui-and-meetups-frontend-horse-7-414i”