Как я построил одну страницу Scroll Plugin

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

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

Не так давно компания Apple представила iPhone 5S, который был в сопровождении презентации website ¹, на котором посетители руководствовались вниз разделы страницы и чьи сообщениями был сокращен до одного ключевого функции зараздел.Я нашел, что это отличный способ, чтобы представить продукт, сводя к минимуму риск посетителей случайно прокрутки прошлое ключевую информацию .

Я решил найти плагин, который делает именно это.К моему удивлению, я не нашел простое решение для интеграции в моих текущих проектов.То есть, когда одной странице прокрутки родился .

Что такое Одна страница Выделите

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

Я объясню, как я построил этот плагин, с самого его основания до планирования, тестирования и, наконец, положить код там для свободного .

Примечание: Прежде чем создавать этот плагин, я был осведомлен о спорах “прокрутки угона», когда сайт перегружает родной поведение прокрутки в браузере, чтобы создать свой собственный взаимодействие, которое смущает некоторых посетителей.Одна страница Выделите неизбежно идти против этого принципа, так что я решил придумать способы, чтобы облегчить разочарование.Одна хорошая вещь о плагине, что разработчики могут установить запасной вариант, что возвращается прокрутки от его “захвата” государства на его родной поведения для определенных размеров экрана.Таким образом, разработчики могут поддерживать высокую производительность и качество своих веб-сайтов на маломощных устройств, таких как смартфоны и планшеты.Кроме того, вы также можете контролировать длину анимации, который принимает посетителя из одного раздела в другой, таким образом, позволяя избежать медленный переход увидеть на __3 от Apple | iPhone 5S website ².

Какова его цель

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

Быть простым в использовании,
Легко интегрировать
Требуют минимального разметку,
Сделать одну вещь хорошо (т.е. прокрутки страницы дорогу сайт iPhone 5S делает) .

1. чертежу Board

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

Visualize either in your mind or in sketches. — Визуализация либо в вашем уме или в эскизах.( Просмотр большой version ⁴)

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

Подготовка макета и положение секции .
Отключить умолчанию прокрутка поведение браузера с CSS с применением overflow: hidden к body тега.Положение каждой секции в последовательности, при расчете и присоединение всей необходимой информации и классы .
Установить ручной прокрутки триггер .
Обнаружить прокрутки триггер с помощью JQuery, а затем определить направление, а затем переместите формат, используя CSS .
Добавить компоненты .
Добавить отзывчивость, циклы, поддержка мобильных устройств, салфетки нумерацию страниц и т.д. .
Тест по браузеры .
Убедитесь, что плагин работает отлично во всех современных браузерах (Chrome, Safari, Firefox, Internet Explorer 10) и на самых популярных операционных систем (Windows, Mac OS X, IOS и Android 4.0) .
Открытым исходным кодом плагина .
Создать новое хранилище, структурирования его и писать инструкции о том, как использовать плагин .
Расширить поддержку .
Исследуйте другие способы увеличения поддержки плагин .

2. Строительство Foundation

Теперь, я представил себе всю концепцию, я начал строить плагин с этим шаблоном:

!function($) {

   var defaults = {
      sectionContainer: "section",
      …
   };

   $.fn.onepage_scroll = function(options) {
      var settings = $.extend({}, defaults, options);
      …
   }

}($)

Шаблон начинается с !function($) { … }($) модуля, который обеспечивает локальную область видимости в глобальной переменной для JQuery.Цель этой функции является снижение накладных расходов на JQuery поиска ($) и предотвращения конфликтов с другими библиотеками JavaScript .

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

$.fn.onepage_scroll функция основная функция, которая инициирует все.Не забудьте заменить onepage_scroll с вашим собственным именем функции, если вы создаете свой собственный .

Отключение прокрутки поведение можно легко сделать, добавив overflow: hidden к body тега через CSS черезПлагин специальное имя класса.Далее с плагином конкретных именования классов, важно, чтобы избежать конфликтов с существующими стилями CSS.Я обычно идут с аббревиатурой названия плагина, с последующим дефисом и описательной слова: например, .onepage-wrapper .

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

3. Подготовить макет и позиция Sections

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

var sections = $(settings.sectionContainer);
var topPos = 0;

$.each(sections, function(i) {
   $(this).css({
      position: "absolute",
      top: topPos + "%"
   }).addClass("ops-section").attr("data-index", i+1);
   topPos = topPos + 100;
});

Этот фрагмент перебирает каждого представленного селектора (sectionContainer определяется в defaults переменной), применяется position: absolute и назначает каждый с правильным top позиция, что нужно правильно выровнять .

top позиция сохраняется в topPos переменной.Начальное значение 0 и увеличивается, как это перебирает каждого.Для того, чтобы каждый раздел полную страницу и правильно складывают все, что я должен был сделать установить высоту каждой секции до 100% и увеличение topPos переменную 100 каждый раз, когда он просматривает раздел.Теперь каждый раздел должен укладывать правильно, в то время как только первая секция видна посетителям .

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

4. Руководство запуска и страницы Transformation

Вы думаете, что следующим шагом будет двигаться каждый раздел в новое положение, когда прокрутка срабатывает — Я так и думал, тоже.Как выясняется, есть лучшее решение.Вместо того чтобы двигаться каждый раздел каждый раз, когда пользователь прокручивает, что потребует еще один цикл, а другой через расчет, я обернул все разделы в одном контейнере и используется CSS3 в translate3d, чтобы переместить всю обертку вверх и вниз.Потому что translate3d поддерживает процентные значения на основе, мы можем использовать нашу предыдущую top расчет позиции для перемещения каждый раздел в области просмотра без пересчитать его.Еще одно преимущество в том, что это дает вам контроль над сроками и ослабление настройки анимации .

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

The first solution you come up with is not always the most efficient, so make sure to leave time for experimentation. — Первое решение вы придумали не всегда самый эффективный, поэтому убедитесь, что оставить время для экспериментов.( Просмотр большой version ⁶)

Теперь, все, что мы должны сделать, это определить направление прокрутки пользователя и переместите оболочку соответственно.Вот код, чтобы обнаружить направление прокрутки:

function init_scroll(event, delta) {
   var deltaOfInterest = delta,
   timeNow = new Date().getTime(),
   quietPeriod = 500;
   
   // Cancel scroll if currently animating or within quiet period
   if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
      event.preventDefault();
      return;
   }

   if (deltaOfInterest < 0) {
      el.moveDown()
   } else {
      el.moveUp()
   }
   lastAnimation = timeNow;
}

$(document).bind('mousewheel DOMMouseScroll', function(event) {
   event.preventDefault();
   var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
   init_scroll(event, delta);
});

В приведенном выше фрагменте, сначала я связать функцию в mousewheel события (или DOMMouseScroll для Firefox), так что я могу перехватить данные прокрутки, чтобы определить направление прокрутки.Связываясь моей init_scroll функция в этих событиях, я в состоянии передать имеющуюся wheelData к init_scroll и определения направления .

В идеальном мире, все, что я должен был бы сделать, чтобы обнаружить и переместить каждый раздел является получить дельту от wheelData переменной, используйте значение, чтобы определить направление и выполнять преобразование.Это, однако, не представляется возможным.Когда вы имеете дело с секвенирования анимации, вы должны создать отказоустойчивый, чтобы предотвратить триггер удвоения, которые могли бы привести анимацию перекрываются.Мы можем использовать setInterval сортировать эту проблему путем вызова каждого анимации индивидуально, с его собственного времени, установленного на части, чтобы создать последовательность.Но для точности и надежности, setInterval дотягивает, потому что каждый браузер обрабатывает его по-разному.Например, в Chrome и Firefox, setInterval дросселировании в неактивных вкладок, в результате чего обратные вызовы не должен вызываться в момент.В конце концов, я решил обратиться к временной метки .

var timeNow = new Date().getTime(),
quietPeriod = 500;
…
if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
   event.preventDefault();
   return;
}
…
lastAnimation = timeNow;

В этом фрагменте выше (извлеченной из предыдущего), вы можете увидеть, что я назначен текущую временную метку в timeNow переменная до обнаружения, так что он может проверить, была ли выполнена предыдущая анимация для дольше, чем 500 миллисекунд,Если предыдущая анимация выполняется менее чем за 500 миллисекунд, то условие будет предотвратить превращение из перекрывающихся текущую анимацию.При использовании метки, а setInterval, мы можем обнаружить времени более точно, потому что отметка полагается на глобальные данные .

if (deltaOfInterest < 0) {
   el.moveDown()
} else {
   el.moveUp()
}

moveUp 47 ~ и | функции, которые изменяют все атрибуты макете, чтобы отразить текущее состояние сайта.Такие данные, как индекс текущего, имя класса в текущем разделе и так далее добавляются в этих функций.Каждая из этих функций будет вызывать transform метод для перемещения в следующем разделе в видовом .

$.fn.transformPage = function(settings, pos, index) {
   …
   $(this).css({
      "-webkit-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
      "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing,
      "-moz-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
      "-moz-transition": "all " + settings.animationTime + "ms " + settings.easing,
      "-ms-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
      "-ms-transition": "all " + settings.animationTime + "ms " + settings.easing,
      "transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
      "transition": "all " + settings.animationTime + "ms " + settings.easing
   });
   …
}

Выше transform метод, который обрабатывает перемещение каждой секции.Как вы можете видеть, я использовал трансформацию CSS3, чтобы обрабатывать все манипуляции с помощью JavaScript.Поэтому я сделал это в JavaScript, а не в отдельном листе стиле, чтобы позволить разработчикам настроитьПоведение плагина — основном временной анимации и ослабления — счет собственных вызовов функций, без необходимости ехать на отдельном листе стиле и копать для настройки.Другая причина состоит в том, что анимации требуется динамическое значение, чтобы определить процент перехода, который может быть рассчитан только на JavaScript путем подсчета количества секций .

5. Дополнительная Features

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

В начале, я не сосредоточиться на создании мобильных первая плагин (который я до сих пор жалею сегодня).Скорее всего, я использовал простое решение (спасибо Эйке Send ⁷ за его салфетки событий), чтобы обнаружить и преобразовать данные в полезную салфетки данных дельта, для того, чтобы использовать его на моей init_scroll функции,Это не всегда дают лучший результат в мобильных браузерах, таких как пользовательские браузеры Android, так что я в конечном итоге реализацию запасной вариант, который позволяет плагин вернется к своей родной поведения прокрутки, когда браузер достигает определенной ширины.Вот скрипт, который делает что:

var defaults = {

   responsiveFallback: false

   …

};
function responsive() {

   if ($(window).width() < settings.responsiveFallback) {

      $("body").addClass("disabled-onepage-scroll");

      $(document).unbind('mousewheel DOMMouseScroll');

      el.swipeEvents().unbind("swipeDown swipeUp");

   } else {

      if($("body").hasClass("disabled-onepage-scroll")) {

         $("body").removeClass("disabled-onepage-scroll");

         $("html, body, .wrapper").animate({ scrollTop: 0 }, "fast");

      }
      el.swipeEvents().bind("swipeDown",  function(event) {

         if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();

         el.moveUp();

      }).bind("swipeUp", function(event){

         if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();

         el.moveDown();

      });
      $(document).bind('mousewheel DOMMouseScroll', function(event) {

         event.preventDefault();

         var delta = event.originalEvent.wheelDelta || -event.origi ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров


 		
		
				
		
				
			  Главная   →  Программирование  → 25.08.2014  by  coding.smashingmagazine.com