Псевдо 3D или параллакс средствами Javascript: Часть 2

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

Первый блин, который вышел комом можно посмотреть тут.

Задачи

В обновленной версии захотелось реализовать следующие пункты:

1. Плавность движения спрайтов
2. Добавление/Удаление слоев и спрайтов «налету»
3. Сделать скрипт расширяемым и более менее универсальным.
4. Получить больше фидбека по улучшению кода и способах применения.

Реализация

Как и в прошлом варианте, скорость движения слоев регулируется z-index’ом слоя, что, на мой взгляд, вполне логично.
В отличии от предыдущего варианта я ввел понятия слой и спрайт.
Слой имеет свой индекс и позицию на экране и может содержать в себе неограниченное количество спрайтов. Куда движется слой, туда движутся и спрайты. Так же мы имеем возможность двигать каждый спрайт в отдельности, независимо от движения слоя.

В итоге HTML выглядит примерно так (упрощенный вариант):

<div id="background" class="layer-background">     <div id="layer1" class="layer">         <div id="sun" class="sprite"></div>         <div id="cloud" class="sprite"></div>     </div>     <div id="layer2" class="layer">         <div id="sprite1" class="sprite"></div>     </div> </div> 

Заправляет всем js объект ignParallaxScene

var ignParallaxScene = { containerId: string, //id слоя с фоном (в него будут добавляться слои)  vx: number, vy: number, //скорость  ax: number, ay: number,  //ускорение delay: number,  //задержка обновления позиций слоев (мс) layers: Array, //массив со слоями  isStarted: boolean, //флаг вкл/выкл анимацию  vMultiplier: {x: number, y: number}, //коэффициент ускорения по х и у (изменять, если слои слишком медленно или быстро движутся)  initScene: Function, //активация  bindDeviceMotion: Function, //активация обзервера на поворот устройства  addLayer: Function, //добавление слоя  addSprite: Function, //добавление спрайта  removeSprite: Function, //удаление спрайта  removeLayer: Function, //удаление слоя  stopScene: Function, //остановить анимацию  resumeScene: Function, //возобновить анимацию  moveLayer: Function, //сдвинуть слой  moveSprite: Function //сдвинуть спрайт }  

Добавление слоев выглядит так:

                     // z-index, top, left, id     ignParallaxScene.addLayer(-40,0,0,'far');     ignParallaxScene.addLayer(-20,0,0,'clouds');     ignParallaxScene.addLayer(10,0,0,'actors'); 

Добавление спрайтов выглядит так:

                     // id(слоя), top, left, id, image, width, height ignParallaxScene.addSprite('far',200,400,'sun','sun.png',130,130);     ignParallaxScene.addSprite('clouds',210,460,'clouds','cloud.png',130,150);     ignParallaxScene.addSprite('actors',850,400,'ben','bender.png',256,200);     ignParallaxScene.addSprite('actors',850,600,'fry','fry.png',256,200); 

Добавлять/Удалять слои и спрайты можно до запуска анимации или во время.

Важным шагом к улучшению стало переход с движения слоями манипулируя top и left на translate3d.

predicts = ['','-webkit-','-moz-']; //от этого можно избавиться, но пока пусть будет так         for (j = 0; j < predicts.length; j++) {             sprite.style[predicts[j] + 'transform'] =  'translate3d(' + sprite.x + 'px, ' + sprite.y + 'px, 0px)';         } 

Поддержку Android и Windows устройств я не смог сделать за неимением оных. Поэтому буду рад подсказкам и допилам.
Если браузер не поддерживает window.DeviceMotionEvent, то вы об этом узнаете из всплывающего сообщения и анимация заработает таймером со случайными значениями

 if (window.DeviceMotionEvent == undefined) {             alert('Event: DeviceMotionEvent is not supported by this device.')             console.warn('Not supported');             setInterval(function(){                 ignParallaxScene.ax = Math.random()*10;                 ignParallaxScene.ay = Math.random()*5;             },parseInt(Math.random()*50));             this.bindDeviceMotion();         } 

Ссылки на демо и на репозиторий

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

Буду рад, если пост будет реально полезен сообществу. Не забывайте оставлять фидбек.