Кутырь Сергей

Кутырь Сергей


МЕНЕДЖЕР ПО РАЗВИТИЮ СТУДИИ FRESH DESIGN

Со-основатель студии, на протяжении последних 7 лет занимался веб-дизайном, фронт-енд и бек-енд разработкой веб-сайтов и мобильных приложений

Реализация Parallax scrolling для iOS

14 Янв 2013 в разделе
Технологии

Не так давно, работая над проектом flash2html, мы столкнулись с задачей реализации Parallax Scrolling на приложениях для iOS, о решении которой и хотелось бы рассказать.

Начнём с того, что такое Parallax Scrolling. Parallax Scrolling — дизайнерский приём, позволяющий создать эффект многоуровневости и объёмности на странице. Хорошим примером сайта, с использованием технологии Parallax Scrolling является сайт напитка Activate (http://activatedrinks.com/).

Не так давно, работая над проектом flash2html, мы столкнулись с задачей реализации Parallax Scrolling на приложениях для iOS, о решении которой и хотелось бы рассказать.

Начнём с того, что такое Parallax Scrolling. Parallax Scrolling — дизайнерский приём, позволяющий создать эффект многоуровневости и объёмности на странице. Хорошим примером сайта, с использованием технологии Parallax Scrolling является сайт напитка Activate (http://activatedrinks.com/).

Parallax scrolling

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

Другой интересный пример — сайт приложения http://benthebodyguard.com/index.php, на котором в процессе прокрутки страницы мы прогуливаемся по мрачным улицам города в компании телохранителя:

Parallax scrolling example

Данная технология позволяет создавать интересные промо-страницы, привлекающие внимание пользователя.

Работает Parallax Scrolling за счёт позиционирования элементов в каждый отдельный момент в зависимости от $(window).scrollTop(); (в случае использования фреймворка jQuery). Т.е. в каждый момент прокрутки страницы мы определяем положение экрана, и в зависимости от этого положения позиционируем все необходимые элементы.

Теперь приступим к описанию самой проблемы. Одна из основ проекта flash2html — корректная работа разработанных ресурсов на мобильных устройствах. Поэтому мы не могли позволить себе какие-либо ошибки в работе промо-страницы проекта на мобильных устройствах. 

flash2html

Итак, особенность iOS заключается в том, что в процессе прокрутки страницы невозможно отследить текущее положение страницы, т.е. вместо плавной анимации в процессе прокрутки, мы получаем резкое перемещение объектов в момент окончания прокрутки.

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

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

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

Раз мы не можем отслеживать момент стандартной прокрутки, будем эту самую прокрутку эмулировать.

Во-первых, при отображении в браузере iOS (Safari), отключаем возможность стандартной прокрутки:

$(document).bind("dragstart", function() { return false; });

Кроме этого, мы обворачиваем весь контент нашего сайта в div с:

Width: 100%; Height: 100%; Overflow: hidden;

Далее используем следующий скрипт:

 $(document).live(touchstart, function(e) { e.preventDefault(); startpos = e.originalEvent.touches[0].pageY; endscroll = -10; }); $(document).live(touchmove, function(e) { e.preventDefault(); endscroll = e.originalEvent.changedTouches[0].pageY; var diffscroll = endscroll-startpos; marginTop = curscroll + diffscroll; if(curscroll+diffscroll>0)marginTop=0; if(marginTop

Итак, что же мы делаем?

  1. В момент начала прикосновения пальцем к экрану мы фиксируем позицию прокрутки.
  2. В то время, как мы перемещаем палец, текущее его положение сравнивается с начальным, что позволяет нам определить расстояние перемещения по оси Y (var diffscroll = endscroll-startpos;)
  3. Далее, ставим ограничения — отступ сверху не должен быть больше 0, или же меньше, чем высота всего контента (чтобы мы не могли сдвинуть контент за пределы экрана).
  4. После этого мы при помощи изменения Margin-top перемещаем весь блок с контентом ($("#pagescroller").css({"margin-top": marginTop});)

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

$(window).scroll(function(){ positionElements(); }) 

В самой функции мы обрабатываем полученные данные прокрутки:

 function positionElements(vl){ if(typeof(vl)==="undefined"){ var top = $(window).scrollTop(); var mobile = false; }else { var top = vl*(-1); var mobile = true; } /*ТУТ ПОЗИЦИОНИРУЕМ ВСЕ ЭЛЕМЕНТЫ В ЗАВИСИМОСТИ ОТ ТЕКУЩЕЙ ПРОКРУТКИ*/ } 

Если мы передали в функцию значение прокрутки — используем его, если же нет — значит, работа идёт с версией сайта с ПК, следовательно, можно использовать $(window).scrollTop();

Таким образом, мы получили возможность использовать все прелести Parallax scrolling на iPhone и iPad. Следующая функция, которую мы планируем доработать — это эффект инерции при прокрутке экрана.

Ознакомиться с примером работы скрипта вы можете на сайте проекта Flash2HTML (http://flash2html.nl), перейдя на него с любого iOS-устройства:

qr code flash2html

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

pic

Прототипирование сайтов ...

Читать далее
pic

YouTube: о партнерских программах и агентствах...

Читать далее
pic

Категоризация веб-сайтов, или Какие бывают веб-сай...

Читать далее