У вас тоже часто бывает так, что зайдя на сайт и увидев там «классную штучку», вы ужасно хотите узнать, как же это сделали? Неважно, с целью повторить, использовать как базу для своего дизайна или просто полюбопытствовать «а что у него внутри?»

Туториалов и уроков много, но не всегда они достаточно понятны, и не всегда описанное в них применимо на реальном сайте. Я, например, тоже чаще встречаю оригинальные, привлекательные эффекты на живых сайтах, нежели в уроках и статьях.

Целью данной статьи является не просто показать вам интересные эффекты на разных сайтах, а и дать представление о том, как веб-мастера добились этих эффектов.

1. Эффект Parallax

Кликнув по картинке выше, вы попадете на сайт Nike. Покрутите колесико мышки вниз. Правда, прикольно? Это вариант так называемого эффекта Parallax. Он не так уж давно применяется в веб, но его уже можно встретить на десятках сайтов. На днях в статье о дружественном духе сайтов Дежурка публиковала пример дизайна персонажей от Турбомилк, где они используют палаллакс в более привычном варианте. А вот на сайте Silverback эффект заметен только в момент, когда пользователь изменяет размер окна браузера. Кому интересны научные стороны вопроса — загляните одним глазком в статью о параллаксе на Википедии, коротко и ёмко, как и всегда.

Как это делается

Ян Лунн написал отличнейший туториал о том, как воссоздать эффект параллакса с сайта Найк. Смотрим здесь.

2. Листаем страницы мышкой

На сайте Yess BMX представлен один из лучших, и в то же время крайне редко встречающихся эффектов. Попробуйте потянуть мышкой изображение вправо-влево.

И этот впечатляющий эффект не так уж и сложно повторить! Штука эта называется Dragdealer. Это JavaScript компонент, ориентированный на управление мышкой и имеющий воистину неограниченное количество вариантов развития и применения. Отличный подарок для программистов JavaScript.

Как это делается

Навигационное решение Dragdealer. Идем по ссылке и получаем кучу сведений.

3. Выдвигающиеся панели

Этот jQuery-эффект выдвигающихся панелек используется довольно широко, так что не упоянуть его здесь будет неправильно. Выглядит обычно очень внушительно, делаются такие слайд-панели относительно просто, причем способов существует множество. Ниже приводим один из них.

Как это делается

Фантастический туториал от Коннора Звика из Nettuts о том, как сделать форму авторизации, работающую по принципу выдвигающейся панели. Смотрим здесь.

4. Код Konami

Если честно, до недавнего времени даже не слышал о Конами-коде; тем большим было мое удивление и восторг от каждой новой страницы, которую я обнаруживал с помощью кода Конами. Создатель этого «пасхального яйца» был явно впечатлен чит-кодом, действовавшим в видеоиграх производства Konami еще с далекого 1986 года.

Зайдите на сайт, кликнув по картинке выше, и введите комбинацию, указанную в конце этого абзаца. Еще можете загялнуть на konamicodesites.com — получите массу удовольствия :)
К сожалению, не все сайты этого списка продолжают поддерживать Конами-код, но на многих он очень даже работает.

Как это делается

Мэтт Кирман предлагает старый, но проверенно эффективный коротенький скрипт, который введет вашу страницу в тайный орден Konami-кода. Смотрим, как воссоздать код Конами на Javascript.

5. Эффект всплывающего текста (Hover-эффект)

Думаю, вы видели этот эффект 100500 раз, но раз уж вам неохота разбираться, как он делается, мы решили привести здесь готовое решение :)

А если серьезно, этот всплывающий эффект несколько выходит из моды, так как его сейчас используют все, кому не лень. Однако вы же можете изменить этот эффект, как только заблагорассудится, и он уже не будет выглядеть так банально. Например, сделать эффект затемнения с изменением цвета рамки — будет выглядеть стильно и современно.

Как это делается

Урок от Noura Yehia о том, как сделать выдвигающуюся панель с hover-эффектом смотрим на DevSnippets.

6. Страница-прелоадер

Да, я знаю, многие их не любят. Но тут такой вариант, что просто любо-дорого глянуть. Это простой, но приятный jQuery скрипт. В приведенном примере с сайта Vivascom все включено: и радующая глаз анимация, и функциональная полоса загрузки, и графика, которая будет сопровождать вас на всех страницах сайта. Вообще, отмечу очень красивое управление.

Как это делается

Переходим на Gayadesign, находим там информацию, ссылку для скачивания скрипта и демонстрационный пример. Стильный прелоадер для сайта.

7. Полоса прокрутки

В разделе What We Do вышеуказанного сайта Sapphire Sound мы видим замечательно выглядящий скроллбар для прокрутки содержащейся в блоке справа информации. Желающим завести у себя подобный скролл стоит воспользоваться плагином jQuery под названием jScrollPane.

Это кросс-браузерный плагин от Кельвина Лака, который преобразует родные скроллы браузера (для элементов с соответствующими свойствами overflow) в HTML-структуру, которую легко применить через CSS.

Как это делается

На сайте jScrollPane вы найдете полную информацию о том, как скачать и где просмотреть демо плагина.

8. Колесо мышки

Заходя на сайт, я люблю проверять, а подумали ли разработчики над удобством для пользователя. Приведу в пример сайт агентства Креативные Люди. Это вообще потрясный сайт, да к тому же ребята внедрили управление колесиком мышки для прокрутки ленты своего портфолио. Зайдите в раздел Web, Brand или Social и крутите колесо на мышке.

Воистину, к чему ограничивать пользователя стрелками влево-вправо для навигации по списку, если у каждого на мышке есть куда более удобное управление? Мелочи вроде этой здорово повышают общий уровень качества страницы.

Как это делается

У Брэндона Аарона есть замечательный простой jQuery-плагин, поддерживающий управление с помощью колесика мышки. Зайдите на его страницу, чтобы узнать больше.

9. Слайдовая навигация

Как и весь дизайн на сайте Spoon Juice, навигация тут отличная. За что всегда люблю этот тип навигации, так это за юзабилити и эффективость. На сайте Spoon Juice применяется самописный скрипт, но вы можете написать ничуть не хуже, воспользовавшись туториалом, что приведен ниже.

Как это делается

Заходим на сайт Tympanus и читаем их увлекательный урок :)

По материалам статьи Рубена д'Оливьеры



Комментарии