Свежий взгляд на веб дизайн
и создание сайта
и создание сайта
Часто бывает, что зайдя на сайт мы видим красивый эффект и очень хотим его повторить у себя на сайте, или просто узнать как это сделано.
Уроков по JavaScript и jQuery сейчас в сети огромное количество, но они не всегда понятно написаны и иногда сложно реализуемые. В этой статье мы рассмотрим несколько интересных эффектов и посмотрим как они сделаны.Parallax эффект
Известный Ян Лунн написал прекрасный урок, как сделать эффект параллакса с сайта Nike. Здесь можно посмотреть как он реализован.
Пролистываем мышкой страницы
На сайте Yess BMX можно увидеть один из редко встречающихся эффектов. Потяните мышкой картинку. Правда прикольно?
Он называется - Dragdealer, и его достаточно несложно повторить. Все сделано с помощью JavaScript компонента, ориентированного на управление мышью. Можно найти большое количество применений этого эффекта в исполнении JavaScript программистов.
Как он реализован
Переходим по этой ссылке и смотрим исходник кода.
Выдвигающиеся навигационные панели
Код под названием Konami
До последнего времени о коде Konami было практически не слышно. Его создатель был видимо впечатлен одноименным кодом из видеоигр 86 годов.
Перейдя по ссылке посмотрите какой интересный эффект. Однако не все сайты поддерживают код Конами.
Как он реализован
На страничке Мэтта Кирмана смотрим, как он предлагает реализовать свой вариант этого кода.
Всплывающий текст или Hover-эффект
Скорее всего вы встречали этот эффект 1 00 000 раз. Подобный всплывающий эффект уже не так популярен, но его продолжают использовать. К примеру эффект изменения цвета рамки и плавного затемнения - красиво и стильно.
Как он реализован
Предлагаемый туториал от Noura Yehia расскажет, как повторить на своем сайте выдвигающуюся панель с использованием hover-эффекта.
Прелоадер
Простой и в то же время впечатляющий эффект с использованием скрипта jQuery - красивая анимация, полоса загрузки, впечатляющая графика. Не правда ли?
Как он реализован
Кликаем на Gayadesign, скачиваем скрипты, смотрим как все работает.
Интересная полоса прокрутки
На сайте Sapphire Sound можно посмотреть неплохой скроллбар, чтобы прокручивать информацию правого блока. Кто хочет его сделать на своем сайте придется подгрузить плагин jQuery - jScrollPane. Плагин кросс браузерный и его леко встроить в код html сайта с применением CSS.
Как он реализован
Здесь вы можете глянуть демо версию, а также скачать сам плагин.
Скролл мышки
Иногда бродя по интернету интересно смотреть на сайты с точки зрения юзабилити, т.е. удобства посетителя на сайте. На этом сайте сделан интересный эффект прокрутки портфолио. Зачем ограничивать просмотр стандартной прокруткой страницы, ведь можно использовать еще лево-право. Кажется мелочь, а настроение от просмотра сайта уже другое.
Как он реализован
У знакомго уже нам Брэндона Аарона есть отличный урок с использованием jQuery плагина, который поддерживает управление право-лево с помощью стандартной прокрутки мышки.
Slider или слайдовая навигация
Сайт Spoon Juice, как и множество других сайтов использует этот замечательный эффект, который опять же сделан на основе знакомого нам jQuery. Интересная интерпретация слайдера упрощающего навигацию и позволяющего сэкономить пространство на сайте.
Как он реализован
Смотрим на сайте Tympanus, осваиваем урок и реализуем на своем сайте.