Аллоха! Если вы попали на это сообщение, то знайте, Это не просто телеграм канал! Это большая и дружная семья, которая старается помочь разобраться в веб разработке. На данный момент мы создадим такую навигацию по каналу, для более удобного поиска по постам:
#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