WOW.js — анимация элементов при прокрутке страницы

WOW.js позволяет отложить запуск анимации элементов до момента их отображения на экране при прокрутке страницы. Разработчик WOW.js рекомендует использовать Animate.css для анимации. Эта библиотека поддерживает более 70 эффектов.

Демонстрацию анимаций можете посмотреть на официальном сайте

ScrollMagic - это библиотека javascript, которая помогает вам легко реагировать на текущую позицию прокрутки пользователя.

Это идеальная библиотека для вас, если вы хотите:

- Анимировать на основе положения прокрутки - либо запустить анимацию, либо синхронизировать ее с движением полосы прокрутки (например, с помощью элемента управления воспроизведением).
- Закрепить элемент, начиная с определенной позиции прокрутки - либо на неопределенный срок, либо на ограниченный объем хода прокрутки (липкие элементы).
- Включать и выключать CSS-классы элементов в зависимости от положения прокрутки.
- Легко добавить эффекты параллакса на ваш сайт.
- Создать бесконечно прокручиваемую страницу (ajax загрузка дополнительного контента).
- Добавить обратные вызовы в определенных местах прокрутки или при прокрутке мимо определенного раздела, передав параметр прогресса.

#JS

Пример сочетания цветов и оттенков для кнопок Вашего сайта!

Делайте все правильно и красиво! Для захвата цвета можете использовать инструмент ColorPix, о котором мы недавно рассказывали.

Line Icon Pack - Бесплатные иконки для вашего проекта. Набор включает в себя 280+ иконок.

Коллекция иконок содержит разрешения от 28х28 до 1024х1024px, а так же популярные форматы: png, svg, шрифтовый тип. Имеются даже исходники под различные платформы. Забираем себе в коллекцию!

Brumm Shadow — отличный сервис для создания ровных теней. При помощи данного сервиса вы сможете легко в онлайн режиме настроить тени для блоков или кнопок Вашего сайта

Способ центрировать и обрезать миниатюры с помощью CSS

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

Техника использует преобразования CSS3, поэтому она работает во всех современных браузерах, включая IE9 и выше.

Пример разметки HTML
<div class="thumbnail">
<img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">
<img src="portrait-img.jpg" class="portrait" alt="Image" />
</div>

Пример CSS свойств для этой разметки:
.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: 100%;
height: auto;
}

Вот и весь процесс, если что то не понятно, обсуждаем в нашем чате!

#HTML_CSS

Прелоадер — это индикатор загрузки сайта. Он может быть выполнен в виде анимированного gif-изображения, шкалы загрузки, css набора эффектов.

В этой статье мы рассматривали сервис анимации прелоадеров, теперь рассмотрим как реализовать эту предзагрузку на jQuery.

Разметка для предзагрузки
<div class="loaderArea">
<div class="loader"></div>
</div>

Класс .loaderArea это оболочка для нашей анимации,
а .loader это сам элемент предзагрузки (анимация).

Вызов предзагрузки на jQuery
$(window).on('load', function () {
let preloader = $('.loaderArea'),
loader = preloader.find('.loader');
loader.fadeOut();
preloader.delay(500).fadeOut('slow');
});

Оформление уже ляжет на вас, присылайте у кого что получилось в личку или делитесь в чате!

#jQuery

Toolbar.Js - плагин, который позволяет быстро создавать панели инструментов со всплывающими подсказками для использования в веб-приложениях и веб-сайтах. Панель легко настраивается с помощью Font Awesome (шрифтовые иконки), что обеспечивает гибкость в установке панели инструментов.

Установка Toolbar:
1. Скачать исходные файлы плагина

2. Подключаем javavascript:
Перед </body> добавляем и не забываем подключить jQuery
<script src="jquery.toolbar.js"></script>

3. Подключаем CSS файл:
перед </head> добавляем
<link href="jquery.toolbar.css" rel="stylesheet" />

4. Вставляем этот код на страницу, где хотите использовать подсказки
<div id="toolbar-options" class="hidden">
<a href="#"><i class="fa fa-plane"></i></a>
<a href="#"><i class="fa fa-car"></i></a>
<a href="#"><i class="fa fa-bicycle"></i></a>
</div>

5. Задействуем рабочее состояние нашему плагину:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#element').toolbar( options );
});
</script>

#jQuery

Cleave.js - библиотека javascript для простого способа повысить удобочитаемость поля ввода, отформатировав введенные данные. Используя её, вам не нужно будет писать какие-то потрясающие регулярные выражения или шаблоны масок для форматирования входного текста.

Основные особенности:
- Форматирование номера кредитной карты
- Форматирование телефонных номеров
- Форматирование даты
- Форматирование чисел

Установка:

1. Подключаем javavascript:
Перед </body> добавляем
<script src="cleave.min.js"></script>
<script src="cleave-phone.{country}.js"></script>

cleave-phone.{country}.js - плагин требуется только при включенном режиме кода телефона. Больше информации в документации.

2. Задействуем рабочее состояние нашего поля:
<script>
var cleave = new Cleave('.input-phone', {
phone: true,
phoneRegionCode: '{country}'
});
</script>

4. Вставляем этот код на страницу, где хотите использовать маску
<input class="input-phone" type="text"/>

Есть вопросы? Пиши в чат!

Atom - это бесплатный настольный редактор кода, созданный с интеграцией HTML, JavaScript, CSS и Node.js.

Неудивительно, что он пользуется спросом, поскольку это продукт от GitHub, Atom обладает лучшим встроенным элементом управления Git, специально предназначенного для репозиториев GitHub.

Atom работает на разных операционных системах. 

Основные возможности:
- Встроенный менеджер пакетов
- Умное автозаполнение
- Браузер файловой системы
- Несколько панелей для удобной работы
- Находите, просматривайте и заменяйте текст по мере ввода в файл или во всех ваших проектах.

Теперь в Google Chrome можно группировать вкладки

Для этого нужно нажать на вкладке ПКМ и выбрать «Добавить в новую группу» или «Добавить в существующую группу». Каждой группе можно присвоить имя и закрепить за ней цвет, нажав на кружок возле вкладок.

Если браузер не обновился самостоятельно, попробуйте сделать это вручную в настройках:

chrome://settings/help

Если и после обновления функция не появилась, активируйте её в экспериментальных настройках. Перейдите по адресу и нажмите Enabled напротив Tab Groups:

chrome://flags/#tab-groups

Что такое CMS и как ее использовать?

CMS (Content Management System) — это система управления контентом, готовое коробочное решение для создания, редактирования и управления контентом сайта. На профессиональном жаргоне CMS также называют «движок». Примерами CMS являются WordPress, Joomla, OpenCart.

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

Основные особенности CMS:
- наполнять сайт контентом, изменять и администрировать ресурс, при этом не являясь IT-специалистом и не имея серьезных навыков программирования;
- создавать новые страницы в короткие сроки без лишних затрат;
- оптимизировать внешний вид сайта и улучшать качество его наполнения.

Dimensions — крутое расширение для Chrome, которое помогает измерять расстояния между элементами на веб-страницах. 

Основные возможности:
- Ваш дизайнер передал вам макеты в формате PNG или JPEG? Просто поместите их в Chrome, активируйте измерения и начните измерения.
- Хотите получить радиус круга? Стоит ли текст на вашем пути? Нажмите Alt, чтобы измерить размеры подключенной области.
- Настройка горячих клавиш.

Сервисы, которые помогут эффективно и удобно работать с дизайн-макетами.

1. Avocode – помогает быстрее обмениваться файлами дизайна, обсуждать изменения и кодировать веб-сайты, мобильные приложения и информационные бюллетени. Платформа для работы макетами для верстальщиков (PSD, Sketch и др)
2. Adobe Assets – работа с PSD-макетами прямо в браузере. Экспорт кода.
3. Zeplin – работа с дизайн-макетами как в браузере так и в десктопной версии. Есть экспорт кода.
4. PSD Tech – бесплатный аналог Avocode.

#Инструменты

Автоматическое сохранение изменений CSS в Chrome

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

1. Откройте панель разработчика.
2. Перейдите на вкладку Sources. 
3. Выберите вкладку Overrides. 
4. Ниже выберите «Select Folder For Overrides». 
5. Выберите директорию, в которой вы хотите сохранять изменения. 
6. После выбора директории, появится запрос на чтение и запись в выбранную директорию. Выбираем "Разрешить". 
7. Меняем наш CSS в браузере, перезагружаем страницу и наши изменения будут сохранены.

#Инструменты

HTML Purifier - это стандартная библиотека HTML фильтров, написанная на PHP. HTML Purifier не только удалит весь вредоносный код (более известный как XSS ), но также обеспечит соответствие ваших документов стандартам, чего можно достичь только при полном знании спецификаций W3C . 

 Ищете высококачественные, совместимые со стандартами компоненты с открытым исходным кодом для создаваемого приложения? HTML Purifier для вас!

HTML Purifier - это отличная библиотека для интеграции с существующими CMS и другими приложениями или редакторами WYSIWYG

Интеграция с:
MODx, Drupal, Wordpress and bbPress, Joomla, CodeIgniter, Symfony, CakePHP, Lithium, Elgg, SilverStripe CMS

Visual Center - определение центра на вашем изображении.

Visual Center - это open-source проект, написанный на javascript. Он рассчитывает значение визуального веса для каждого пикселя на изображении: квадратный корень из разницы между этим пикселем и цветом фона. И тогда алгоритм пытается сбалансировать этот вес во всех направлениях.

Пригодится тем у кого проекты нацелены под работу с изображениями.

#JS

Крутые кнопки для сайта на чистом CSS.

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

#HTML_CSS

Активные ссылки мессенджеров для сайта.

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

Ссылка на Telegram
<!-- для перехода к диалогу Telegram, где nickname название вашего имени или канала-->
<a href="tg://resolve?domain=nickname">Telegram</a>

Ссылка на Viber
<!-- ссылка на Viber для ПК -->
<a href="viber://chat?number=+120345678910">Viber</a>

<!-- ссылка на Viber для мобильных -->
<a href="viber://add?number=+120345678910">Viber телефон</a>

<!-- +120345678910 - номер телефона -->

Ссылка на WhatsApp
<!-- ссылка на WhatsApp, где +120345678910 - номер телефона -->
<a href="whatsapp://send?phone=+120345678910">WhatsApp</a>

Больше настроек по ссылкам можете найти в полной статье.

Dopely colors - крутой сервис генерации цветовой палитры.

Основные преимущества:
— Поможет оптимально подобрать цветовое решение со всеми оттенками для Вашего веб-проекта.
— Выбор начальных цветов из ваших изображений и автоматически получите идеальную комбинацию.
— Установка дополнений для Photoshop, Illustrator Webflow, Adobe XD и Chrome.
— Экспорте своих палитр в несколько удобных форматов, таких как PNG, PDF, SCSS, SVG или скопируйте постоянные URL-адреса.
— Точная настройка своих цветов, регулируя температуру, оттенок, насыщенность, яркость и многое другое

#Инструменты