Аллоха! Если вы попали на это сообщение, то знайте, Это не просто телеграм канал! Это большая и дружная семья, которая старается помочь разобраться в веб разработке. На данный момент мы создадим такую навигацию по каналу, для более удобного поиска по постам:
#HTML
#CSS
#JS
#jQuery
#Vue
#Wordpress
#DLE
#Статьи
#Инструменты
#Графика

#JS #jQuery
5 видеоплееров с открытым исходным кодом для вашего сайта

Сегодня поговорим о лучших бесплатных видеоплеерах, которые можно интегрировать на Ваш сайт,

1. Video.js
2. Shaka Player
3. Plyr
4. MediaElement.js
5. Flowplayer

Более подробнее можете ознакомиться о каждом веб-плеере по ссылке 👇

Прелоадер — это индикатор загрузки сайта. Он может быть выполнен в виде анимированного 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

jQuery Mask Plugin - плагин на jquery для создания масок в полях формы. Поддерживает огромное кол-во различных типов полей, от банковских карт до ip адресов.

Особенности плагина:
— Легкий (~ 2kb минимизированный, ~ 1kb gziped).
— Встроенная поддержка динамически добавляемых элементов.
— Маски для любого элемента HTML (больше не нужно маскировать на стороне сервера)
— Поддержка нотации HTML (data-mask, data-mask-recursive, data-mask-clearifnotmatch).
— Необязательные цифры.
— Рекурсивные цифры.
— Резервные цифры.
— Расширенная инициализация маски.
— Расширенные обратные вызовы.
— Смена маски на лету.
— Удаление маски.
— Полная настройка.
— Совместимость с React / UMD / Zepto.js / Angular.JS.
— Поддержка заполнителя HTML5.
—Очистка полей, если они не соответствует формату.

#jQuery

Vegas Backgrounds and Slideshows — это плагин jQuery или Zepto для анимации фоновых изображений блоков или всей страницы. Он имеет массу настроек и эффектов анимации.

#jQuery

iziModal.js - современный плагин, который позволит Вам создавать красивые модальные окна с оригинальным дизайном. Всплывающие окна на jQuery можно настраивать с разными эффектами и разметкой. Есть готовые варианты для фрейма, формы, AJAX`a. Все, что необходимо — это подключить библиотеку и стили плагина. Библиотека имеет отличную документацию.

#jQuery

Owl Carousel 2 - плагин jQuery с сенсорным управлением на мобильных устройствах, позволяющий создать красивый адаптивный слайдер карусели.

Основные особенности:
- Более 60 вариантов настройки
- Поддержка Touch and Drag
- Полностью адаптивный
- Использует аппаратное ускорение с переходами CSS3 Translate3d
- Поддержка старых браузеров с CSS2
- Модульная структура

#jQuery

Zoomove - это плагин, разработанный с помощью jQuery, который позволяет динамически масштабировать изображения при наведении мыши, а также просматривать детали при перемещении мыши.

Настройка плагина:
1. Подключаем библиотеку

<!-- ZooMove CSS minified -->
<link rel="stylesheet" href="dist/zoomove.min.css">

<!-- jQuery CDN JS minified (must) -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- ZooMove JS minified -->
<script src="dist/zoomove.min.js"></script>

2.Теперь нужно подготовить наши изображения и показать их ZooMove.

<!-- Item image -->
<figure class="zoo-item" data-zoo-image="img/example.jpg"></figure>

<!-- Starting the ZooMove -->
<script>
$('.zoo-item').ZooMove();
</script>

ZooMove совместим с: jQuery 1.7+ в Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, Internet Explorer 9+

#jQuery

jQuery FancyBox — плагин для создания красивых фотогалерей и вывода изображений в модальных окнах. Для использования последней версии придется потратиться. Плагин платный.

Способ подключения:
1. Подключаем файлы jQuery и FancyBox
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<link href="/path/to/jquery.fancybox.min.css" rel="stylesheet">
<script src="/path/to/jquery.fancybox.min.js"></script>

2. Создание ссылок на показ картинок в виде галереи
<a data-fancybox="gallery" href="big_1.jpg">
<img src="small_1.jpg">
</a>

<a data-fancybox="gallery" href="big_2.jpg">
<img src="small_2.jpg">
</a>

#jQuery

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

#jQuery

Selectize - это гибрид текстового поля и поля <select>. Он основан на jQuery и полезен для добавления тегов, списков контактов, выбора страны и т.д.

Его размер составляет около 7 КБ (в сжатом виде). Цель состоит в том, чтобы предоставить надежный и удобный пользовательский интерфейс с чистым и мощным API. Поддерживает Bootstrap 2, 3, 4 версии.

#jquery

Propeller.js - библиотека JavaScript для поворота элементов с помощью мыши или сенсорных жестов. 

Propeller использует композицию requestAnimationFrame и GPU для повышения производительности. Он также совместим с сенсорными устройствами. Есть поддержка jQuery.

#javascript #jquery

Peppermint.js — очень гибкий тач-слайдер для Вашего проекта.

Основные особенности:
- Работает с мышью, тачэвентами, поинтерэвентами, старыми поинтерэвентами из IE10
- Работает на андроидах, айфонах, винфонах, блекберри и на девайсах с 8 виндой
- Работает в IE7+
- Не зависит от сторонних библиотек. Если находит jQuery, регистрирует себя в качестве плагина.
- Использует CSS3 трансформы и транзишены с фоллбеком на анимации по таймеру
7,7 Кб кода
- Оптимизированные на скорость выполнения touch-функции
- API и callback-функции для расширений
- Работает с клавиатурой, не ломается от кнопки Tab

#javascript #jquery