jQuery: слайдер с эффектом параллакса

Доброго времени суток! Сегодня мы будем создавать слайдер с использованием некоторых принципов эффекта параллакса. Я уже писал о плагине Scrolling Parallax совсем недавно. Там мы...
Доброго времени суток! Сегодня мы будем создавать слайдер с использованием некоторых принципов эффекта параллакса. Я уже писал о плагине Scrolling Parallax совсем недавно. Там мы использовали плагин, а тут напишем все с нуля. Итак, приступим к созданию слайдера с эффектом параллакса на jQuery. (далее…)

Easy Slider — простой в настройке слайдер для сайта

Сегодня решил сделать обзор jQuery слайдера, который я частенько использую в работе. Слайдер приглянулся тем, что очень прост в установке и кастомизации. Текущая версия плагина...
Сегодня решил сделать обзор jQuery слайдера, который я частенько использую в работе. Слайдер приглянулся тем, что очень прост в установке и кастомизации. Текущая версия плагина на данный момент 1.7. Автор постоянно улучшает слайдер и он абсолютно бесплатен. Давайте разберемся как установить и настроить слайдер на своем сайте. (далее…)

Создание слайд меню с использованием псевдо-селекторов и CSS3

Сегодня мы будем разбираться с псевдо-селекторами, а заодно создадим довольно интересное слайд меню. Для начала мы создадим меню используя техники CSS3. Потом мы реализуем то...
Сегодня мы будем разбираться с псевдо-селекторами, а заодно создадим довольно интересное слайд меню. Для начала мы создадим меню используя техники CSS3. Потом мы реализуем то же самое без использования псевдо-селекторов, дабы пример был кроссбраузерным. И в самом конце мы заменим все новые штучки из CSS3 на старый добрый jQuery. (далее…)

jQuery: плагин Scrolling Parallax

Scrolling Parallax это jQuery плагин, который добавляет эффект параллакса при прокрутке страницы с помощью скролбара или колеса мыши. Это позволяет фону страницы прокручиваться с другой...
Scrolling Parallax это jQuery плагин, который добавляет эффект параллакса при прокрутке страницы с помощью скролбара или колеса мыши. Это позволяет фону страницы прокручиваться с другой скоростью нежели остальной контент страницы. Эффект параллакса позволяет с легкостью создавать иллюзию глубины вашего сайта. Самый простой вариант использования плагина это просто указать плагину путь до изображения. Плагин возьмет данное изображение и растянет его на всю ширину страницы и на 150% высоты страницы. Дополнительные 50% послужат для плавной прокрутки фона вместе с основным контентом. У плагина масса опций, которые позволяют скролить быстрее, медленнее, зацикливать скрол и т.д. Но обо всем по-порядку. (далее…)

Как растянуть фон на все окно браузера? Четыре простых решения на CSS и JavaScript. Свойство background-size

Часто ли вы сталкивались с сайтами, у которых фоновый рисунок растянут на всю страницу? И не важно в каком разрешении вы просматриваете сайт - фон...
Часто ли вы сталкивались с сайтами, у которых фоновый рисунок растянут на всю страницу? И не важно в каком разрешении вы просматриваете сайт - фон всегда занимает весь экран браузера и не смотриться растянутым. Я тоже задавался этим вопросом и нашел ответ в хорошей статье Криса Койера. Сегодня приведу вольный перевод, максимально близко к тексту. Будут рассмотрены четыре разных способа сделать фоновый рисунок на всю страницу. В конце статьи - ссылка на архив с демо страницами. (далее…)

Анимированная диаграмма умений с помощью JavaScript библиотеки Raphaël

Сегодня я бы хотел поведать вам о прекрасной JavaScript библиотеке Raphaël. Мы создадим анимированную диаграмму умений с помощью этой библиотеки. Идея очень проста: мы нарисуем...
Сегодня я бы хотел поведать вам о прекрасной JavaScript библиотеке Raphaël. Мы создадим анимированную диаграмму умений с помощью этой библиотеки. Идея очень проста: мы нарисуем несколько дуг с помощью математических функций и будем выводить уровень умения в центральном круге в процентах. Давайте приступим. (далее…)

Подсказки с последними твитами с помощью jQuery

Если у вас имеется новостной сайт, то было бы интересно показывать вашим посетителям последние твиты по конкретной теме. Тогда вам пригодиться данный JavaScript плагин -...
Если у вас имеется новостной сайт, то было бы интересно показывать вашим посетителям последние твиты по конкретной теме. Тогда вам пригодиться данный JavaScript плагин - он показывает последние твиты по заданному слову или фразе. (далее…)

Мини-бар MS Office с помощью jQuery и CSS

Я думаю, что многие согласятся с утверждением, что дизайн продуктов Microsoft частенько радует глаз. К примеру, мини-бар, который мы увидели с выходом в свет MS...
Я думаю, что многие согласятся с утверждением, что дизайн продуктов Microsoft частенько радует глаз. К примеру, мини-бар, который мы увидели с выходом в свет MS Office 2007. По сути он повторяет часть функций одной из панелей быстрого доступа. Главным его плюсом является возможность изменять стиль выделенного текста "на лету". Мини-бар обычно появляется рядом с курсором мыши, что позволяет пользователю быстро применить нужные действия к выделенному тексту. Примерно такой же мини-бар мы попробуем создать сегодня для сайта. Вариантов его применения масса. Один из них комментарии - позвольте пользователям применять стандартные тэги для оформления своих комментариев. (далее…)

Создаем вращающиеся иконки с помощью CSS3 и Mootols

Сегодня мы займемся тем, что попробуем приукрасить внешний вид иконок на профили (RSS, twitter и т.д.). Добавим немного движения в эти иконки. А делать мы...
Сегодня мы займемся тем, что попробуем приукрасить внешний вид иконок на профили (RSS, twitter и т.д.). Добавим немного движения в эти иконки. А делать мы будем это с помощью CSS3 анимации.Так же с помощью JavaScript библиотеки MooTools мы будем задавать произвольное расположение и поворот иконок. Давайте посмотрим как притворить это в жизнь. (далее…)

Панель трендов с помощью CSS и jQuery

Хочу сегодня поделиться с вами интересной задумкой. На многих англоязычных порталах, частенько присутствует так называемая панель трендов. Обычно это однострочная панель прилепленная к низу экрана,...
Хочу сегодня поделиться с вами интересной задумкой. На многих англоязычных порталах, частенько присутствует так называемая панель трендов. Обычно это однострочная панель прилепленная к низу экрана, на которой создатели портала анонсируют популярные статьи. Панель достаточно хорошо привлекает внимание и соответственно вы можете перенаправить трафик со всего сайта в нужное вам русло. Существует множество плагинов для Wordpress, которые позволяют сделать что-то подобное. Но нам всегда интересен чистый легкий код. Так же мы будем использовать свойство opacity для того, чтобы панель становилась ярче при наведении на нее курсора мыши. (далее…)