Статьи

Обновлено: эффекты параллакса в гибридных / веб-приложениях

Декабрь 25, 2017

Некоторое время назад я писал о добавлении эффектов параллакса в ваш опыт HTML / JS, чтобы они чувствовали себя немного богаче и ближе к нативному опыту. Я только что добавил этот тонкий эффект (ключевое слово * тонкий) в новый проект и внес несколько изменений, которыми хотел бы поделиться здесь.

Если вам интересно, о чем я говорю с «эффектами параллакса» — движение параллакса — это когда объекты на заднем плане движутся с другой скоростью, чем объекты на переднем плане, вызывая, таким образом, восприятие глубины.  Узнайте больше об этом, если вам интересно.

Во-первых, вот краткое видео этого последнего приложения в действии. Это гибридное приложение MobileFirst , но этот метод можно использовать в любом приложении Cordova / PhoneGap / MobileFirst / для мобильных веб-приложений. Ключ в том, чтобы держать его тонким и не слишком «в вашем лице», и да, это очень тонко в этом видео. Вы должны внимательно следить.

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

Сначала давайте посмотрим на CSS.

body {
    background-image: url('../images/cloud_advisor_bkgd.png');
    background-attachment: fixed;
    background-position: center;
    background-size: auto 120%;
}

Это устанавливает фоновое изображение и положение по умолчанию. Отличительным изменением здесь является то, что я установил размер фона на «авто» ширину и 120% высоты. В этом случае у вас может быть огромное изображение, которое сжимается до размера, немного превышающего размер окна, или маленькое изображение, которое масштабируется до большего размера окна. Таким образом, вы не получите швы на повторяющемся фоне или фон, который слишком велик, чтобы эффективно выделить эффект параллакса.

Далее давайте кратко рассмотрим JS.

var position = "center";
var lastPosition = "center";
var contentCSS = "";
var body = $("body");
var content = $(".content");
window.suspendAnimation = false;
 
 
var xMovement = 15;
var yMovement = 30;
var halfX = xMovement/2;
var halfY = yMovement/2;
 
window.ondeviceorientation = function(event) {
 var gamma = event.gamma/90;
 var beta = event.beta/180;
  
 var temp = 0;
  
 //fix for holding the device upside down
 if ( gamma >= 1 ) {
  gamma = 2- gamma;
 } else if ( gamma <= -1) {
  gamma = -2 - gamma;
 }
  
 // shift values/motion based upon device orientation
 switch (window.orientation) {
  case 90:
   temp = gamma;
   gamma = beta;
   beta = temp;
   break;
  case -90:
   temp = -gamma;
   gamma = beta;
   beta = temp;
   break;
 
 }
 
 // update positions to be used for CSS
 var yPosition = -yMovement - (beta * yMovement);
 var xPosition = -xMovement - (gamma * xMovement);
 var contentX = (-xMovement - xPosition)/2;
 var contentY = (-yMovement - yPosition)/2;
 
 // generate css styles
 position = xPosition.toFixed(1) + "px " + yPosition.toFixed(1) + "px";
 contentCSS = "translate3d( " + (contentX.toFixed(1)) + "px, " + (contentY.toFixed(1)) + "px, " + " 0px)";
}
 
 
function updateBackground() {
   
 if (!window.suspendAnimation) {
  if ( position.valueOf() != lastPosition.valueOf() ) {
    
   body.css( "background-position", position);
   content.css( "-webkit-transform", contentCSS);
   lastPosition = position;
  }
 } else {
  lastPosition = "translate3d(0px, 0px, 0px)";;
 }
  
 window.requestAnimationFrame(updateBackground);
}
 
window.requestAnimationFrame(updateBackground);

HTML, где это будет использоваться, будет что-то вроде этого:

<body>
  <div class="content">put your foreground stuff here.</div>
</body>

Здесь есть некоторые тонкие, но важные изменения:

  1. В цикле requestAnimationFrame изменения применяются только *, если * есть изменения, которые необходимо применить. Это предотвращает ненужные вызовы для применения CSS, даже если стили CSS не изменились. В этом случае я также усекаю числовую строку CSS, чтобы она не применялась повторно, если позиция должна сместиться на 0,01 пикселя. Примечание: если вы не используете requestAnimationFrame для HTML-анимации, вам следует об этом узнать.
  2. Если бы вы использовали мой старый код и держали устройство вверх ногами, это не сработало бы. Даже не немного. Это исправлено (см. Комментарии выше).
  3. Это перемещает фон в CSS, который не вызывает операции перекомпоновки браузера , и перемещает содержимое переднего плана (внутри div), используя translate3d , что также не вызывает операции перекомпоновки браузера. Это помогает сохранять плавность анимации и оптимальную работу UX.
  4. Я также добавил глобальную переменную, чтобы очень быстро включать и выключать параллакс, если вам это нужно.

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

Если вы используете приведенный выше код, вы можете изменить переменные xMovement и yMovement, чтобы усилить эффект параллакса.

30
Share: