Comments 26
Можно и на чистом css сделать codepen.io/chinchang/pen/xCkus
+4
ИМХО без дисторшина как-то неполноценно.
+13
Ваш дисторшин напомнил мне «перевод» настроек из монитора ViewSonic. Термины pincusion и trapezoid так и оставили пинкушн и трапезоид.
0
сам прием основан на простом передвижении фона (либо контейнера с текстурой, если нет возможности двигать фон), поэтому единственный вариант достижения лучшего результата в данном случае — предварительная подготовка текстуры.
0
Анимация весьма правдоподобно напоминает 3D
Вы это серьезно?
+18
да, вполне. Т.к. она действительно всего лишь напоминает, а не заменяет 3D анимацию.
Хорошая 3D-анимация безусловно лучше и приятнее глазу, а приведенным выше трюком не удивить изощренных дизайнеров и девелоперов. Но если в программе или на странице нужно сделать простой элемент (лоадер, небольшую анимацию земного шара, заставку во время загрузки и т.д.), который не несет сильной функциональной нагрузки, то простое решение лучше минимум тем, что на него будет затрачено минимум времени при весьма неплохом результате.
Хорошая 3D-анимация безусловно лучше и приятнее глазу, а приведенным выше трюком не удивить изощренных дизайнеров и девелоперов. Но если в программе или на странице нужно сделать простой элемент (лоадер, небольшую анимацию земного шара, заставку во время загрузки и т.д.), который не несет сильной функциональной нагрузки, то простое решение лучше минимум тем, что на него будет затрачено минимум времени при весьма неплохом результате.
0
Мне лично эффект показался настолько отвратительным и дешевым, что имхо лушче я в прелоадере буду смотреть на статику, чем на это.
+6
а если Вы научитесь внимательнее читать, то увидите, что статья в первую очередь описывает простой способ анимации без использования математики, и не предлагает готовое решение. И результат в первую очередь будет зависеть от подготовленных графических элементов (в первую очередь фон), а этот коммент habrahabr.ru/post/180353/#comment_6261603 это только доказывает.
то, что эффект дешевый — никто не отрицает, и это открыто подчеркивается.
то, что эффект дешевый — никто не отрицает, и это открыто подчеркивается.
-1
Вы продемонстрировали эффект на конкретном практическом применении. А я говорю, что это применение выглядит ужасно. Статья даже названа соответственно практическому применению этого эффекта в конкретном случае, а не сферическому эффекту в вакууме.
Так что кто из нас «не умеет внимательно читать» — еще вопрос ;)
Так что кто из нас «не умеет внимательно читать» — еще вопрос ;)
0
Напоминает, но не сильно, без искажений нет ощущения объема.
+8
Отрендеренная гифка будет более красиво смотреться и там даже js,css не будет.
+1
да, это тоже вполне хорошее решение, тем более, что шар будет естественнее смотреться, а также можно и наклон оси изменить. Но лично у меня «скил» подготовки гифок развит плохо по ставнению с программированием и для себя я выберу решение более быстрое в реализации, особенно, при отсутствии дизайнера в команде.
+1
WebGL Вам в руки если скилл программирования развит. Создать сферу и натянуть на неё текстуру не самая сложная задача.
-1
Анимация весьма правдоподобно напоминает 3D
А ничего что когда вращается сфера то визуально полюса движутся медленней чем экватор? Без этого и без, хоть малейшего намека на объем, в виде теней и рефлекса, все кажется очень плоским.
+4
Нельзя просто слайдить текстуру, нужна имитация эффекта вращения. Относительно просто можно имитировать вращающийся цилиндр и рисовать его грани, т.е. скомпоновать «планету» из прямоугольников, каждый из которых использует разный скейл оригинальной текстуры:
В движении
Скрытый текст
Скрытый текст
Скрытый текст
Скрытый текст
В движении
+16
Круто! Записал решение))
0
попробовал повторить подобное Demo 2, но на видюшке результат лучше смотрится. Можно, конечно, попробовать сделать шаблон с прозрачными тенями для улучшения результата, но это уже выходит за грани простого «трюка» в сторону реализации целого компонента.
Спасибо за видюшку и краткое описание
Спасибо за видюшку и краткое описание
-2
Дело не в прозрачных тенях, а в математике: надо представить себе половину N-гранного цилиндра и рассчитать параметры проекции его граней на плоскость.
0
В реализации этот метод будет посложнее.
До «натяжки» на n-гранный цилиндр что из себя представляет текстура? Как-то её предварительно подготавливаете или это проекция сферы (элипса и тд) на плоскость?
До «натяжки» на n-гранный цилиндр что из себя представляет текстура? Как-то её предварительно подготавливаете или это проекция сферы (элипса и тд) на плоскость?
0
Технически подходит почти любая текстура, как в вашем примере:
(это не совсем ваша текстура 200x100, а чуть более детальная ее версия отсюда)
На деле, лучше всего выглядят не-контрастные текстуры с ярко выраженными полярными шапками, а заодно можно в фотошопе сделать горизонтальный фильтр Spherize, чтобы ближе к шапкам была видна деформация поверхности.
(это не совсем ваша текстура 200x100, а чуть более детальная ее версия отсюда)
На деле, лучше всего выглядят не-контрастные текстуры с ярко выраженными полярными шапками, а заодно можно в фотошопе сделать горизонтальный фильтр Spherize, чтобы ближе к шапкам была видна деформация поверхности.
0
А что за игрушка?
+1
Что-бы народ меньше критиковал 3Д-шность — добавьте отвлекающий контекст в демку, например скорость вращения, пропорциональную реальной для каждой из планет.
0
Sign up to leave a comment.
Псевдо 3D: Анимация вращения планет и других шароподобных объектов