Библиотека для анимаций "Anime.js"

По результатам проведенного голосования, вы выбрали статью на тему создания анимаций при помощи библиотеки "Anime.js". Собственно приступаем к её изучению!

👨🏻‍💻 ИЗУЧИТЬ УРОК | #статья

​zeplin.io - лучший помощник для дизайнера и верстальщика

Позволяет создавать проект с макетами различных разрешений. Отступы и размеры элементов отображаются при наведении мышки. При выделении элемента сбоку появляется блок с его CSS-стилями, которые можно копировать и сразу вставлять в код проекта. Сервис позволяет экспортировать в себя проекты созданные в Photoshop, Sketch, Adobe XD и Figma.

#сервис

​materialpalette.com - генератор палитры в стиле материального дизайна

Сайт генерирует палитру Material Design на основе выбранных цветов. Отображает окно интерфейса для предпросмотра. Позволяет как скопировать отдельно RGB кодировку цвета, так и всю палитру в различных форматах. Например: CSS, SASS, LESS, SVG и PNG.

#сайт #палитра

​squoosh.app - оптимизатор изображений

Сайт оптимизирует размер изображения с минимальной потерей качества. Значение сжатия можно регулировать от 0 до 100 процентов. Экран сайта делится ползунком на две части. Слева отображается оригинальное изображение, справа оптимизированное. Ползунок можно перемещать для наглядности.

#сайт

​Balsamiq Mockups - позволяет создавать макеты интерфейсов

Сервис предназначен для прототипирования пользовательских интерфейсов. В частности веб-сайтов, мобильных и десктопных приложений. Включает в себя стандартный набор наиболее популярных элементов интерфейсов. Поддерживает сохранения макета в виде PNG-картинки либо PDF-файла.

#программа

​coolors.co - генератор цветовой палитры

Основная зона сайта представляет собой цветовые столбцы. При клике на каждый столб отображается палитра от самого темного оттенка указанного цвета, до самого светлого. Сформированную палитру можно экспортировать во множество разных форматов: CSS, SVG, ASE, изображение, PDF-файл и т.п. Так же можно сгенерировать цветовую палитру по загруженному фото.

#сервис

​www.lastpass.com/username-generator - генератор безопасного логина

Сайт позволяет сгенерировать случайный логин по заданным параметрам. На выбор предоставляется 3 стандартных варианта: легкий для произношения, легкий для чтения и содержащий все допустимые символы. Какие именно, можно так же указать: нижний регистр, верхний регистр, числа и специальные символы. Допустимая длина от 1 до 50 символов.

#сайт

​cssminifier.com - онлайн CSS-минификатор

Сайт оптимизирует предоставленный CSS-код убирая из него все лишнее: пробелы, переносы строк, комментарии и т.п. Имеет удобный и минималистичный интерфейс: окно ввода стилей, окно результата и кнопки взаимодействия. Позволяет как скопировать результат в виде текста, так и скачать в качестве файла.

#сайт #css

​fontstorage.com/ru/ - бесплатные шрифты

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

#сайт #шрифты

​get.foundation - адаптивный фронтенд фреймворк

Позволяет быстро создавать красивые и адаптивные интерфейсы сайтов и шаблоны электронных писем. Является семантическим, читабельным, гибким и полностью настраиваемым. Поддерживает "Mobile First" способ разработки сайтов. Предоставляет возможность включить в сборку как только необходимые элементы, так и настроить элементы под себя(цвета, размеры, шрифты и т.п.).

#фреймворк #frontend

​Normalize.css - приведение стилей к единому во всех браузерах

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

#библиотека #css

​jsFiddle - "песочница" для веб-разработчиков

Является одной из самых популярных онлайн сред разработки. Позволяет писать, редактировать и запускать JavaScript, HTML и CSS коды. Есть возможность подключить JavaScript библиотеку для работы. Ключевые особенности: вставка фрагментов кода, возможность расшаривания, а так же совместная работа.

#сайт #javascript #html #css

​bouncejs.com - конструктор CSS-анимаций

Является JavaScript-файлом и предназначен для создания анимаций на CSS3. На сайте можно выбрать шаблон, настроить параметры анимации, а после скопировать URL-ссылку на демонстрационный результат. И соответственно поделиться им. Так же можно просто скачать результат сгенерированной анимации в виде CSS-кода.

#библиотека #css

​Skeleton - легковесный CSS-фреймворк

Представляет собой стартовый шаблон и 2 файла стилей: normalize.css и skeleton.css. Последний содержит всего 400 строк кода в несжатом виде. Он включает в себя сеточную систему и стили для стандартных HTML-элементов(ссылки, кнопки, таблицы, формы и т.п.).

#библиотека

​Sticker.js - эффект отклеивающегося стикера

Представляет собой простую JavaScript-библиотеку, которая создает анимированный эффект отклеивания стикера у выбранного элемента. Не требует дополнительных зависимостей. Поддерживается всеми популярными браузерами. Распространяется по лицензии MIT. Сам эффект отклеивания показан на скриншоте ниже.

#библиотека #javascript

​Parallax.js - эффект параллакса на сайте

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

#библиотека #javascript

​jsnice.org - преобразует JavaScript-код в читабельный вид

Сервис анализирует загруженный JavaScript код и превращает его в человеческий вид, переименовывая переменные и параметры. Сервис использует данные, основанные на сотнях open source проектах.

#сайт #javascript

​type.method.ac - настройка межбуквенного расстояния

Это игра, которая развивает восприятие правильного расстояния между буквами в зависимости от их формы. Ваша задача подвинуть буквы в правильное положение и нажать кнопку "Next". После этого покажется верный результат, ваши баллы и ошибки. Очень полезно для дизайнеров и фронтендщиков при применении CSS-свойства letter-spacing.

#сайт #css

​pxtoem.com - конвертер из PX в EM

Сайт представляет собой онлайн калькулятор преобразования из PX в EM и обратно, а так же наглядную таблицу конвертации. Помимо пикселей и EM в таблице представлены значения в процентах и PT. Для подсчета значений от 6 до 24 пикселей достаточно в левой таблице выбрать значение шрифта по умолчанию.

#сайт #css