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

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

Создание параллакс-эффекта

24 января 2015 | Опубликовано в css | Нет комментариев »

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

 

 

Демонстрация работы – Скачать исходный код

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

Проще говоря, мы хотим, чтобы одни элементы передвигались на одной скорости, а другие — на другой. Этого можно добиться с помощью Javascript, в данном случае jQuery, и CSS. Мы будем использовать библиотеку, написанную Steph Band.

Создание трехмерности 

Сначала нам нужно подключить фалы jQuery, jquery.parallax.js и jquery.event.frame.js, в заголовке документа. Эти файлы можно скачать по ссылке выше.

<script type="text/javascript" src="jquery.js"></script>< script type="text/javascript" src="jquery.event.js"></script>
<script type="text/javascript" src="jquery.parallax.js"></script>

 

Библиотеке задается блок, потомки которого она превращает в слои, скорость которых можно менять с помощью настроек. Создайте новый файл Javascript со следующим кодом или добавьте следующий код в заголовок документа:

<script type="text/javascript">
 $(document).ready(function(){

        $('#parallax img').parallax({}, { yparallax: "false" }, {}, {}, { yparallax: "false" }); 
  });
</script>

 

Теперь нужно обратиться функцией параллакса к слоям в блоке #parallax. Доступно несколько настроек, часть из которых мы добавили выше, чтобы параллакс не распространялся по оси y, так как это вызывает проблемы в нашем примере. Поэкспериментируйте с этими настройками, чтобы добиться нужного эффекта. Пройдите по ссылке, чтобы узнать о них больше.

После этого добавьте блок с идентификатором parallax, содержащий все изображения, которые нужно преобразовать в слои, в тело файла HTML. Также можно использовать, например, несколько тегов <span>, чтобы обратиться к ним с помощью функции jQuery. Например, в нашем уроке мы сделали это так:

<div id="parallax">

    <img class="clouds" src="clouds.png" alt="" style="width:700px; height:242px;" />
    <img class="mountains" src="mountains.png" alt="" style="width:700px; height:251px;" />
    <img class="text" src="text.png" alt="" style="width:700px; height:333px;" />
    <img class="trees" src="trees.png" alt="" style="width:700px; height:297px;" />
</div>

 

Эти изображения можно найти по следующим ссылкам: mountains.png, clouds.png, trees.png. Положите эти изображения в ту же папку, в которой находится код параллакса.

Не забудьте, чтобы все работало, нужно задать ширину и высоту изображений, как в примере выше. Теперь нам нужно добавить код CSS, чтобы задать блоку #parallax относительное расположение, а также высоту и ширину. Еще нужно задать абсолютное расположение изображениям в блоке #parallax. Мы также добавили несколько дополнительных свойств, определяющих расположение, каждому слою изображений, чтобы все выглядело, как надо. Для других изображений могут понадобиться и другие свойства CSS.

#parallax {
    background: #000;
    margin: 1.5em 0px;
    overflow: hidden;
    position: relative;
    width: 550px;
    height: 307px;
}

#parallax img {
    position: absolute;
}
.trees { position: relative; top: 40px; }
.mountains { position: relative; top: 55px; }

Полный код для создания эффекта параллакса

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Parallax Demo</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script src="jquery.event.js"></script>
<script src="parallax.js"></script>

<script type="text/javascript">

$(document).ready(function(){
    $('#parallax img').parallax({}, { yparallax: "false" }, {}, {}, { yparallax: "false" });
});

// Declare parallax on layers

</script>

<style type="text/css">

#parallax {
    background: #000;
    margin: 1.5em 0px;
    overflow: hidden;
    position: relative;
    width: 550px;
    height: 307px;
}

#parallax img {
    position: absolute;
}

.trees { position: relative; top: 40px; }
.mountains { position: relative; top: 55px; }

</style>

</head>

<body>

<div id="parallax">

    <img class="clouds" src="clouds.png" alt="" style="width:700px; height:242px;" />
    <img class="mountains" src="mountains.png" alt="" style="width:700px; height:251px;" />
    <img class="text" src="text.png" alt="" style="width:700px; height:333px;" />
    <img class="trees" src="trees.png" alt="" style="width:700px; height:297px;" />

</div>
</body>
</html>

 

Завершающие штрихи 

  • Для того, чтобы этот эффект работал на изображениях, как в нашем примере, нужна прозрачность файла типа png. К сожалению, браузер Internet Explorer версий 6, 7 и 8 не поддерживает полностью прозрачность файлов типа png. Чтобы решить эту проблему, нужно подключить файл pngfix.js, который можно скачать с этого сайта.
  • Не забывайте настраивать размеры изображений, если все сразу не заработает, как задумано.
  • Не добавляйте эффект параллакса ко всему подряд. Это снижает быстродействие сайта, что нежелательно.
  • Эти изображения довольно большие.  На настоящем сайте было бы полезно воспользоваться таким решением, как сжатие png изображений.

Автор урока Johnny Simpson

Перевод — Дежурка

Смотрите также:


�


Коментарии запрещены.

Похожие статьи

Случайные статьи



Друзья

    • Самые комментируемые