Создать анимацию Slick UI

Все чаще, дизайнеры и разработчики подтверждают важность дизайна движения в контексте Пользовательский опыт Отказ Анимация в Интернете больше не является способом поражения и WOW пользователя, но функциональный инструмент, который делает опыт легким, веселым и запоминающимся. И есть ряд различных инструментов и подходов, от CSS анимация Техникам с использованием Bootstrap или HTML.

Анимация в контексте пользовательских интерфейсов все еще является очень новым полем. Там не так много ресурсов, которые уделяют наилучшей практике или показывают общие узоры анимации пользовательского интерфейса, которые мы можем следовать. Большую часть времени, речь идет о экспериментах, Тестирование пользователей И, возможно, немного испытания и ошибки.

• 15 адаптивных учебников веб-дизайна

Таким образом, в этом руководстве мы создадим что-то, что не путают, следует общим узорам и стильно. Это будет раздел профиля команды, который вы часто видите на веб-сайтах компании. Идея состоит в том, чтобы показать немного больше информации о команде / сотруднике, когда каждый парит. На протяжении всего учебника мы будем использовать CodePen, но, конечно, вы можете использовать свой собственный любимый редактор и среду разработки. Помните, что создание более сложного сайта может изменить ваш веб хостинг Потребности, так что убедитесь, что у вас есть услуга, которая работает для вас.

Вы хотели бы простой инструмент для создания сайта? Использовать блестящий Строитель сайта Отказ

01. Установить

Начните с открытия кодом и создавая новую ручку. Мы собираемся использовать Bootstrap 4 и SASS (.scsss), поэтому убедитесь, что в настройках вы включаете CSS и JS Bootstrap и JS в качестве ссылок на ресурсы, а также установите CSS в SCSS. Другая ссылка на ресурс, вам нужно будет добавить, - это шрифт Awesome, которую мы будем использовать для наших социальных иконок.

02. Создание контейнеров, строк и столбцов

Контейнеры - это то, какой Bootstrap использует в качестве основного элемента макета, и они необходимы, когда вы используете систему GRID по умолчанию. В контейнерах вам нужно добавить в строку. Ряды - это обертки для столбцов, и вы можете указать количество столбцов, которые вы хотите из возможных 12, а то, что будет точка останова. В нашем случае мы хотим элемент, который имеет среднюю точку останова среднего размера и заполняет три колонны в ширину.

 & lt; class = "контейнер" & gt;
 & lt; class = "ряд" и GT;
 & lt; class = "Col-Md-3" & gt;
 & lt; - добавить изображение ссылки и цвета здесь
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt; 

03. Установите изображение профиля и цвет

Первый профиль элемент пользовательского интерфейса мы начнем с того, что будет для члена команды женщины, и она будет частью синей команды. Цвет будет указан с использованием класса, называемого синим и фактическим цветом, в конечном итоге будет определен с использованием переменных SASS, которые мы сделаем на более позднем этапе. Тогда нам нужно будет добавить на фото и дать ему класс под названием Фото.

 & lt; class = "Team Blue" & gt;
    & lt; class = "фото" & gt;
       & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg" alt = "libby" & gt;
     & lt; / div & gt;
& lt; / div & gt; 

04. Добавить имя профиля и заголовок

Последний бит HTML будет добавлен, будет для имени, названия и социальных значков, которые будут добавлены под последним тегом DIV, который мы только что добавили на последний шаг. Для социальных иконок мы будем использовать шрифт потрясающие, и они будут размещены в неупорядочающемся списке.

 & lt; class = "Профиль-txt" & gt;
      & lt; h1 class = "title" & gt; libby & lt; / h1 & gt;
      & lt; Span Class = "Position" & gt; веб-дизайнер & lt; / span & gt;
   & lt; / div & gt;
          & lt; ul class = "Социальные иконки" и GT;
       & lt; li & gt; & lt; href = "" Class = "Fa-Facebook" & lt; / li & gt;
       & lt; li & gt; & lt; href = "" Class = "Fa-Twitter" & lt; / a & gt;
       & lt; href = "" Class = "Fa-linkedin" & lt; / li & gt;
       & lt; li & gt; & lt; href = "" CLASS = "FA FA-DRIBBBLE" & LT; / LI & GT;
    & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt; 

05. Установить переменные SASS

Если вы следите за помощью, используя Codepen, то у вас уже будет установлен Sass и готовый к работе. Вам просто нужно нажать на значок / кнопку «Настройки ручки» и выберите SCSS в качестве препроцессора CSS. Тогда мы можем идти вперед и добавить в некоторые переменные, которые будут хранить все наши цвета. Мы использовали RGBA в качестве цветовых значений, чтобы позволить нам более значимым контролем всех непрозрачности цветов.

 $ Bluegradient: RGBA (103, 188, 223, 0,8);
$ LightGreen: RGBA (188, 219, 183, .5);
$ зеленый: RGBA (119, 180, 109, 0,5);
$ Грин-граница: РГБА (171, 221, 164, 0,5);
$ Blue: RGBA (80, 205, 227, 1);
$ Blue-граница: RGBA (147, 223, 236, 1); 

06. Загрузите фоновое изображение

Чтобы все выглядеть более привлекательно, мы разместим хорошее фоновое изображение на теле. Здесь мы можем использовать наш первый набор переменных и дать фоновое изображение приятное наложение градиента, которое идет от светлого зеленого до синего цвета. Затем сделать наше фоновое изображение полностью отзывчивым, мы установим высоту просмотра до 100ВХ.

 Тело {
 Фон: линейный градиент (справа, $ Lightgreen, Bluegradient), URL (https://image.ibb.co/mddpu7/clouds_cornfield_countryside_158827.jpg) Центр не повторяется;
 Фон-размер: крышка;
 Должность: родственник;
 Высота: 100ВХ;
 } 

07. Выберите фона профиля и изображение

Каждый профиль команды будет предоставлен те же стили, а команда класса будет использоваться для этого. Фон будет белым, все сосредоточено все контента, и нам нужно убедиться, что позиция установлена ​​на относительную. Тогда мы можем включить CSS для изображения профиля. Для достижения наилучших результатов убедитесь, что исходное изображение, которое вы используете, имеет размеры, не более крупные площади 200px. Однако мы изменим высоту и ширину из них в рамках правила фото CSS.

 .eam {
 прокладки: 30px 0 40px;
 Margin-Top: 60px;
 Фон: #fff;
 текстовый выровнян: центр;
 Переполнение: скрыто;
 Должность: родственник;
 Курсор: Указатель;
 Box-Shadow: 0 0 25PX 1PX RGBA (0,0,0,0.3);
 .Фото {
 Дисплей: встроенный блок;
 Ширина: 130px;
 Высота: 130px;
 Маржина - снизу: 50px;
 Должность: родственник;
 z-индекс: 1;
 }
 } 

08. Добавьте анимацию

Первый кусок анимации мы добавим, будет в верхней части нашего элемента профиля. Идея состоит в том, что когда мы наваливаемся на весь элемент, синяя круглая форма будет оживлена. Мы можем контролировать, сколько синего можно увидеть, указав положение этого, чтобы иметь нижний процент. Так что играйте с этим процентом, и вы получите лучшее представление о том, как это работает. Вы никогда не знаете: вы можете даже обнаружить лучший эффект!

 .blue .photo: до {
 содержание: "";
 Ширина: 100%;
 Высота: 0PX;
 Границы-радиус: 50%;
 Фон: $ синий;
 Должность: абсолютный;
 Дно: 130%;
 справа: 0;
 Слева: 0;
 Преобразование: масштаб (3);
 Переход: все .3S линейные 0с;
}
.Team: Hover .Photo: до {
 Высота: 100%;
} 

09. Анимируйте команду фото

The Team Photo - это наша очаговая точка в этом интерфейсе UI и, вероятно, является наиболее очевидным элементом, который вы ожидаете ожидать анимации в какой-то форме или форме. CSS мы добавим на этот шаг, сначала повернут фотографию в меньший круг, затем, когда, когда на паре завещался, будет добавлена ​​легкая голубая граница, и фотография будет масштабироваться вместе с границей. С добавлениями переходов мы получаем приятную анимацию жидкости.

. Pic: после {
 содержание: "";
 Ширина: 100%;
 Высота: 100%;
 Границы-радиус: 50%;
 Фон: $ синий;
 Должность: абсолютный;
 Вершина: 0;
 Слева: 0;
 z-индекс: 1;
}
.team .photo img {
 Ширина: 100%;
 Высота: авто;
 Границы-радиус: 50%;
 Преобразование: масштаб (1);
 Переход: все 0,9 легко 0с;
}
.blue: hover .photo img {
 Box-Shadow: 0 0 0 14PX $ Blue-Granion;
 Преобразование: масштаб (0,6);
 }

10. Настроить имя профиля и позицию

Имя профиля и позиция нуждаются в небольшом количестве уборки. Они не будут анимированы, но это не должно останавливать вас от добавления собственной анимации к этим, если вы хотите. Возможно, слегка масштабируется на колебании, так как у вас будет достаточно места из-за размера фотографии.

 .profile-txt {
 Маржина - снизу: 30px;
 .заглавие {
 Размер шрифта: 2rem;
 вес шрифта: 700;
 Цвет: # 333;
 Интернет-интервал: 1.5px;
 Текстообразное преобразование: Capitalize;
 Маржина - снизу: 6px;
 }
 .позиция{
 Дисплей: блок;
 Размер шрифта: 1rem;
 Цвет: # 555;
 }
} 

11. Добавить социальные иконки

Социальные иконки будут сначала располагаться от нижней части страницы -100PX. Затем, когда мы навязываем на него, нижняя позиция будет установлена ​​на ноль и с добавлением перехода, это даст нам приятную плавную анимацию, поскольку она движется назад. Иконы будут даны свое собственное состояние зависания, устанавливая свой фон в белый и значок на синий.

 .blue .social-icons {
 Ширина: 100%;
 Список стиль: нет;
 прокладки: 0;
 Маржа: 0;
 Фон: $ синий;
 Должность: абсолютный;
 Дно: -100PX;
 Слева: 0;
 Переход: все 0,6 л.
 Li {
 Дисплей: встроенный блок;
 
 {
 Дисплей: блок;
 прокладки: 8px;
 Размер шрифта: 1rem;
 Цвет: #fff;
 Текстовое украшение: нет;
 Переход: все 0,5 л.
 & amp;: hover {
 Цвет: $ синий;
 Фон: #fff;
 }
 }
 }
}
.Team: hover .social-icons {
 Дно: 0PX;
} 

12. Сделайте зеленый член команды

Чтобы немного смешивать вещи, мы можем начать добавлять больше участников в нашу команду. Цвет, который мы будем использовать для этого следующего, будет зеленым. Но сначала вернитесь в сертификацию / файл / файл HTML, и все, что нам нужно сделать, это скопировать класс Col-MD-3 - не строку - до последнего тега DIV под социальными значками и вставьте его.

 & lt; class = "Team Green" & gt;
 & lt; class = "фото" & gt;
 & lt; img src = "https://image.ibb.co/mprlns/mick_ui.jpg" Alt = "libby" & gt;
 & lt; / div & gt; 

После того, как вы изменили синий класс к зеленому, мы, наконец, можем добавить во все CSS, которые дадут нам ту же анимацию.

. Ген: Hover .Photo IMG {
 Box-Shadow: 0 0 0 14px $ Грин-граница;
 Преобразование: масштаб (0,6);
 }
. зелен .photo: до {
 содержание: "";
 Ширина: 100%;
 Высота: 0PX;
 Границы-радиус: 50%;
 Фон: $ зеленый;
 Должность: абсолютный;
 Дно: 135%;
 справа: 0;
 Слева: 0;
 Преобразование: масштаб (3);
 Переход: все .3S линейные 0с;
}
. зелен .social-icons {
 Ширина: 100%;
 Список стиль: нет;
 прокладки: 0;
 Маржа: 0;
 Фон: $ зеленый;
 Должность: абсолютный;
 Дно: -100PX;
 Слева: 0;
 Переход: все 0,6 л.
 Li {
 Дисплей: встроенный блок;
 {
 Дисплей: блок;
 прокладки: 8px;
 Размер шрифта: 1rem;
 Цвет: #fff;
 Текстовое украшение: нет;
 Переход: все 0,5 л.
 & amp;: hover {
 Цвет: $ зеленый;
 Фон: #fff;
 }
 }
 }
} 

И красота такого подхода заключается в том, что вы можете повторить по мере необходимости для многих различных классов цвета, что позволяет вам тонко тему вашей анимации пользовательских интерфейсов.

Если вы строите сайт с командой, убедитесь, что вы получите надежную, безопасно облачное хранилище держать вещи сплоченными.

Эта статья была первоначально опубликована в выпуске 307 сеть Самый продаваемый журнал мира для веб-дизайнеров и разработчиков. Купить проблему 307. или же Подписаться на Net. Отказ

Хотите узнать больше о uns и outs анимации пользовательского интерфейса?

Если вы заинтересованы в том, чтобы узнать больше о том, как вы можете сделать свои сайты POP и Sparkle с помощью гладкой анимации пользовательского интерфейса, убедитесь, что вы подняли свой билет на Генерировать Лондон Отказ

Фронтальный дизайнер и разработчик, работающий в настоящее время, работающий в настоящее время творческим разработчиком для Asemblr.com, Стивен Робертс будет доставлять свою анимацию Talk - CSS: вне переходов - в котором он покажет вам лучшие инструменты для работы и воссоздать некоторые из лучших анимаций Веб должен предложить, обнаруживая возможности и ограничения анимирования только с CSS.

Generate London проходит с 19 по 21 сентября 2018 года. Получить свой билет сейчас Отказ

Статьи по Теме:

• Как использовать анимацию в мобильных приложениях
• Руководство по проекту UI
• Руководство начинающего к проектированию интерфейсных анимаций