Awebdesign's Blog

Параллакс с jQuery

Posted in Уроки javascript, Уроки jQuery, jQuery, ява-скрипт by awebdesign on 05.05.2010

(Перевод Виктории Шидловской урока Create a Parallax Website Header)

Посмотреть Демо

Загрузить ZIP файл

На этом уроке вы научитесь делать шапку веб-сайта с помощью jQuery и плагина jParallax jQuery. Урок очень простой, вам не потребуется никаких знаний javascript, только HTML и CSS. Тем не менее, у данной техники большой потенциал. Чтобы удостовериться в этом, посмотрите примеры использования параллакса (на сайте кликайте NEXT для просмотра каждого следующего эффекта): webdev.stephband.info/parallax_demos.html

Файлы

Для начала нужно скачать два файла javascript:

Далее…

Картинки

До начала работы необходимо подготовить все используемые в шапке картинки:

  • Небо
  • Солнце
  • Трава
  • Дерево

После картинок пора заняться HTML.

HTML

Наш код выглядит следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.jparallax.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<title>Parallax Website Header</title>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#parallax').jparallax({});
});
</script>
</head>
<body>

<div id="parallax">
	<div style="width: 700px; height: 300px;">
		<img alt="" src="images/0_day.png"/>
	</div>
	<div style="width: 750px; height: 280px;">
		<img style="position:absolute; top:0px; left:350px;" alt="" 
src="images/1_sun.png"/>
	</div>
	<div style="width: 700px; height: 250px;">
		<img style="position:absolute; top:200px; left:0px;" alt="" 
src="images/2_grass.png"/>
	</div>
	<div style="width: 900px; height: 260px;">
		<img style="position:absolute; top:100px; left:150px;" alt="" 
src="images/3_tree.png"/>
	</div>
	<div style="width: 900px; height: 260px;">
		<img style="position:absolute; top:100px; right:150px;" alt="" 
src="images/3_tree.png"/>
	</div>
	<div style="width: 800px; height: 250px;">
		<h1 style="position:absolute; top:100px; right:355px;">My Site</h1>
	</div>
</div>

</body>
</html>

Довольно просто, не так ли?
Итак, что у нас здесь происходит:

  • Во-первых, мы включаем наши скачанные ява-скрипты. Не забудьте прописать jParallax после файла jQuery.
  • Затем мы вызываем единственную функцию Ява-скрипта, которая связывает jParallax с div-ом #parallax. Вы можете также прописать сюда свойства функции, но мы используем те, что прописаны по умолчанию.
  • Внутри div-а parallax мы определяем наши слои. В данном случае все слои – это div-ы, но с таким же успехом это могли быть пункты списка (li) или просто картинки (img). Самое главное теперь – это стили наших div-ов, которые определяют их поведение. К сожалению, нет готовой схемы для вычисления размеров, просто нужно попробовать поиграть с размерами div-ов и «поймать» нужное впечатление от параллакса.

CSS

CSS у нас совсем простой:

#parallax {
	background:#ccc;
	position:absolute;
	overflow:hidden;
	width:700px;
	height:300px;
}

Важно запомнить:

  • Высота и ширина каждого дочернего элемента (child) должны быть полностью прописаны в CSS. jParallax автоматически дает каждому дочернему элементу абсолютное позиционирование (position:absolute), так что нет нужды прописывать их положение вручную.
  • Для главного элемента параллакса (#parallax) нужно прописать относительное или абсолютное позиционирование (position:relative или position:absolute), иначе дочерние элементы будут располагаться относительно документа, а не мышки.

Посмотреть Демо

Загрузить ZIP файл

(Перевод Виктории Шидловской урока Create a Parallax Website Header)

Реклама

комментариев 13

Subscribe to comments with RSS.

  1. Павел said, on 22.01.2015 at 1:07 дп

    Всем привет 🙂

    Попал на эту страничку, и решил вставить свои 5 копеек. Дело в том, что сейчас HTML5 и CSS3 позволяют сделать это все только на них, без использования яваскриптовых библиотек. Так этот урок уже немного устарел — то вставлю сюда ссылочку на более актуальный способ как сделать параллакс эффект на сайте. Надеюсь, что помог 🙂

    http://weebr.ru/sozdaem-prostoj-parallaks-skrolling-effekt/

    Нравится

    • awebdesign said, on 22.01.2015 at 10:12 дп

      Спасибо большое! ) Конечно — урок наверное пятилетней давности, так что конечно появились более хорошие способы, но без ява-скриптов — первый раз вижу, здорово! Спасибо еще раз ).

      Нравится

  2. Диана said, on 24.10.2011 at 1:45 пп

    А как сделать параллакс легче? а то он очень долго грузиться, и это отрицательно сказывается на показателях сайта.

    Нравится

    • awebdesign said, on 25.10.2011 at 2:14 дп

      Да никак не сделаешь. Вообще-то проблема скорее в весе картинок, так же как и в случае с флэшом. Попробуйте для тестирования поставить какие-нибудь легкие иконки, проверьте скорость.
      Вообще для пользователей PC преимущество jQuery перед флэш сомнительно. HTML5-анимация у многих долго грузится — тоже жрет оперативку, как флэш жрет оперативную память на маках. За это Стив Джобс и выкинул поддержку флэша на айфонах и айпадах, а мы, разработчики, теперь мучиться должны и переходить с флэша на jQuery :). Хотя Джобс умер, посмотрим, что дальше будет, лет через 5-10. Лично я все равно флэш-шапки делаю — возможностей по анимации гораздо больше, к тому же большинство наших потребителей сидит на обычных ПК или ноутах, кроме молодежи на айфонах и айпадах никто сайты смотреть не будет. В общем — надо смотреть на аудиторию и под них выбирать решение.

      Нравится

    • Николай said, on 25.10.2011 at 8:43 дп

      Сделать легче можно. Для этого в параллаксе используются не огромные прозрачные панели, на которых перемещаемые объекты совсем небольшие,
      а отдельные маленькие картинки для которых задаются координаты на параллаксовой панели. В результате — результат — тот же, а вес меньше.
      Кстати, у такого подхода есть еще один плюс — слои не закрывают друг и друга, из-за этого объекты — кликабельны..

      Нравится

      • awebdesign said, on 25.10.2011 at 8:57 дп

        Спасибо большое за помощь многострадальцам 🙂

        Нравится

      • Николай said, on 25.10.2011 at 9:12 дп

        Вот пример такого решения —
        http://levitation.rulz.hu/
        Здесь коротенько про этот плагин —
        http://plugins.jquery.com/project/Levitation
        Он, конечно, сырой — его надо доделывать (при выходе из параллаксовой пнели, например, слева и повторного входа, например, справа — все объекты занимают новые положения дергаясь / дергание можно исправить), но идея — хорошая..

        Нравится

  3. Николай said, on 11.09.2011 at 5:53 пп

    Все хорошо, но
    (1) здесь кликабельный только верхний слой (если вы захотите сделать активные элементы (кнопки, сылки и т.д.), перемещаемыми в параллаксе, то этот вариант не прокатит)..
    и (2) здесь удаление слоя по координате Z определяется его размерами по X/Y — это тоже не айс — например, неудобно будет на ходу изменять расстояние до слоя.

    Нравится

    • awebdesign said, on 11.09.2011 at 7:29 пп

      Этот урок года два-три назад был придуман, и сам параллакс-эффект здесь в зачаточном состоянии. Просто легче понять принцип на элементарных вещах. Сейчас смотрите параллакс на сайте Nike Better World, как он сделан, смотрите в моем переводе статьи «Как сделан сайт Nike Better World» по ссылке http://wp.me/pI5U8-qU.
      Ну и чтобы делать такие сайты, нужно самим уже мозгами шевелить :), гораздо приятнее самому сделать эффект, чем копи-пэйстингом заниматься :).

      Нравится

  4. jopodril said, on 05.09.2011 at 7:54 пп

    Добрый день, вот хочу на свой сайт под управлением wordpress установить шапку с эффектом паралакса . Подскажите как правильно это сделать?

    Нравится

    • awebdesign said, on 05.09.2011 at 9:38 пп

      Ну мне как в ответе — заново весь пост переписать? 🙂
      Если вы на вордпрессе на своем хостинге, то нужно создать свою тему и вставить туда шапку с jQuery. Для этого нужно знать html и вообще — как прикручивать тему к блогу. А если на wordpress.com (как мой блог, к примеру), то тут уже нельзя вставить свою тему, только выбирать из предложенных.
      Так что я вам посоветую, наверное, поискать уроки «как поменять тему на wordpress» — что-то типа этого, сначала разобраться, как это в принципе делается, а остальное легко — скачайте исходники отсюда, откройте в текстовом редакторе, почитайте код, все понятно станет, там никаких супер-сложностей нет.
      Желаю удачи и усидчивости!

      Нравится

  5. Алексей said, on 07.07.2011 at 10:53 пп

    http://www.kino-teatr.ru на этом сайте отлично выполнен этот эффект. Собственно там он меня и заинтересовал, после чего полез ковыряться в коде и нашел jquery.jparallax.js, ну а гугл привел меня сюда )))

    Нравится

  6. Павел said, on 25.10.2010 at 11:12 дп

    Отличный пример! Спасибо, давно хотел узнать как зовут этот прекрасный плагин.

    Нравится


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: