Youtube-видео в виде фона на сайте – jQuery Tubular
Наткнулся на интересный jQuery скрипт, который позволяет вставить видео в виде фона для сайта. Впечатляет, не правда ли? Как по мне, то сама идея немного необыкновенна, но вот другой вопрос, найдет ли этот скрипт реальное применение…
Рабочий пример можно посмотреть на сайте разработчика, а скачать jQuery Tubular можно со страницы проекта на Google Code.
Использование скрипта:
1. Перед тегом , добавить:
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script> <script type="text/javascript" charset="utf-8" src="js/mission-control.js"></script>
2. В файле mission-control.js, во второй строке, прописываем id видеоролика с youtube:
$('body').tubular('_VKW_M_uVjw','wrapper');
PS: В архиве со скриптом, есть готовый пример.
Вставка видео-плейлиста с YouTube – jqChromelessYoutube
Искал яваскрипт для того, чтобы красиво оформить несколько видео с youtube на одной странице и наткнулся на jqChromelessYoutube. Выглядит красиво, минималистично, без стандартных ютубовских элементов управления. Заголовок сверху, справа плейлист, заранее созданный на youtube. Единственный недостаток в том, что нет кнопки для просмотра видео во весь экран.
UPD: Нашел еще две альтернативы. Первый скрипт имеет в себе много настроек, поддержка сразу нескольких плейлистов, а так же поддержка разных тем оформления, это jQuery Youtube Media Player Plugin. Второй скрипт немного минималистичнее и легче, называется youtubeplaylist.
Переключение страниц с помощью Ctrl + ← / →
Многие наверняка уже встречали метод навигаций с помощью клавиатуры, а конкретно сочетания клавиш Ctrl + стрелочки влево/вправо. Подобный скрипт используется, например на яндексе, хабре или сайте студий Лебедева.
Перейдем сразу к делу, как реализовать такое у себя на сайте:
1. Создаем index.html
<html>
<head>
<script type="text/javascript" src="nav.js"></script>
<link rel="prev" href="page-1.html" id="NextLink" />
<link rel="next" href="page-3.html" id="PrevLink" />
</head>
<body>
<!-- Содержание сайта -->
<a href="page-1.html">&amp;amp;amp;larr; Назад</a> + <b>Ctrl</b> + <a href="page-3.html">Вперед &amp;amp;amp;rarr;</a>
</body>
</html>
Chrome Experiments – галерея примеров на js + html5
Понравился сайт ChromeExperiments с примерами, которые демонстрируют возможности новейших технологий HTML5, Canvas, SVG и JS, хорошая альтернатива Flash’у. Попробовал пару «экспериментов» в Google Chrome и Firefox 3.6.3, всё работало без проблем.
Особенно понравилась игра Browser Pong, пинг-понг с помощью окн браузера, довольно таки прикольно выглядит. Правда победить браузер мне не удалось, слишком уж он шустрый =)
Напоследок несколько ссылок на разные темы:
- World Cup 2010 Twitter replay – отображает частоту популярных тви-тэгов в течений футбольного матча
- Новостью прошлой недели наверное стало событие того, что президент завел себе тви-аккаунт
- Стив показывает как правильно держать айфошу, чтобы избежать проблем со связью =) #habr
Wappalyzer – «определялка» CMS
Встретил интересное дополнение для Firefox. Называется оно Wappalyzer, задача этого дополнения, определить на какой CMS работает сайт, который открыт в данный момент. Иконка с информацией отображается в строке состояния браузера, в нижнем правом углу. Так же Wappalyzer определяет какие веб-инструменты используются на сайте, js-библиотеки(jquery, MooTools), Google Analytics и другие.
Остается спорным серьезное применение этого плагина, но иногда просто бывает интересно узнать на чем работает определенный сайт.
Ознакомиться с дополнением можно на сайте Firefox
