В последнее время, сайты с parallax scrolling эффектом стали появляться повсюду. Я не хотел это пропускать, поэтому я создал демонстрационную страницу с parallax scrolling эффектом с помощью jQuery и CSS.
Barrio @Barrio
Пользователь
Как создать веб-сайт, используя видео с YouTube в качестве фона?
9 мин
86KПеревод
Большие видео на заднем плане веб-сайтов — довольно популярный тренд в веб-дизайне. Умело примененные видео могут сделать веб-сайт более драматичным и привлекательным для пользователей.
Кроме того видео-фоны могут воспроизводиться плавно и без «тормозов» в отличие от фонов, созданны с помощью JavaScript, которые требуют загрузить определенный код и изображения прежде чем пользователь увидит результат анимации.
Существуют компании, как, например, Powerhouse или Adidas, которые используют видео в качестве заднего плана сайта, чтобы донести до пользователя определенное сообщение или историю о продукте или услуге.
Хотя и наиболее популярным способом создания видео-фона является использование HTML5 видео тега вместе с некоторыми параметрами CSS, стоит также обратить внимание на альтернативные источники видео, например, YouTube. В этом случае, вам не придется переживать о медленном ответе сервера, потому что запрос будет отправляться напрямик в YouTube.
В этой статье, я покажу вам, как можно построить клевый сайт, использующий видео с YouTube в качестве фона. Мы будем использовать jQuery.mb.YTPlayer.js для редактирования и управления внешним видом нашего видео. Итак, приступим!
Скачать исходники
Демо
+15
Развитие KodiCMS
4 мин
17KВсем привет. С момента написания последней статьи в системе произошло много изменений, о которых хотелось бы рассказать.
+5
Мероприятие Apple 7 марта 2012 — Новый iPad и новый Apple TV, iOS 5.1, iPhoto
2 мин
2.6KПока большинство хабровчан находятся на корпоративах посвященных 8 марта, я решил продолжить славную традицию live-постинга с мероприятий Apple.
Мероприятие ведет Тим Кук
UPDATE: Обновился web-раздел Apple.Com где можно прочитать и просмотреть про Новый iPad
Видео события — http://events.apple.com.edgesuite.net/123pibhargjknawdconwecown/event/index.html
Мероприятие ведет Тим Кук
UPDATE: Обновился web-раздел Apple.Com где можно прочитать и просмотреть про Новый iPad
Видео события — http://events.apple.com.edgesuite.net/123pibhargjknawdconwecown/event/index.html
+69
11 порталов для выбора Иконок
1 мин
5.4KКоллекция ссылок больших порталов и поисковиков, для выбора всевозможных Иконок(Icons) разного типа. Практически на всех есть широкий выбор размеров.
В этой коллекции я уверен что вы найдете что вам нужно ;)
Ну интересное так точно!!!
1. http://www.iconspedia.com
В этой коллекции я уверен что вы найдете что вам нужно ;)
Ну интересное так точно!!!
1. http://www.iconspedia.com
+98
The Noun Project: свободная иконка для каждого объекта в мире
1 мин
14KСоздатели проекта The Noun Project поставили целью собрать пиктограммы для всех объектов в мире. Коллекцию по мере сил пополняют десятки дизайнеров из разных стран. Все иконки публикуются в формате SVG, под лицензией Creative Commons Attribution 3.0 (CC BY) или Public Domain, разбиты на тематические категории, есть поиск на русском языке.
+104
Лучшие бесплатные Photoshop плагины для веб-дизайнеров
3 мин
150KDivine Elemente
Один из самых потрясающих проектов, которые я встречал за последнее время. Плагин Divine Elemente дает возможность дизайнерам создавать WordPress темы без каких либо навыков фронт/бэк-енда. К сожалению у меня не было возможности поработать с ним. Он доступен только для Windows. Для того что бы все работало необходимо создавать макет в соответствии со встроенным blueprint — это некий Bootstrap, Boilerplate или даже набор инструкций по наименовании слоев и групп. Разработчики обещают множество всего хорошего, в том числе: SEO friendly, валидную и семантичную верстку, читаемый код. Впечатляет!
+58
Набор социальных иконок
1 мин
133KДоброго времени суток! Сегодня я хочу поделиться шестью наборами социальных иконок ICON.PACK, которые отрисовал на днях. Все иконки разбиты на 6 групп, отличающихся по форме.
+42
Подборка специализированного софта для веб разработчика под ОС Android
4 мин
21KПо просьбе Carduelis и в продолжение этой и этой статей, «полтора года спустя» делаю обзорную статью приложений, которые появились/обновились за это время.
В статью не попадут редакторы текста/кода. Только приложения, которые имеют хотя бы минимальные признаки IDE. То есть код можно запустить и проверить его корректность без выхода из приложения. Программы расположены в алфавитном порядке.
+5
Обзор сервисов хранения GPS треков
3 мин
82KРешил я найти для себя сервис, позволяющий хранить GPS треки путешествий и прогулок, просто рисовать на карте маршруты будущих поездок и делиться ими с друзьями. Из требований — привязка фото к маршруту, различная статистика по поездке, возможность рисовать маршруты в браузере. Обязательно — загрузка треков в формате GPX или NMEA, приятным бонусом было бы наличие приложения для iPhone.
Перебрав достаточно много подобных сервисов — решил выделить три (хорошее число, да) наиболее интересных и многофункциональных, обзор этих сервисов я и хочу представить вашему вниманию.
+53
Simpoll: опросы и тесты для вашего сайта
3 мин
5.4KЗдравствуйте. Позвольте рассказать вам о недавно запущенном стартапе Simpoll.ru
Simpoll — это удобный сервис для создания опросов (анкет), голосований и тестов, которые можно вставить на свой сайт и получать наглядные и фильтруемые результаты в реальном времени.
Simpoll — это удобный сервис для создания опросов (анкет), голосований и тестов, которые можно вставить на свой сайт и получать наглядные и фильтруемые результаты в реальном времени.
+47
Web Symbols
1 мин
6.3KУ каждого дизайнера наступает момент, когда ему надоедает заново рисовать одинаковые элементы на сайтах. Например, иконки социальных сетей или стрелочки для галерей. Также, технологам надоедает каждый раз нарезать «гиф» или «пнг» одного и того же элемента.
Чтобы упростить себе эту работу мы сделали шрифт, в котором каждая буква — символ (как правило, часто используемый).
Ну и собственно почему-бы им не поделиться со всеми?
Web Symbols
+139
Cargo — платформа для портфолио
4 мин
27KВ моём предыдущем хабратопике несколько человек просили рассказать подробнее про Cargo, как оказалось хабра-сообщество еще с ним не знакомо, что же — распишу всё по шагам и с картинками.
Cargo — это платформа (CMS) для веб-публикаций и организации сообществ, в настоящее время находящаяся в стадии разработки и тестирования. Она полномочна для создания различных творческих сообществ в сфере образования, дизайна, исследований, и концептуального искусства.
+37
+62
Популярные продукты для электронной коммерции с открытым исходным кодом
4 мин
30KПеревод
Нас часто просят порекомендовать продукты eCommerce, которые могут интегрироваться с CMS или использоваться совместно с к.л. CMS. Ниже опубликован список ПО с открытым исходным кодом, пригодного для этих целей.
Примечание: русскоязычных пользователей, прежде всего, интересует наличие локализованных версий, поддержка отечественных платёжных систем и русское сообщество. В комментариях по тексту, выделенных курсивом, по-возможности указана эта информация.
Примечание: русскоязычных пользователей, прежде всего, интересует наличие локализованных версий, поддержка отечественных платёжных систем и русское сообщество. В комментариях по тексту, выделенных курсивом, по-возможности указана эта информация.
+38
Впечатляющие анимационные эффекты
2 мин
115KПеревод
С появлением jQuery, у веб-программистов появилась возможность создавать впечатляющие визуальные эффекты, не прибегая к использованию технологии flash. В данной статье представлено несколько ярких примеров того, каких потрясающих результатов можно достичь, используя стандартные средства браузера и свое воображение.
+230
Визуальный редактор на jQuery
2 мин
14KВ мире визуальных редакторов есть CKeditor, есть tinyMCE — монстрообразные, не гибкие, их сложно изменять под задачи сайтов и интерфейсов. Есть небольшие, простые, они часто с ужасным дизайном, не развиваются, не поддерживаются. Как настоящий разработчик, несколько лет назад я решил написать свой редактор и в течение этого времени постоянно развивал его и упрощал. Суть редактора постепенно свелась к простым требованиям:
- он должен быть красивым и одновременно ненавязчивым, чтобы вписывался без внешних изменений почти в любой интерфейс;
- обязательно быстрым и легкий, потому что никому не нравится сидеть даже полминуты в ожидании загрузки всех кнопок и плагинов;
- гибкий для разработки, доработки и встраивания под все возможные нужды;
- с простым и понятным интерфейсом. В идеале визуальный редактор — это просто поле для ввода текстов, без лишних кнопок и функций. Просто люди пишут тексты в вебе и это все что им нужно.
+194
Комментирование и авторизация при помощи Google Friend Connect
1 мин
792Совсем недавно, Google добавил поддержку плагинов к своей службе Google Friend Connect. На данный момент доступно три плагина:
- Комментирование в блогах WordPress
- Авторизация в системах Drupal
- Авторизация в системах phpBB
+5
Ещё один способ победить Internet Explorer
2 мин
7.8KРано или поздно все web-разработчики сталкиваются с ситуацией, когда Internet Explorer становится проблемой, тормозящей разработку проекта. Сайт свёрстан валидно, по стандартам. Нормально отображается в Mozilla, Opera, Safari и других нормальных браузерах. Но. Открываем его в IE. И видим. Как то, что мы подгоняли по пикселям, строго придерживаясь стандартов, размазано по странице. Ладно ещё в IE7 можно более-менее просто подогнать вёрстку (конечно зависит от дизайна), но от IE6 иногда волосы встают дыбом. К счастью, существуют способы, которые позволяют повлиять на ситуацию. Кто-то использует хаки, кто-то — conditional comments. Где-то можно пойти на компромис и упростить задумку дизайнеров, поддерживая пользователей недобраузеров.
+40
Верстаем пиксел в пиксел: кроссбраузерный аналог PixelPerfect
2 мин
35KДовольно часто некоторые заказчики, отдавая макет сайта на вёрстку, требуют попиксельно достоверной точности в разметке во всех браузерах.
Проверить такое соответствие достаточно легко — нужно сделать скриншот сайта и совместить его с графическим макетом, например, в Photoshop'е.
Но вот только в процессе вёрстки использовать такой приём не очень удобно.
+4
Информация
- В рейтинге
- Не участвует
- Откуда
- Дорогобуж, Смоленская обл., Россия
- Дата рождения
- Зарегистрирован
- Активность