Секции параллакс как слоеный пирог. Разделы страницы с параллакс-эффектом

P arallax эффект стал популярным после того, как Nike запустил свой сайт «Nike Better World «. Сайт получил множество положительных отзывов от разных ресурсов за свой замечательный эффект параллакс-прокрутки и веб-дизайн.

Параллакс-эффект существовал с 1980-х годов и использовался в видеоиграх, а потом на сайтах.

Примеры сайтов с параллакс-эффектом: что такое параллакс-прокрутка?

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

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

Это не новая техника. Но прошло немало времени между её появлением и недавним рывком в трендовые стили. Чтобы показать, как выглядит параллакс-эффект при прокрутке, я собрал сайты, которые используют этот приём.

Посмотрите на примеры:

Учимся создавать дизайн сайта с параллакс-эффектом

Существует четыре метода, которые могут быть использованы для создания сайта с parallax эффектом j Q uery .

• Послойный метод – использование нескольких фоновых изображений, которые могут независимо перемещаться горизонтально или вертикально, и расположены одно над другим.
• Метод спрайтов – использование одного большого изображения, составленного из нескольких, и отображение только части большого изображения в различных позициях. Часто используется в меню навигации.
• Метод повторяющегося шаблона – контент для прокрутки строится из отдельных плиток, которые могут перемещаться над повторяющимся слоем фона.
• Растровый метод – линии пикселей изображения скомбинированы и обновляются сверху вниз с небольшой задержкой между прорисовкой линий.

Руководство по разработке сайта с параллакс-прокруткой

Посмотрите пример

Что вам понадобится для реализации этого примера параллакс-прокрутки:

• Wellfleet (шрифт Google);
• Arvo (шрифт Google );
• Oswald (шрифт Google );
• Goudy Bookletter 1911 (шрифт Google) ;
• Изображения, использованные в этом примере ;
• Рождественские изображения в высоком разрешении. Вы можете загрузить бесплатные изображения отсюда или использовать изображения из архива, ссылка на который приведена выше.

Файловая структура

Для файловой структуры parallax эффект примера мы создадим три папки и один HTML-файл :

• html – будет главным файлом. Весь дизайн будет расположен в этом файле;
• Папка js – для скриптов JavaScript/jQuery ;
• Папка img – для изображений;
• папка css – для CSS-стилей .

HTML -разметка

В файл index.html сначала добавим объявление типа документа HTML5 , а также группу ссылок в заголовок . Туда будет включена ссылка на файл CSS , шрифты Google , а также файл библиотеки jQuery .

Creating a Simple Parallax Scrolling Website

Пропустим код parallax эффекта jQuery и обсудим его позже. А пока продолжим работу с HTML-элементами . Мы добавим тэг header с логотипом и навигацией внутри. Навигация будет вести на определённые слайды. Позже мы добавим эффект плавной прокрутки, чтобы это смотрелось красиво.

PARALLAX

• Slide 1
• Slide 2
• Slide 3
• Slide 4
• Slide 5

Теперь добавим слайды для parallax эффекта в блоке . Мы пометим каждый из них атрибутом ID , который будет соответствовать его порядковому номеру. Внутрь слайда мы поместим блок с классом content, чтобы выровнять элементы по центру.

MERRY CHRISTMAS HAPPY NEW YEAR “Then the Grinch thought of something he hadn"t before! What if Christmas, he thought, doesn"t come from a store. What if Christmas...perhaps...means a little bit more!” Dr. Seuss “I truly believe that if we keep telling the Christmas story, singing the Christmas songs, and living the Christmas spirit, we can bring joy and happiness and peace to this world.” Norman Vincent Peale “Christmas doesn"t come from a store, maybe Christmas perhaps means a little bit more....” Dr. Seuss “My idea of Christmas, whether old-fashioned or modern, is very simple: loving others. Come to think of it, why do we have to wait for Christmas to do that?” Bob Hope Copyright 1stwebdesigner.com

Теперь, когда мы поместили все HTML-элементы на страницу, сайт выглядит вот так.

CSS— стили

Начнём с добавления стилей parallax эффекта для тега body , а также заголовков H1 , H2 и H3 . Мы установим шрифт “Arvo ” для заголовков H1-H2 .

body{ margin: 0; padding: 0; width: 100%; } h1 { font-family: "Arvo"; font-weight: normal; font-size: 55px; text-align: center; color: #fff; margin: 0; padding: 0; } h2 { font-family: "Arvo"; font-weight: normal; font-size: 40px; text-align: center; color: #fff; margin: 0; padding: 0; } h3 { font-family: Oswald; font-weight: normal; font-size: 16px; text-align: center; margin: 5px 0; padding: 0; z-index: 1; position: relative; }

Затем добавим основные стили для позиционирования элементов на экране и контента в слайдах.

Center { margin: 0 auto; } .content{ margin: 0 auto; width: 960px; } .clear { clear: both; }

Теперь стилизуем секцию заголовка parallax эффект примера . Добавим изображение с чёрным фоном и прозрачностью в 60% в заголовок, который будет содержать логотип и навигацию. Логотип разместим слева, а навигацию – справа.

#header { width: 100%; background: url("../img/header-bg.png"); height: 80px; position: fixed; margin-top: 30px; } #nav { width: 410px; float: right; margin-top: 20px; } #logo a { color: #fff; text-decoration: none; float: left; font-size: 30px; margin-top: 20px; color: #fff; font-family: "Wellfleet"; font-weight: bold; } #nav ul{ list-style: none; display: block; margin: 0 auto; list-style: none; } #nav li{ margin-top: 9px; float: left; padding-left: 21px; } #nav li a { color: #fff; opacity:0.6; font-size: 16px; text-decoration: none; font-family: "Wellfleet"; } #nav li a.active { color: #fff; opacity:1; border-bottom: 2px solid #fff; } #nav li a:hover { color: #fff; opacity:1; }

Quotes { font-family: "Goudy Bookletter 1911", serif; font-weight: normal; font-size: 30px; text-align: left; margin: 50px auto; }
.author_name_white { font-family: "Wellfleet"; margin: 70px 0 0 75px; color: #fff; font-size: 20px; } .author_name_gray { font-family: "Wellfleet"; margin: 70px 0 0 75px; color: #94a4a4; font-size: 20px; } .quotes_container { width: 800px; margin: 0 auto; } #christmas_tree { background: url("../img/christmas-tree.png") no-repeat; width: 48px; height: 77px; margin: 0 auto; position: relative; bottom: -35px; } #divider { background: url("../img/divider.png") no-repeat; width: 300px; height: 35px; margin: 0px auto 27px auto; } #ribbon { background: url("../img/ribbon.png") no-repeat; width: 251px; height: 48px; margin: 0 auto; display: block; position: relative; top: -38px; } #snowflakes1 { background: url("../img/snowflakes.png") no-repeat; width: 24px; height: 21px; margin: 0 auto; display: block; position: relative; bottom: -54px; left: -102px; } #snowflakes2 { background: url("../img/snowflakes.png") no-repeat; width: 24px; height: 21px; margin: 0 auto; display: block; position: relative; bottom: -33px; right: -100px; }

Каждый слайд в parallax эффекте jQuery будет иметь фоновое изображение или белый фоновый цвет с фиксированной позицией. Также нужно добавить небольшие отступы к каждому слайду, чтобы выровнять элементы по центру.

#slide1, #slide2 { width: 100%; } #slide1 { background:url("../img/slide1.jpg") 50% 0 no-repeat fixed; color: #fff; height: 600px; margin: 0; padding: 200px 0 260px 0; background-size: cover; } #slide2 { background-color: #fff; color: #333333; height: 300px; margin: 0 auto; overflow: hidden; padding: 200px 0; } #slide3 { background: url(../img/slide3.jpg) 50% 0 no-repeat fixed; color: #fff; height: 600px; padding: 170px 0 0 0; background-size: cover; } #slide4 { background-color: #fff; color: #333333; height: 300px; padding: 200px 0; } #slide5 { background: url(../img/slide5.jpg) 50% 0 no-repeat fixed; height: 200px; margin: 0 auto; padding: 250px 0; color: #fff; background-size: cover; }

#copyright { color: #fff; font-family: "Wellfleet"; font-size: 14px; margin-top: 100px; text-align: center; } #copyright a { text-decoration: none; color: #fff; }

Код jQuery

Вдохнём жизнь в наш сайт с parallax эффектом . В раздел head добавим следующий код jQuery .

$(document).ready(function() { $("a").each(function() { if (location.pathname.replace(/^//,"") == this.pathname.replace(/^//,"") && location.hostname == this.hostname && this.hash.replace(/#/,"")) { var $targetId = $(this.hash), $targetAnchor = $(""); var $target = $targetId.length ? $targetId: $targetAnchor.length ? $targetAnchor: false; if ($target) { var targetOffset = $target.offset().top; $(this).click(function() { $("#nav li a").removeClass("active"); $(this).addClass("active"); $("html, body").animate({scrollTop: targetOffset}, 1000); return false; }); } } }); });

В этой части parallax эффекта jQuery мы создаём обработчик нажатия на любую из ссылок, имеющих символ “# ” где-либо в атрибуте href . В следующей строке мы проверяем, ведёт ли ссылка на ту же страницу, ища совпадения в location.pathname . Так мы уверены, что код будет работать как со ссылками, включающими в себя полный URL , так и с теми, которые состоят только из идентификатора.

$(document).ready(function() { $("a").each(function() { if (location.pathname.replace(/^//,"") == this.pathname.replace(/^//,"") && location.hostname == this.hostname && this.hash.replace(/#/,"")) { var $targetId = $(this.hash), $targetAnchor = $(""); var $target = $targetId.length ? $targetId: $targetAnchor.length ? $targetAnchor: false; if ($target) { var targetOffset = $target.offset().top;

В этой части кода обрабатывается нажатие пользователя на ссылку в меню. При этом класс active удаляется из текущей активной ссылки меню и добавляется к той ссылке, по которой перешел пользователь. Также произойдёт прокрутка страницы к соответствующему блоку.

$(this).click(function() { $("#nav li a").removeClass("active"); $(this).addClass("active"); $("html, body").animate({scrollTop: targetOffset}, 1000); return false; }); } } });
});

Совет : Можно делать скорость эффекта прокрутки быстрее или медленнее, меняя значение 1000 (1000 миллисекунд ). Можно попробовать значения “fast ” (200 миллисекунд ) или “slow ” (600 миллисекунд ). Обратите внимание, что значение по умолчанию 400 миллисекунд .

$("html, body").animate({scrollTop: targetOffset}, 1000);

Этот эффект можно сделать самому.

Заключительные слова о параллакс-эффекте

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

Перевод статьи “ How To Build a Simple Parallax Website ” был подготовлен дружной командой проекта .

Хорошо Плохо

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

Но есть проблема - сделать параллакс без тормозов и дерганий может стать сложной задачей для начинающего (и не очень) веб-мастера.

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

Для начала давайте отметим несколько важных пунктов:

• Не используйте события scroll либо background-position для создания параллакс анимации.
• Используйте CSS 3D трансформации для создания более точного эффекта параллакса.
• Для мобильного браузера Safari используйте position: sticky чтобы эффект параллакса гарантированно размножился.

Вы можете зайти в репозиторий Github – примеры UI элементов и вытащить от туда Parallax helper JS ! Вы можете посмотреть живое демо параллакс скролла в репозитории Github.

Проблемы параллакс эффекта

Для начала давайте рассмотрим 2 основных пути для достижения параллакс эффекта, и в частности почему они не подходят для наших целей.

Плохо: использование событий scroll

Ключевое требование для параллакса в том, чтобы он был scroll зависимым. При каждой прокрутке скролла позиция элементов параллакса должна обновляться. Хотя это звучит просто, важным механизмом современных браузеров является их способность работать асинхронно. В нашем конкретном случае это относится к событию прокрутки.

Во многих браузерах события прокрутки предоставляются низкого качества и нет гарантии доставки их к каждому кадру анимации прокрутки!

Этот кусок важной информации рассказывает нам почему нужно избегать решений на javascript, которые передвигают элементы, основанные на событиях прокрутки:

Javascript не гарантирует что параллакс будет успевать за прокруткой страницы. В старых версиях мобильного Safari события прокрутки на самом деле предоставлялись к концу прокрутки, что делало не возможным выполнение эффектов прокрутки, основанных на Javascript.

Большинство последних версий предоставляют события прокрутки во время анимации прокрутки, но по аналогии с Chrome, основаны на низком качестве. Если основной поток занят другими задачами, события прокрутки не будут доставлены немедленно, это означает что эффект параллакса будет утерян.

Плохо: обновление background-position

Другая ситуация, которую мы должны избежать это отрисовка каждого кадра. Многие решения пытаются изменить background-position обеспечить вид параллакса, что приводит к перерисовке испорченных частей страницы при прокрутке и это может привести к ненужной анимации.

Если мы хотим выполнить обещанное параллакс перемещение, нам необходимо что-то такое, что может быть применено в качестве ускорителя (что на сегодняшний день означает придерживаться transforms и opacity), и которое не полагается на события scroll.

3D в CSS

Scott Kellum и Keith Clark провели значительную работу в области использования CSS 3D для достижения параллакс перемещения. Они эффективно используют следующий технический прием:

• Установить scroll для содержимого элемента с overflow-y: scroll (и вероятно overflow-x: hidden).
• К тому же элементу добавить значение perspective , и для perspective-origin установить top left или 0 0 .
• Потомкам того элемента применить сдвиг по оси Z, и масштабировать резервную копию таким образом, чтобы параллакс движение не затрагивало их размер на экране.

CSS для такого подхода выглядит так:

css Настройка масштаба для perspective

Сдвиг дочернего элемента назад может стать причиной уменьшения пропорционально значению perspective. Вы можете рассчитать до какого значения масштабировать с помощью следующего уравнения: (perspective - distance) / perspective . Так как мы скорее всего хотим сместить элемент, но при появлении его в том размере, в котором мы ему указали, его необходимо масштабировать таким образом, чтобы не сдвинуть его в лево.

В нашем случае в коде выше perspective равен 1 px, Z дистанция parallax-child равна -2px. Это означает, что элемент нужно 3х кратно увеличить, в коде вы можете наблюдать это как следующую запись scale(3).

Для любого контента, у которого не будет задана величина translateZ Вы можете заменить ее на 0. Это значит масштаб будет (perspective - 0) / perspective, что даются сетку из 1 значения, что значит невозможность ни увеличить ни уменьшить масштаб. Реально удобно.

Как работает данный подход

Важно чтобы было ясно почему это работает, поскольку мы будем использовать эти знания в ближайшее время. Скроллинг это фактически transform, именно поэтому он может быть ускорен; это в основном включается себя смещение слоев вокруг с помощью GPU. В типичной прокрутке, которая не имеет представление о perspective, прокрутка происходит в соотношении 1 к 1 когда сравнивают прикручиваемые элементы и их потомки. Если прокрутить элементы на 300 px вниз, то предки трансформируются на верх на те же 300 px.

Однако применение значения perspective к прокручиваемым элементам вносит путаницу с этим процессом; это меняет матрицу, которая лежит в основе преобразование скролла. Сейчас прокрутка на 300px может сдвинуть потомка на 150px, в зависимости от того какие Вы выбрали значения perspective и translateZ. Если какой-то элемент имеет значение translateZ равным 0 он будет прокручиваться в масштабе 1 к 1(как раньше), но потомок оттолкнутый по оси Z от начального perspective будет скролится с другой скоростью. Чистый результат: параллакс перемещение. И что немало важно, это регулировка происходит внутренним механизмом браузеров автоматически, что значит отсутствие необходимости прислушиваться к событиям scroll или менять background-position.

Ложка дегтя в бочке меда: мобильный Safari

Есть много предостережений к каждому эффекту, и один из важным для transforms это сохранение 3D эффектов для потомков. Если есть элементы в иерархии, между элементом и его параллакс потомком, 3D perspective имеет значение “flattened”, что означает эффект потерян.

html

Однако в случае мобильного Safari все немного запутаннее. Применение overflow-y: scroll к элементу контейнера технически работает, но за счёт швыряния прокручиваемых элементов. Решением будет добавить -webkit-overflow-scrolling: touch , но он также сгладит perspective и мы не получим никакого параллакса.

С прогрессивной точки зрения, это не такая уж большая проблема. Если мы не сможем добиться параллакса в любой ситуации наше приложение все равно будет работать, но неплохо было бы выяснить обходной путь.

В помощь position: sticky!

Существует, на самом деле, некоторая помощь в виде position: sticky, это нужно чтобы элементы “придерживались” к верху от viewport либо учитывали родительский элемент в время прокрутки. Спецификация, как и многие из них, довольно большая, но она содержит в себе маленькую полезную жемчужину:

Блок с позиционированием stick позиционируется аналогично блоку с позиционированием relative, но смещение вычисляется с ссылкой на ближайшего предка с ползунком прокрутки или viewport если нет предка с ползунком прокрутки. - CSS Positioned Layout Module Level 3.

Это может показаться не таким уж значимым на первый взгляд, но ключевой момент в том выражении в том, как вычисляется параметр элемента stick: “смещение вычисляется с ссылкой на ближайшего предка с ползунком прокрутки”. Другими словами, расстояние движения элементов со значением stick (для того чтобы казаться прикрепленным к другому элементу или к видимой части экрана) высчитывается до применения каких-либо других трансформаций, а не после. Это значит, очень похоже на пример приведенный ранее, если смещение было рассчитано на 300px, это новая возможность использования значений perspective (или иного transform) для того чтобы влиять на значение перемещения на 300px до того как оно будет применено к любому элементу со значением stick.

Применяя position: -webkit-sticky для элемента с параллаксом мы можем фактически получить “обратное” эффекту от -webkit-overflow-scrolling: touch. Это гарантирует, что элемент с параллаксом ссылается на ближайшего предка с ползунком прокрутки, в данном случае это.container . Далее также как и до этого добавляем значение perspective к.parallax-container, которое изменяет рассчитанное перемещение скролла и создает эффект параллакса.

html css

Container { overflow-y : scroll; Webkit-overflow-scrolling : touch; Parallax-container { perspective : 1px ; Parallax-child { position : -webkit-sticky; top : 0px ; transform : translate (-2px) scale (3);

Это восстанавливает эффект параллакса для мобильного Safari, что является отличной новостью для всех!

Предостережения для позиционирования sticky

Тем не менее тут есть различие: position: sticky изменяет механизм параллакса. Позиционирование sticky пытается, полностью, приклеить элемент к прокручиваемому контейнеру, в то время как версия без sticky этого не делает.

• С position: sticky , чем ближе элемент к z = 0 тем меньше он двигается.
• Без position: sticky , чем ближе элемент к z = 0 тем больше он двигается.

Если все это кажется немного абстрактным, Посмотрите демо от Роберта Флака, которое демонстрирует разницу в поведении элементов с позиционированием sticky и без. Чтобы видеть разницу Вам нужен Chrome Canary (версия 58 на момент написания статьи) или Safari.

Демо Роберта Флака показывает как position: sticky влияет на параллакс прокручивание.

Разные ошибки и способы их устранения

Как всегда есть бугорки и неровности, которые нужно сгладить:

• Поддержка sticky противоречива. Поддержка реализована в Chrome, Edge не поддерживает полностью, а FireFox имеет баги отрисовки при совместном использовании sticky и transforms: perspective. В таких случаях стоит добавить небольшой код только лишь для того чтобы подключить position: sticky (с префиксом -webkit-) когда это необходимо, это нужно только для мобильного Safari.
• Данный эффект совсем не работает в Edge . Edge пытается обработать прокручивание на уровне ОС, что в общем хорошая вещь, но в данном случае это препятствует обнаружения перспективных изменений во время прокрутки. Чтобы исправить это Вы можете добавить элемент с позиционированием fixed, как это выглядит в переходе Edge к методу обработки без ОС, что гарантирует учет перспективных изменений.
• Контент страницы просто огромен! Многие браузеры не берут в расчет масштаб при решении на сколько большой контент страницы, но к сожалению Chrome и Safari не учитывают перспективы. Поэтому если скажем применить масштаб 3Х к элементу, мы можем увидеть полосы прокрутки и тому подобное, даже при масштабе 1Х после применения perspective. Есть возможность обойти эту проблему масштабируя элементы относительно правого нижнего угла (transform-origin: bottom right). Это работает благодаря тому, что негабаритные элементы перерастут в “отрицательные области” (обычно с права с верху) относительно прокуриваемой области; Прокручиваемые области никогда не покажут либо не прокрутят контент до отрицательной области.

Заключение

Параллакс это забавный эффект если использовать его вдумчиво. Как Вы видите это можно реализовать таким образом, чтобы было произвотдельно, скролл зависимо и кроссбраузерно. Поскольку это требует небольшого математического выверта, а также небольшого шаблона для получения желаемого эффекта, мы подключим небольшую вспомогательную библиотеку и образец, которые вы можете найти в нашем репозитории GitHub - примеры UI элементов .

Оригинал: https://developers.google.com/web/updates/2016/12/performant-parallaxing

В этой статье показано, как с помощью CSS-трансформаций, перспективы и небольших хитростей с масштабированием сделать параллакс-эффект на чистом CSS.

Параллакс чаще всего делается на JavaScript, и почти всегда он реализован плохо: отлавливается событие прокрутка , изменения в DOM вносятся напрямую в обработчике и вызываются лишние перерасчёты и перерисовки. Всё это происходит асинхронно с потоковым рендерингом браузера, в результате чего некоторые кадры пропускаются и эффект выглядит прерывистым. Впрочем, это не так уж страшно - requestAnimationFrame и отложенное обновление DOM позволяют управлять внешним видом сайтов с параллакс-эффектом. Но что если вы могли бы совсем не зависеть от JavaScript?

Перенос параллакс-эффекта на CSS избавит вас от упомянутых проблем и позволит браузеру положиться на аппаратное ускорение - почти всё будет обрабатываться компоновщиком. В результате вы получите согласованную частоту кадров и гладкую прокрутку страницы. Кроме того, можно сочетать этот эффект с другими CSS-приёмами, такими как медиавыражения и поддержка CSS-свойств. Как насчёт отзывчивого параллакс-эффекта?

Теория

Прежде чем говорить о принципе работы, давайте выполним базовую разметку:

А вот основные стили:

Именно класс.parallax содержит всю магию параллакс-эффекта. Указав для элемента свойства height и perspective , мы привяжем построение перспективы от центра этого элемента, создав тем самым исходный фиксированный 3D вьюпорт. Благодаря свойству overflow-y: auto контент внутри элемента будет прокручиваться как обычно, но элементы-потомки теперь будут отображаться относительно фиксированной точки. Это ключевой принцип создания параллакс-эффекта.

Далее - класс.parallax__layer . Как можно понять из названия класса, он определяет слой контента, к которому будет применяться параллакс-эффект; элемент выпадает из основного потока и заполняет собой всё пространство контейнера.

И наконец, у нас есть классы-модификаторы.parallax__layer-base и.parallax__layer-back . Они определяют скорость прокрутки параллакс-элемента посредством перемещения его по оси Z (отодвигая его от вьюпорта или приближая к нему). Для краткости я установил только две скорости слоя - позже добавим ещё.

Коррекция глубины

Поскольку параллакс-эффект создаётся при помощи 3D-трансформаций, сдвиг элемента по оси Z имеет побочный эффект: по мере того, как он приближается к вьюпорту или отодвигается от него, его реальный размер меняется. Чтобы компенсировать это, мы должны применить трансформацию scale() к этому элементу - так он будет отображаться в оригинальном размере:

Коэффициент масштабирования (scale) можно вычислить с помощью формулы: 1 + (translateZ * -1) / perspective . Например, если свойство perspective нашего вьюпорта равно 1px , и мы перемещаем элемент по оси Z на -2px , то коэффициент масштабирования будет равен 3:

Управление скоростью движения слоя

Скорость движения слоя определяется сочетанием значений перспективы и перемещения по оси Z. Элементы с отрицательным значением translateZ прокручиваются медленнее, чем с положительным. Чем дальше это значение от 0, тем более выраженным получится параллакс-эффект (то есть при translateZ(-10px) прокрутка происходит медленнее, чем при translateZ(-1px)).

Разделы страницы с параллакс-эффектом

Предыдущие примеры демонстрировали основные приёмы, используя очень простой контент, но страницы большинства сайтов состоят из отдельных блоков-разделов, к которым можно применять разные эффекты. Вот как это делается.

Для начала нам понадобится элемент.parallax__group , чтобы сгруппировать наши слои:

Вот CSS-стили для группового элемента:

В этом примере мне нужно, чтобы каждая группа заполняла вьюпорт, поэтому я указал height: 100vh , однако при необходимости можно указывать разные значения для каждой группы. Значение transform-style: preserve-3d не даёт браузеру производить слияние слоёв элементов.parallax__layer , а position: relative позволяет расположить дочерние элементы parallax__layer относительно группового элемента.

При группировке элементов важно помнить одно правило: нельзя обрезать содержимое группы. Если применить свойство overflow: hidden к элементу.parallax__group , параллакс-эффект не будет работать. Если не обрезать контент, элементы-потомки будут выходить за его границы, поэтому придётся проявить изобретательность и использовать разные значения z-index для групп, чтобы обеспечить правильное скрытие/отображение контента при прокрутке документа.

Не существует чётких правил для решения проблемы с позиционированием слоёв - в разных проектах может быть разная реализация. Гораздо проще устранить неполадки в слоях, если понимать, как работает параллакс-эффект - чтобы увидеть картину яснее можно применить трансформацию к групповым элементам.

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

Каким бывает параллакс

Параллакс-скроллинг может использоваться вертикально, а также по прямой линии. В качестве примера больше всего подходит Nintendo. Многие из нас с ностальгией вспоминают компьютерные игры, представленные движением главных героев с левой части экрана направо. Также возможно перемещение вниз, осуществляемое по расположенной вертикально прямой. в сети часто используется. Для создания вертикального слайдера можно воспользоваться JavaScript или CSS 3.

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

Не стоит думать, что параллакс - это исключительно возможность создания эффекта 3D. На странице можно перемещать имеющиеся иконки. Тем более, это выглядит достаточно привлекательно. Особенно удачным вариантом является применение индивидуальной траектории для каждой из них. В этом случае используются различные иконки, перемещаемые по различным траекториям. Подобное оформление привлекает внимание.

Оживающая картинка

Сложно найти сайт без изображений. Качественно выполненные и показательные рисунки привлекают посетителей. Но наибольшее внимание вызывают разного рода динамичные изображения. Действительно, если при посещении сайта отмечается движение, то это привлекает внимание. Существенно увеличивается вероятность возвращения посетителя ресурса к динамичному изображению. А показалось перемещение или нет? Поэтому для привлечения посетителей на сайт стоит изучить такое понятие, как параллакс-эффект.

Примеры сайтов с движущимися изображениями:

• hvorostovsky.com;
• www.kagisointeractive.com.

Как показано в примерах, восприятие улучшает раскрывающееся на подпункты меню. Подобный элемент экономит время посетителей, поэтому привлекателен для них.

Библиотека jQuery

Термином jQueryParallax определяют одноимённую библиотеку. Благодаря ей несложно добиться эффекта движения в формате 3D. В библиотеке jQuery трёхмерное восприятие создаётся различными способами. Один из них состоит в горизонтальном одновременном перемещении фоновых объектов с разной скоростью. Для этой библиотеки свойственно наличие большого количества разного рода свойств. И описанное здесь смещение представляет собой лишь небольшую часть её возможностей.

Достаточно привлекательно смотрится сайт, для создания которого были использованы различные современные элементы. Один из них - параллакс. Примеры сайтов могут выглядеть таким образом:

• www.grabandgo.pt;
• www.fishy.com.br;
• www.noleath.com;
• buysellwebsite.com.

jParallax представлен слоями, перемещающимися при движении мыши. Для динамичных элементов свойственно абсолютное ;). Каждый из них характеризуется собственным размером и движением с индивидуальной скоростью. Это может быть текст или изображение (по желанию создателей ресурса).

Восприятие посетителя сайта

После этого человек обычно обращает внимание на то, что страница оформлена качественно, удобно и со знанием дела. Этот факт обычно вызывает уважение. Бывает, возникает любопытство испытать прочие элементы. В интернете имеется огромное количество тождественных сайтов. Как же сделать свой ресурс особенным?

Если оформление понравится, то посетитель останется на больший период. Таким образом, возрастает вероятность того, что его привлечёт размещённая информация, он проявит заинтересованность. В итоге человек воспользуется предлагаемой услугой, товаром или рекламным предложением.

Любимые старые игры

Понятие «параллакс» должно быть знакомо всем поклонникам приставок 80-90-х годов. Это касается игр:

Mario Bros.

Mortal Kombat.

Streets of Rage.

Moon Patrol.

Turtles in Time.

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

Изображения на экране созданы с использованием такой техники, как параллакс-скроллинг. Нет ничего удивительного в том, что указанная методика обрела заслуженную популярность. Этот дизайнерский концепт достаточно тепло воспринимается теми, кто играл в 80-90 годы или наблюдал за досугом друзей.

Параллакс-скроллинг

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

Параллакс-скроллинг довольно успешно был использован в компании Nike. Разработкой оригинального сайта компании занимались дизайнеры Weiden and Kennedy. Но этот дизайн не сохранился. Ресурс постепенно обновили, в соответствии с тенденциями современности. Activatedrinks.com - пример сайта, дизайн которого напоминает оформление, используемое маркетологами Nike указанного периода.

Динамики не должно быть много

Не стоит забывать, что оформление сайта часто выступает ключевым критерием, которым руководствуется посетитель. Некачественно выполненный ресурс обычно оставляет у пользователя впечатление несерьёзности компании-владельца. А вот сайт с разного рода привлекательными дизайнерскими элементами свидетельствует о стремлении владельцев организации заинтересовать посетителей.

Здесь стоит вспомнить про параллакс. Это замечательный инструмент. Но даже им не стоит сильно увлекаться. Потому что страница, на которой присутствует большое количество разного рода подвижных элементов, достаточно сложна для восприятия. Лучше всего сделать оформление в меру стильным и понятным.

Динамичными должны быть отдельные элементы, которые требуют выделения. Также может присутствовать рисунок, который создаётся с использованием перемещающихся один относительно другого слоёв. Не стоит забывать о том, что пользовательский сайт оформляется, прежде всего, для посетителей. Он не должен представлять собой шедевр веб-мастера, вложившего все свои знания. Ведь подобный подход только осложнит восприятие.

Как создать перемещение на сайте

Как сделать параллакс? Этот вопрос интересует очень многих создателей сайтов. Необязательно знать тонкости написания тегов. Очень удобно использовать специальные ресурсы в интернете. Из большого числа имеющихся предложений можно выделить следующих помощников:

Plax - программа, являющаяся достаточно простой в использовании. Ей свойственно придавать странице подвижность благодаря перемещению мыши.

jQuery Parallax Image Slider - плагин jQuery используется, чтобы создавать слайдеры изображений.

Jquery Image Parallax - подходит для оформления прозрачных рисунков. Благодаря его использованию PNG, GIF приобретают глубину, оживляясь движением.

Curtain.js применяется для создания страницы, оснащённой фиксированными панелями. В этом случае наблюдается эффект открытия штор.

Scrolling Parallax: A jQuery Plugin состоит в создании эффекта параллакса при прокручивании колесика мышки.

Еще несколько полезных плагинов

Как известно, наибольшую ценность имеет информация. И чем большее количество способов достижения желаемого известно, тем ближе вероятность получения правильного результата. Полезные плагины, используемые для создания динамики:

jQuery Scroll Path - применяется для размещения объектов на указанном пути.

Scrollorama - jQuery-плагин. Он используется как инструмент для привлекательного оформления материала. Позволяет за счёт удобного прокручивания «оживить» имеющийся на странице текст.

Scrolldeck - jQuery-плагин. Представляет собой замечательное решение, используемое в качестве презентации для сайтов, оформленных в виде одной страницы.

jParallax представляет перемещение слоёв в зависимости от перемещения указателя мыши.

Stellar.js - плагин, с помощью которого любой элемент оформляется с добавлением эффекта параллакс-скроллинга.

Параллакс с привязкой к курсору

Достаточно эффектно выглядит такой параллакс. Неподвижные на первый взгляд объекты страницы сайта перемещаются при приближении Оно словно оживает и следует за перемещаемым элементом.

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

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

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

Параллакс-скроллинг (с англ. parallax-scrolling — в веб-дизайне: особая техника, используемая в первую очередь в компьютерной графике, когда фоновые изображения в перспективе двигаются медленнее, чем двигаются элементы, расположенные на переднем плане) — это одна из передовых технологий современного веб-дизайна. Но ее чрезмерное использование может ухудшить юзабилити сайта и привести к падению коэффициента конверсии.

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

1. Flat design vs Realism

На чьей стороне вы?

С подачи таких гигантов как Microsoft, Google и Apple, (flat design) в мгновение ока стал хитом сезона и предметом обсуждения сотен новостных лент и блогов. Он воспринимался как некий прорыв в области веб-дизайна и, вероятнее всего, таковым и являлся на самом деле. Интерактивное агентство intact решило обратить внимание своих клиентов на этот довольно необычный этап в развитии виртуального дизайна и подготовило интерактивное путешествие, снабдив его заголовком «Плоский дизайн против реализма». Все это создано, безусловно, не без помощи новомодного эффекта.

Креативный директор агентства Алехандро Лазос (Alejandro Lazos) поясняет, что самым нетривиальным оказалось объединить HTML5-игру и параллакс-скроллинг.

«Мы хотели, чтобы все действие происходило непрерывно и пользователи могли двигаться от начала и до конца без остановок. Для этого мы использовали ajax-технологию, которая позволила передавать данные через url и обновлять данные в фоновом режиме, обеспечивая пользователя соответствующей страницей без задержек».

2. Sony

Такого вы еще нигде не видели!

Презентовать свой товар так, как это делает корпорация Sony, не умеет, наверное, никто на свете. Представленный лендинг — это часть агитационной кампании Sony «Be Moved» (с англ. be moved — будь в движении), о которой они говорят следующее:

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

3. Costa Coffee

Агентство Graphite Digital остановило свой выбор на иллюстрациях, наиболее выразительно представляющих продукцию компании

Этот впечатляющий одностраничник — детище брайтонского агентства Graphite Digital. В недавнем прошлом перед агентством была поставлена задача: ярко и интересно представить продукт компании Costa Coffee.

Результат работы заслуживает всяческих похвал. Лендинг выглядит роскошно. Он наполнен всяческими интерактивными элементами и анимированными иллюстрациями.

4. Highway One

Большой вес изображений оказался главной проблемой для разработчиков

Этот потрясающий микросайт, разработанный ньюкаслским агентством «Shout Digital» для туристического агентства «Exsus» (компания специализируется на дорогом отдыхе и организации медовых месяцев) — еще один замечательный пример рассматриваемой нами темы. Их выполненная в ретростиле мультипликация мгновенно захватывает ваше внимание и уже не отпускает до финальных титров.

За рулем классического «Кадиллак Эльдорадо» (Cadillac Eldorado) 1959 года выпуска вы посетите все знаменитые места калифорнийского побережья. На первый взгляд, все эффекты кажутся простыми, но как только вы начнете скроллинг, перед вами откроется истинная магия.

5. Make Your Money Matter

Управляйте своими финансами так, как это советует сайт Make Your Money Matter

Тема денег и личных финансов интересна многим, поэтому нью-йоркское digital-агентство «Firstborn» при подготовке заказа для кредитного союза предпочла инновационный формат традиционному.

Задавшись целью повысить осведомленность целевой аудитории о преимуществах кредитного союза (и недостатках банков), маркетологи создали потрясающий ленд, в доступной и интересной форме объясняющий, как работает кредитный союз, где найти офисы организации и многое другое. Кроме того, здесь есть калькулятор, который посчитает ту прибыль, которую банки получают от ваших вложений.

6. Cyclemon

Целевая страница покажет вам все существующие виды велосипедов

Китайские мудрецы говорят: «Ты то, что ты ешь». Для дизайнеров и больших любителей байков Ромейна Боурдиукса (Romain Bourdieux) и Томаса Помарелли (Thomas Pomarelle) эта известная мудрость звучит так «Ты то, на чем ты ездишь». Их созданный в соавторстве сайт удивит вас не только новомодным скроллингом, но и прекрасным чувством юмора и первоклассными иллюстрациями.

Разработчики, кажется, не пропустили ни один вид велосипеда и постарались преподнести их так, чтобы каждый посетитель загорелся желанием приобрести себе один и приобщиться к многомиллионной субкультуре.

7. Lexus

Вы можете опробовать автомобиль, оставаясь дома в своем уютном кресле

Благодаря этому сайту вы можете опробовать новую модель из линейки Lexus, не выходя из дома. Разработанное консалтинговым digital-агентством Amaze интерактивное видео обеспечит вас полной и весьма наглядной информацией по интерьеру и экстерьеру автомобиля Lexus IS. Эффект присутствия обеспечен.

Чтобы достичь такого результата, команде маркетологов потребовалось запечатлеть автомобиль на фоне разнообразных пейзажей и отсканировать окружающий вид в каждой из ключевых точек. Благодаря технологии HTML5 лендинг функционирует и на компьютерах, и на смартфонах, делая продвижение автомобиля как никогда успешным.

Венди Стоунфилд (Wendy Stonefield), коммерческий директор Amaze, отмечает: «Использование HTML5 позволило нам достичь нескольких целей. Во-первых, это наглядная демонстрация автомобиля, его функциональных особенностей. Во-вторых, это интерактивность, без которой не обходится ни один современный проект: в данном случае мы позволяем пользователям выбирать цвет салона и кузова автомобиля. Создавая видео, мы ориентировались на искушенного зрителя — и с теми технологиями, что существуют сегодня, это стало более чем возможным. Мы показали Lexus IS таким, какой он на самом деле есть».

8. Life in my Shoes

Life in my Shoes (с англ. — глазами другого человека) — это амбициозный проект, главной задачей которого является искоренение страха и предубежденности в отношении ВИЧ-инфицированных и повышение осведомленности молодого поколения по вопросам ВИЧ и СПИД. У лондонского агентства Traffic было задание спроектировать лендинг, способный привлечь внимание молодой аудитории и завоевать ее доверие, и они с ним великолепно справились.

Фирменный шрифт Houshka Rounded Medium был реализован с поддержкой синтаксиса font-face, отчего страница стала выглядеть живее и интереснее. Прочие декоративные элементы наряду с использованием желтого цвета сделали ресурс эстетически привлекательным.

9. The Beast

Новая целевая страница известной фолк-певицы читает стихи и сопровождает их невероятными образами

Для продвижения нового альбома известной фолк-певицы Лауры Марлинг (Laura Marling) «A Creature I Don"t Know» (с англ. — Незнакомое мне создание) лондонское digital-агентство Studio Juice разработало удивительный лендинг пейдж, который читает стихи, сопровождая их изысканными иллюстрациями и выразительными анимациями.

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

10. The Lab

Alzheimer’s Research, ведущее учреждение в Великобритании, занимающееся изучением болезни Альцгеймера, задалось целью рассказать о своей деятельности и ее результатах в увлекательной и доступной форме. Для этого и был создан ресурс The Lab.

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

11. Why Your Brain Craves Infographics

Инфографика об инфографике!

NeoMam Studios отметились замечательным паралакс-скроллинг лендингом, освещающим основные достоинства инфографики как метода подачи информации.

«Параллакс-скроллинг — это самое трудное, что пришлось реализовывать нашим разработчикам», — делится опытом Дэнни Эштон (Danny Ashton), директор компании. «Все доступные библиотеки они посчитали банальными, поэтому вместо этого создали собственные».

12. 5emegauche

Главной особенностью этого ресурса является то, что каждая его страница наделена собственным механизмом скроллинга. Каждая! Это очень забавный и весьма удачный подход, который к тому же доказывает, что эта технология позволяет изобретать гениальные формы представления информации.

13. Atlantis World’s Fair

Необычный скроллинг здесь работает не столько на зрелищность, сколько на сюжет

Эта онлайн-инфографика разработана Френком Чимеро (Frank Chimero), который использовал параллакс-скроллинг не только для того, чтобы более выгодно представить информацию, но и для того, чтобы анимировать ее и вписать в рамки определенного сюжета. Высший пилотаж!

14. Every last drop

Узнай о глобальной проблеме нехватки чистой воды!

Анимационная студия Nice & Serious спроектировала этот лендинг, чтобы обратить внимание общественности на проблему дефицита чистой воды на планете. Куда мы тратим воду? Где мы могли бы ее сэкономить? Как это сделать? Вы узнаете об этой проблеме все. Все до последней капли.

15. Living Word

Перед digital-агентством Tribal была поставлена задача: обновить интернет-представительство агентства переводов Living Word и сделать его информативным и интересным. На результат вы можете полюбоваться сами, но сразу скажем, что британцы не придумали ничего необычного, но сделали все аккуратно и чисто.

16. Madwell

Параллакс-скроллинг добавляет толику глубины в лендинг агентства Madwell

Агентство по развитию предпринимательства Madwell, расположенное в Нью-Йорке, использует посадочную страницу для презентации собственного портфолио. Параллакс-скролинг является некой изюминкой в организованном ими действе: получившийся 3D-эффект добавляет глубины в их творение.

17. The Jacksonville Downtown Art Walk

The Jacksonville Downtown Art Walk — это традиционный ежемесячный праздник культуры и искусства в городе Джексонвилль, штат Флорида. Фестиваль растягивается на 15 кварталов и состоит из дюжин галерей, музеев и баров. Все это сопровождают уличные актеры и музыканты. Красивый сайт, рассказывающий об этом мероприятии, способен принести радостное настроение и в ваш дом.

18. Von Dutch

Модный бренд Von Dutch со страниц своего сайта рассказывает удивительную историю жизни своего основателя. Несомненно, для того, чтобы быть в тренде, и был использован новомодный вид скролла для сайта. Когда вы прокручиваете страницу, картинки и иконки плывут вверх и вниз, отчего создается ощущение, что в ваш монитор, пока вас не было рядом, кто-то налил воды.

19. Fannabee

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

20. Peugeot Hybrid4

Новые технологии нужно презентовать по-новому, не так ли?

Онлайн-комикс, созданный по заказу автомобильного гиганта Peugeot (Пежо), позволяет компании выполнить сразу две задачи: во-первых, он довольно эффектно представляет вниманию целевой аудитории новый механизм Peugeot Hybrid4, а во-вторых, работает на имидж как продукта, так и самой компании: приобщиться к Peugeot, смело экспериментирующей с форматами и не забывающей о своей индивидуальности, теперь станет еще престижнее.

21. Cultural Solutions

Cultural Solutions — это консалтинговое агентство, которое, как легко догадаться из названия, занимается решением вопросов в области искусства. Логотип компании — это разноцветные круги, наложенные друг друга. Именно поэтому на главной странице сайта эти круги и обыгрываются с помощью параллакс-эффекта. Кружки двигаются с разной скоростью, и это добавляет глубины и объема. Получилось лаконичное, но весьма емкое и стильное высказывание.

22. jQuery Conference

Разработчики сайта jQuery Conference не забывают о главном: они придерживаются верного баланса между информативностью и эффектностью

Сайт, созданный специально для конференции jQuery, исполнен с выдумкой. Когда вы прокручиваете страницу, скроллинг параллакс jquery запускает цепочку различных анимаций: велосипед, проезжающий слева направо, или стаю чаек, преследующих акулу. В целом, оригинально и не перегружено эффектами: ведь главное не только удивить, но и оказаться услышанными.

23. Shape

Креативное агентство Shape на своем лендинге в достаточно лаконичной форме рассказывает об основных этапах своей деятельности. Приятные визуальные эффекты и анимации добавляют наглядности.

24. Nintendo

Чтобы познакомить целевую общественность с новой серией игры Mario Kart, известная японская компания разработала посадочную страницу, которая рассказывает об игре в формате небольшого путешествия по ее миру. Дизайн лендинга и его цветовая гамма копирует стиль игры, а в пути вам встретятся знакомые с детства персонажи.

25. Activate Drinks

Просто открутите крышку, и действие начнется

Компания Activate Drinks занимается распространением витаминизированных напитков, и для продвижения своей продукции она разработала актуальный во всех отношениях ресурс. Сначала вы откручиваете крышку бутылки (прокручивая страницу, разумеется), а затем попадаете в вихрь стремительных пузырьков. Три уровня размещения пузырьков создают 3D-эффект и ощущение, что из монитора скоро полетят брызги.

26. The Whitehouse’s Iraq Timeline

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

27. Pitchfork Cover Stories

Известный музыкальный сайт Pitchfork громко заявил о себе, выступив с амбициозным проектом «Cover Stories». Интернет-ресурс приобрел некоторые черты печатного глянцевого журнала, но применение эффекта параллакса для сайта, интерактивных видео, интервью и уникальных фотографий сделали его непохожим ни на что. Анимированные портретные фото, одухотворенный текст и идеально подобранный саундтрек — очень красноречиво и изысканно.

28. Soleil Noir 2012 | We believe in…

Подкупающий минимализм от французов из Soleil Noir

Это причудливый лендинг, разработанный французами из агентства Soleil Noir, по сути, является новогодней открыткой. Здесь вы не найдете ничего сложного: не вызывающий головокружения параллакс-скроллинг, минимализм в иллюстрациях, лаконичные фразы — но это простота подкупает.

29. Oakley

Oakley объединяет потрясающий параллакс-скроллинг и выразительные фотографии

Oakley — это известный поставщик защитных очков и масок, и представленный ресурс разработан специально для продвижения новой модели защитных очков Airbrake MX. Целевая страница объединила в себе потрясающий параллакс-скроллинг и выразительные фото, которые прекрасно презентуют продукт.

30. Jason Kenny OBE

Лендинг трижды олимпийского и дважды мирового чемпиона в велосипедных гонках Джейсона Кенни (Jason Kenny)

Ранее в этом году бристольское маркетинговое агентство Fiasco Design разработало этот замечательный landing page для трижды олимпийского и дважды мирового чемпиона в велосипедных гонках Джейсона Кенни (Jason Kenny). Сооснователь агентства Бен Стирс (Ben Steers) заявляет: «Опираясь на техническое задание, мы решили создать создать одностраничный сайт с вертикальным скроллингом и параллаксом».

31. La Moulade

Навигационная панель позволит вам быстро и легко переместить в нужную область страницы

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

32. Walking Dead

Самое трудное — это объединить воедино достижения всех технологий

«В первую очередь, мы сами фанаты этого шоу», — делится впечатлениями от работы над проектом ведущий дизайнер Гейвин Бек (Gavin Beck). — В наших планах было создать сайт, соответствующий миру «Ходячих мертвецов», который поклонники сериала оценили бы и изучили. Чтобы достичь своих целей, мы использовали такие новые разработки, как HTML5, CSS3, JavaScript/jQuery, Web Audio/HTML5 Audio и, конечно же, параллакс-скроллинг. Самой трудной задачей было заставить все эти технологии работать вместе и быть доступными для всех видов платформ».

33. New York Times: Tomato Can Blues

Быть может, это и есть будущее онлайн-журналистики?

В эпоху, когда люди не обременяют себя чтением газет и журналов, многие журналисты задаются вопросом, как же привлечь внимание аудитории к печатному слову. Один из вариантов преодоления кризиса предложила американская газета The New York Times, которая разработала новую форму представления журнальных статей и рассказов — одностраничный сайт, созданный с применением новейших разработок в области веб-дизайна и оформленный иллюстрациями за авторством Аттилы Футаки (Atilla Futaki).

Как только вы начнете скроллить страницу, иллюстрации придут в движение и погрузят вас в описываемое действо.

34. Health Service Payouts

Ничего сложного, казалось бы, но выглядит довольно занимательно

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

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

Сотрудник агентства, разработавшего этот лендинг, делится впечатлением от работы: «Чтобы создать этот сайт, мы применили новые технологии в HTML5, CSS3 и JavaScript. Так как анимации — это ключевой элемент, мы использовали, главным образом, библиотеки анимации “skrollr”. Каждый элемент мы прорисовывали вручную, а финальные штрихи добавили с поддержкой CSS3».

35. We are Unfold

Идеальная игра разных видов скроллинга

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

36. Savings Challenge

Для создания этого лендинга разработчики использовали плагин skrollr.js, за счет которого посетители получили возможность «прокручивать» события на странице. Это позволило добиться высокой скорости моделирования, предоставляющей больше времени для сглаживания переходов и построения действенного пользовательского интерфейса. Для создания анимаций была использована технология CSS 3D.

Плагин Stellar.js

Stellar.js — это плагин, с помощью которого можно применить эффект параллакса к любому прокручиваемому объекту. Хотя этот плагин больше не поддерживается, он используется многими разработчиками благодаря своей стабильности и совместимости с последними версиями jQuery.

Еще одна его полезная особенность — возможность работы без библиотеки jQuery. Поэтому лендинги, созданные на его основе, меньше весят и быстрее загружаются.

Заключение

Мир не стоит на месте, и каждый день появляются новые произведения искусства в области веб-дизайна. Будете ли вы среди этих героев? Легко, если возьмете на вооружение эти прекрасные технологии. Но не забывайте о главном: любой внедренный эффект должен способствовать повышению конверсии! Иначе он вам просто не нужен.

Платформа LPgenerator, точнее говоря, наш визуальный редактор, поддерживает параллакс-эффекты; убедитесь в этом сами на примере шаблонов в магазине целевых страниц LP Store