Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

9 удивительных эффектов для сайта, или Как это повторить?

5 сентября 2011 | Опубликовано в css, Веб-дизайн | 14 Комментариев »

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

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

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

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 и читаем их увлекательный урок :)

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




Комментарии

  1. satantx
    Thumb up Thumb down -2

    Хотелось бы увидеть как сделать эффект движущихся background'ов, как в примере сайта 6.

    Ответить

    dan Ответ:

    Thumb up Thumb down +1

    так а разве это не тот же параллакс, что в первом примере?

    Ответить

    satantx Ответ:

    Thumb up Thumb down +1

    Ага, Пропустил первый пункт. Подумал, что это просто название статьи с картинкой)

    Ответить

  2. Евгений
    Thumb up Thumb down +2

    спасибо за подборку

    Ответить

  3. Татьяна
    Thumb up Thumb down 0

    Было бы здорово, если бы некоторые элементы сделали ссылками. Например, упоминается конкретный сайт, а ссылки на него нет. Как-то это неправильно для веба :)

    И чтобы два раза не вставать: в последнее время в Дежурке стали появляться подобные статьи. Так их уровень говорит о том, что писавший не очень хорошо в этом разбирается. Например, смотрим заголовок 5 пункта «Эффект всплывающего текста (Hover-эффект)». Ляп. Содержимое пункта 5 и вовсе выдает с головой. Да, мы все в чем-то новички, так что обратиться за помощью вовсе не стыдно. Иными словами: редактура профи не помешала бы.

    Ответить

    Дмитрий Ответ:

    Thumb up Thumb down 0

    Простите, в чем ляп? Понятие hover, обычно используется как событие, которое возникает при наведении курсора мыши на объект.

    Это может быть замена картинки, выезд текста, подсветка ссылки — да что угодно.

    Ответить

    Татьяна Ответ:

    Thumb up Thumb down -3

    Комментарий скрыт из-за рейтинга

    Ответить

    Дмитрий Ответ:

    Thumb up Thumb down 0

    Скорее, имелось ввиду так: Эффект всплывающего текста. Hover-эффект =)

    Ответить

    pavel Ответ:

    Thumb up Thumb down -1

    Hover определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

    Ответить

  4. zhivcheg
    Thumb up Thumb down 0

    Давно искал тутор на паралакс эффект, нашел бы раньше если бы знал если бы знал как называется. Еще вы не в курсе как сделать эффект как на этом сайте www.kulerbox.co.za, при движении мышкой перемещаются фигуры относительно фона. Или хотя бы как он называется?

    Ответить

    Olga Ответ:

    Thumb up Thumb down +1

    и снова старый добрый параллакс

    вот как здесь, в примере из первого пункта — Турбомилк characters.turbomilk.ru

    Ответить

  5. Михаил
    Thumb up Thumb down +1

    мне интересен эффект: плоскость разбита на квадраты, в каждом динамический ролик, а теперь эту плоскость повернуть под углом к горизонту, получим некоторую перспективу и заставить двигаться, а затем поместить как фоновую страничку браузера — вот как сделать такое? 8)

    Ответить

  6. Алексей
    Thumb up Thumb down 0

    А я не понял прикол первого сайта, там еще был указан в первом пункте второй сайт, в чём прикол-то? ну менял я размер окошка браузера, никаких отличий я не заметил, как и при прокручивание мышкой сайта найка

    Ответить

  7. Тимур
    Thumb up Thumb down 0

    gen-direktor.jpg Так понимаю, что не всё работает, но спасибо! Сам бы долго искал такое.

    Ответить

Оставить ответ


семь − 1 =

Вставить изображение