Все для веб-дизайнера
Архивы за Сентябрь, 2013
Интересный эффект дождя на сайте на jQuery
30 Сен
Вы задумывались о том, что фон сайта это не просто картинка или обычная градиентная заливка, это нечто большее, это тот фактор на который пользователь может не сразу обратить свое внимание, но его подсознание замечает и несет информацию, в последствии которой складывается общее представление о сайте. В данном уроке мы рассмотрим как можно создать весьма интересный фон, а скорее даже эффект для фона в виде анимированного дождя с звуковым сопровождением. Все это осуществить не так тяжело. Нам понадобится немного магии и библиотека jQuery.
Создаем собственные стили для карт Google Maps
26 Сен
Создавая сайт я не раз сталкивался с пожеланиями клиента о выводе интерактивной карты в разделе контакты, просто позаимствованные карты в Google смотрятся не достаточно изящно и не подчеркивают стиль сайта. Ведь на данных картах всегда маркируются логотипы ее разработчика. Мы решили рассмотреть как можно использовать популярные карты, но при этом с адаптированным дизайном под свой вкус. С помощью небольших манипуляций мы сможем отредактировать все, включая цвета дороги, воды, подписей и придать цветовой оттенок самой карте.
Как создать интересный эффект параллакса
22 Сен
Хоть эффект параллакса можно встретить достаточно не редко но все равно он продолжает привлекать взор посетителя и веб-мастера. Простота решения и отзывчивость позволяет сделать изюминку на сайте, а это всегда будет благосклонно сказываться на сайте. Мы уже не раз рассматривали интересные интерпретации данного эффекта для различных частей сайта. В данном уроке мы решили вернуться к этому замечательному эффекту и рассмотрим процесс его создания. Как и для прочего эффекта нам понадобится нарезка со слоями изображений. Кроме этого вы можете легко изменить желаемый слой.
Интересный эффект шредера с помощью CSS3
16 Сен
Если вам необходимо организовать красивое уничтожение каких либо бумаг на сайте, к примеру, вам необходимо очистить корзину покупок в весьма нестандартном интернет-магазине, ведь дизайн данного шредера весьма специфичный, то данная реализация весьма порадует взор. В данном уроке мы рассмотрим как создать весьма интересный измельчитель бумаги реализованный с помощью трансформаций CSS3 Clip. Кроме этого мы добавили jQuery для запуска анимации при нажатии на кнопку “измельчить”. Мы можем сделать анимацию без каких-либо скриптов jQuery, но нам необходимо точно контролировать процесс измельчения.
Анимация для фона при движении мыши на JS
12 Сен
Если вы хотите украсить фон сайта при этом чтобы он приобрел немного динамики но вы не знаете как это реализовать тогда данный урок будет вам весьма интересен, дело в том, что в сегодняшнем уроке мы рассмотрим как реализовать замечательный эффект анимированного фона выполнен исключительно на JavaScrip. По загрузке страницы анимация начинает движение в виде небольших цветных окружностей при этом дойдя до середины страницы анимация приостанавливается, это реализовано, чтобы показать траекторию и сам процесс.
Текстовая анимация для сайта с помощью JS
8 Сен
Иногда на сайте необходимо прибегнуть к такому методу привлечения внимания как текстовая анимация, такой вариант возможен для материалов которые необходимы для выделения. Как по мне, то такую анимацию можно втулить в логотип, он отлично впишется на сайты-портфолио, кроме этого код достаточно прост и его легко можно отредактировать изменив цветовые параметры, глубину анимации и процентное соотношение с экраном. В данном уроке мы рассмотрим полигонную текстовую анимацию текста, которые будут изменяться в рандомном порядке.
Горизонтальное раздвижное меню для сайта
5 Сен
Меню сайта позволяет не только быстро и удобно искать нужную информацию, но это и первый элемент на который пользователь обращает внимание при поиске, и здесь Вы прост не имеете права промахнуться в выборе, навигация должна не только соответствовать цветовой палитре. Часто я встречаю применение наших уроков на сайтах которые об этом не задумывались, в итоге получается очень большие расхождения в цветовой схеме сайта, соответственно это очень «режет» глаз. По этому стоит не только вставлять исходники, а еще немного их редактировать под себя.
Загрузка ...