Как анимировать этот фон?

Question

[fapchat]

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

Answer 1

[fapchat]

Выглядит, конечно, как говно

#section0{
  background: url(https://images.wallpaperscraft.ru/image/luna_noch_zvezdy_134696_3840x2400.jpg) repeat-x 0 center/cover;

background-attachment: fixed ;
overflow-y: hidden;
height: 100vh;
  animation: city 30s linear infinite;

}

@keyframes city {
  from { background-position: -1000px 100%;}
  to { background-position: 0 100%; }
}

Answer 2

[Rustam Bainazarov]

А пользователь, по вашему, должен страдать от вашего желания анимировать этот фон?

Во-первых, что и как должно анимироваться, трансформироваться и тому подобное? Где ТЗ или пример?

Во-вторых, вопрос тупой, ибо как вы собрались анимировать статическую картинку?

Во-третьих, чтобы что-то такое анимировать, вам нужно разделить на несколько слоёв. Но анимация получится простой — а-ля движение звёзд с разной скоростью (на разных слоях). Но для этого вам ещё и нужно сделать бесшовный паттерн каждого слоя, если они будут не просто мигать, а двигаться.

В-четвёртых, если нужна сложная анимация, то тут уже надо делать на WebGL. Что как бы намекает.

В-пятых, никакой пользователь не захочет грузить 40 мб ресурсов ради этого. У вас не сайт крутого агентства.

В-шестых, если уж так надо, то найдите просто видео с разрешение 1080p и поставьте его на фон, грузите его лениво, иначе у вас разбегутся люди, никто не будет ждать. Про 4К-запись с хорошим битрейтом будет весить а-ля 100 мб за 10 секунд, а также будет глючить на слабых устройствах. А с учётом огромного количества мелких деталей на видео, то при хорошем визуальном качестве в 4К-разрешении 10 секунд такого видео спокойно может весить и 150–200 мб из-за битрейта. И ваш равно будет небольшое размытие.

В-седьмых, я не описал ещё кучи моментов.

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

Comments

[VegasChickiChicki]

Со всем согласен, но чисто теоретические, если зациклить видео длинной в 2с, то может будет поменьше чем 150-200мб, но все равно дичь. Я думаю тут может подойти просто фулл хд фото + канвас сверху, что бы двигать звезды или что-то вроде того, а если делать прям уже мощную анимацию космоса, то тут только WebGL.

[Rustam Bainazarov]

VegasChickiChicki, не думаю, что двух секунд хватит, чтобы достичь хорошей вариативности.

Answer 3

[Vaultboy84]

Ты научись вначале формулировать свои хаотичные мысли в понятные конкретизированные вопросы, аниматор.