Описание небольшого трюка по анимации вращения планет или других шарообразных штуковин. На написание этой статьи меня натолкнула статья Сфера из двух треугольников (стоит почитать). А сам трюк основан на весьма простом способе создания в Photoshop псевдо-объемной картинки из плоской, который описан под катом.
микродемо
Как это делается в Photoshop (микро-урок):
Чтобы долго не заморачиваться с реализацией (т.к. это уже второстепенный момент), буду использовать js+css+html. Описанный выше «урок» для Photoshop для веб-страницы будет выглядеть так:
также можно решить эту задачу, используя canvas (кроссплатформенное быстрое решение можно получить с помощью, например, pixi.js или подобных библиотек, либо чистого js + canvas).
Как выглядит стиль:
т.е. нужно установить начальное состояние фона, потом округлить блок (здесь я просто использую border-radius, но можно использовать картинку-шаблон с вырезанным кругом внутри, при этом, в этот шаблон можно включить и тени, таким образом достигнув более крутого результата) и сделать тень, затем задать размеры блока — вот и всё. А потом описаны стили для разных планет.
JavaScript-кода не больше:
т.е. нужно сделать выборку всех элементов и сдвинуть у них фоновое изображение.
Demo
Ландшафты разных планет
GitHub для препарирования
UPD: omfg: Можно и на чистом css сделать codepen.io/chinchang/pen/xCkus
микродемо
Как это делается в Photoshop (микро-урок):
- подбираем нужную текстуру
- вырезаем из неё кружок
- добавляем затемнение или осветление «по вкусу» через свойства слоя (я буду использовать осветление, а более реалистичные результаты получаются при комбинации разных теней)
Чтобы долго не заморачиваться с реализацией (т.к. это уже второстепенный момент), буду использовать js+css+html. Описанный выше «урок» для Photoshop для веб-страницы будет выглядеть так:
- подбираем бесконечную текстуру, повторяющуюся по вертикали (или по горизонтали, или в обоих направлениях)
- устанавливаем эту текстуру в виде фона
- изменяем положение фона с помощью js через фиксированные промежутки времени
также можно решить эту задачу, используя canvas (кроссплатформенное быстрое решение можно получить с помощью, например, pixi.js или подобных библиотек, либо чистого js + canvas).
Решение
Как выглядит стиль:
.planet2d {
background: repeat-x 0 0 url(earthmap-h100.jpg);
border: 1px solid #999;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
box-shadow: inset 0 0 10px rgba(255,255,255,0.9);
height: 100px;
width: 100px;
}
.planet2d.moon { background-image: url(moon-h100.jpg); }
.planet2d.jupiter { background-image: url(jupiter-h100.jpg); }
.planet2d.venus { background-image: url(venus-h100.jpg); }
.planet2d.mercury { background-image: url(mercury-h100.jpg); }
.planet2d.io { background-image: url(io-h100.jpg); }
т.е. нужно установить начальное состояние фона, потом округлить блок (здесь я просто использую border-radius, но можно использовать картинку-шаблон с вырезанным кругом внутри, при этом, в этот шаблон можно включить и тени, таким образом достигнув более крутого результата) и сделать тень, затем задать размеры блока — вот и всё. А потом описаны стили для разных планет.
JavaScript-кода не больше:
(function (w) {
w.Planet2D = function (interval) {
interval = interval || 40;
var j = 0;
setInterval(function () {
var els = document.querySelectorAll(".planet2d");
j--;
for (var i = 0; i < els.length; i++) {
els[i].style.backgroundPosition = j + "px 0px";
}
}, interval);
}
})(window);
т.е. нужно сделать выборку всех элементов и сдвинуть у них фоновое изображение.
Итог
- Математики нет
- Трюк легко реализовывается под многие платформы
- Анимация весьма правдоподобно напоминает 3D
Ссылки
Demo
Ландшафты разных планет
GitHub для препарирования
UPD: omfg: Можно и на чистом css сделать codepen.io/chinchang/pen/xCkus