Главное меню
Параллакс-прокрутка (parallax scrolling) - одним из самых заметных трендов современного веб-дизайна. Для использования его на страницах сайта, а так же совмещении с внутренним контентом, потребуется немного знаний или хотя бы внимательности. Использовать его можно только при работе с персональным шаблоном страницы. То есть, вставлять его через редактор страницы - бесполезно.

Итак начнем. Для начала, заходим на страницу и открываем ее редактор. Внизу ставим галочку возле "Использовать персональный шаблон для страницы".



Сохраняем страницу и идем в ПУ сайта.



В управлении дизайном, находим нашу страницы и открываем шаблон данной страницы. Внутри тега <body>...</body> находим данный код.
<section class="middle clr">
<!-- <middle> -->
<section class="content" style="padding:0;">
<!-- <body> -->$ CONTENT $<!-- </body> -->
</section>
<!-- </middle> -->
</section>
Это та часть вашей страницы, которая содержит в себе контент. То есть, на которой есть визуальное редактирование страницы, при ее просмотре. Вы можете размещать любой текст, информеры, видео и прочее, вставив его в блок с эффектом parallax возле кода, который вы видели чуть выше.

Например

<div class="parallax-block">
<section class="middle clr" style="text-align: center;">
<img src="http://citypotal.at.ua/images/parallax/parallax-txt.png" border="0" style="width: 60%;" alt="" />
</section>
<div id="parallax" style="background-image: url('/images/parallax/parallax-back-wave.jpg');"></div>
</div>

<section class="middle clr">
<!-- <middle> -->
<section class="content" style="padding:0;">
<!-- <body> -->$ CONTENT $<!-- </body> -->
</section>
<!-- </middle> -->
</section>
<div class="parallax-block px-dark">
<section class="middle clr" style="text-align: center;">
Ваш текст или любая другая информация
</section>
<div id="parallax2" style="background-image: url('/images/parallax/parallax-back-wave.jpg');"></div>
</div>
Вы видите пример использования параллакс-прокрутки в темном оформлении. Для создания которого, необходимо просто добавить класс px-dark в родительский <div class="parallax-block">. Красным цветом выделены заменяемые части в коде, а именно, ссылка на ваше изображение и непосредственно содержимое блока. Например, один из информеров или сервисный блок. При использовании нескольких блоков с parallax на одной странице, меняйте id в div-е с изображением. Например, id="parallax", id="parallax2", id="parallax3"."
Такими блоками можно отделять разделы или эффектно выделить сервисные блоки. Пример такого использования можно увидеть на данной странице или на странице сервисы.