fapchat
@fapchat

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

5d5dd8a5b542c114895597.png
Да, я гуглил, чекал гайды, но там анимировали всякую чушьтипо города и облачков. а мне нужно анимировать 4к бэкраунд и так, чтобы разрешение и качество не снижалось
  • Вопрос задан
  • 1476 просмотров
Решения вопроса 1
fapchat
@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%; }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
l3ftoverz
@l3ftoverz Куратор тега CSS
Rings of Saturn - The Husk
Да, я гуглил, чекал гайды, но там анимировали всякую чушьтипо города и облачков. а мне нужно анимировать 4к бэкраунд и так, чтобы разрешение и качество не снижалось
А чё, при анимации как-то качество снижается? Если я буду анимировать вместо 2к домика - 4к облачка, то я где-то потеряю качество? А ещё, ты понимаешь, что мне например, когда я сижу с 3G модема, где каждый гигабайт у мобильного оператора стоит рублей сто - я трачу пару десятков мегабайт на 4к облачка?

Как анимировать? - Да фиг знает чё ты под этим имешь ввиду. Можешь написать скрипт, который будет рандомно двигать например background-position, что создаст эффект паралакта. На самом деле ты много что можешь, ток не ясно чё хочешь.
Ответ написан
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
А пользователь, по вашему, должен страдать от вашего желания анимировать этот фон?

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

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

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

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

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

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

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

Типичный пример хотелки без понимания всех проблем, что эта хотелка в себе таит.
Ответ написан
@Vaultboy84
Ты научись вначале формулировать свои хаотичные мысли в понятные конкретизированные вопросы, аниматор.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы