Яндекс.Метрика

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

20 примеров использования эффекта параллакса

28 февраля 2012 | Опубликовано в Веб-дизайн | 13 Комментариев »

Эффект параллакса стал одной из самых популярных тенденций  в мире веб-дизайна. Он создаёт иллюзию трёхмерного пространства и делает сайт более ярким и креативным. Также очень часто используется эффект параллакс-скроллинга (его можно добиться при помощи простых CSS-техник или благодаря  jQuerи плагинам). Мы предлагаем Вашему вниманию небольшую коллекцию сайтов, которые используют эффект параллакса. Все они действительно достойны внимания!

Nike Better World

The Beatles Rock Band-на сайте используется классический эффект параллакса.

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

Eric Johansson-путешествуйте по сайту при помощи скроллера внизу страницы. Чтобы увидеть портфолио автора, потяните за стрелочку.

Row to the Pole-иллюзия глубины создаётся благодаря тому, что при прокрутке страницы фон движется медленнее, чем содержимое страницы.

egopop

Head2Heart-эффект параллакса создается за счет движения облаков.

EMM and ENN-слои движутся  в различных направлениях при наведении на них курсора мыши, что создает ощущение глубины.

Rastape — дизайн создаёт иллюзию пространства в  баре, а эффект параллакса при движении курсора мыши усиливает впечатление.

Billy’s Downtown Diner-верхняя часть страницы сайта реагирует на движения курсора мыши.

Cultural Solutions-на сайте используется классический эффект параллакса, а также эффект параллакс-скроллинга.

Improving Speed-запустите ракету в космос, двигая курсор мышки вниз.

Smart USA-разработчики создали также мобильную версию сайта.

Balencic.com

Jjanploch.de-сайт лаборатории веб-дизайна с вертикальным скроллингом.

Idesign.com.mt-эффект параллакса можно наблюдать  вверху страницы.

Manufacturedessai.it

Smokey Bones-сайт с эффектом параллакс-скролинга.

Mo’s and Bows

iutopi.com-хорошо иллюстрированный сайт, наблюдайте эффект параллакс-скроллинга, нажимая на стрелочки в левом углу.

Автор подборки-Дежурка




Комментарии

  1. Настя
    Thumb up Thumb down 0

    =) класс! видела такой эффект на сайте, но понять не могла как это, теперь знаю, спасибо!

    Ответить

    Анна Ответ:

    Thumb up Thumb down +1

    Ну, и как же? Ведь пошагового урока нет! Какая Вы гения! *BRAVO*

    А, может и есть такой урок, но только я НЕ НАХОЖУ :(

    Буду благодарна, если подскажете, где найти урок по созданию эффекта параллакс-скроллинга!

    Ответить

  2. Flank(Svobodakoda.net)
    Thumb up Thumb down +2

    Спасибо, мне пригодилось

    Ответить

  3. Arentino
    Thumb up Thumb down 0

    Siebennull вообще как будто в 3д очках сидишь :)

    Ответить

  4. oTckyku
    Thumb up Thumb down +2

    Посмотрев эти сайты заскроллил дежурку, смотрю эффект параллакса появился!

    Ан нет! Всего лишь моник над протереть :)

    Ответить

    Elena Ответ:

    Thumb up Thumb down +2

    :-D

    Ответить

  5. Анна
    Thumb up Thumb down 0

    Очень интересно! Хотелось бы увидеть и изучить урок о создании параллакс-скроллинга на русском языке! Укажите, пожалуйста! Спасибо ещё раз!!! С ув., А.

    Ответить

  6. twins_nika
    Thumb up Thumb down 0

    Эффект параллакса это не та вещь на которую можно написать урок:) Зачастую это библиотеки которые подключаются к вашему сайту и настраиваются под свои нужды и фантазии. Поэтому тут надо смотреть конкретный случай и читать мануалы:)

    Ответить

  7. Гений
    Thumb up Thumb down 0

    Учи матчасть

    Ответить

  8. igorfelix
    Thumb up Thumb down -2

    Вот еще пример сайта с параллаксом космоса

    mrwebs.ru/kosmos-primer-p...sa-na-sajte.html

    Ответить

  9. Искун
    Thumb up Thumb down 0

    Спасибо за отличную статью!

    По материалам статьи сделал дизайн сайта с эффектом параллакса, посмотрите что получилось: искун.рф

    Очень хочется услышать комментарии. Спасибо.

    Ответить

  10. Сергей
    Thumb up Thumb down 0

    Подскажите, как ограничить параллакс эффект что бы он был в рамках как на сайте The Beatles Rock Band. А то я делаю мячи и они у меня в правой стороне обрезаются, как бы уходя под слой.???

    Ответить

  11. Коля
    Thumb up Thumb down 0

    Супер. Применю у себя на cleandom.kiev.ua и mastersite.com.ua

    Ответить

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


− четыре = 0

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