[ANIMATION BACKGROUND] Анимация фона и прочие плюшки HTML CSS JS

Эксперт
Эксперт
Статус
Оффлайн
Регистрация
31 Мар 2017
Сообщения
1,007
Реакции
652
Приветствую!
Решил от нечего делать запилить гайд, на тему анимации фона, может кто и захочет себе такое чудо..

Не буду впадать в подробности, мол как и что, расскажу как пользоваться.

На сайте :
Пожалуйста, авторизуйтесь для просмотра ссылки.

Можно наблюдать плавную смену фона и регулировку её, а так же смену разных цветовых гамм.

Чтобы добавить себе такой фон, вам достаточно, скопировать:


.class{
animation: gradient 10s infinite;
background-size: 1000% 1000%;
}


Подставить ваш класс.


@keyframes gradient {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}



Просто добавить в ваш файл стилей.

Ну и конечно же выбрать одну из понравившихся цветовых палитр, для этого выберите себе понравившийся цвет
Затем скопируйте его класс:


.color-1{
background: linear-gradient(-45deg, #cc2b5e, #753a88);
}



И задайте своего элементу на сайте, точно такое же название class="color-1" в тот же элемент, в котором вы выше ставили себе настройки animation и background-size .

Если мои слова трудны для понимания, вы просто можете скачать готовый результат с rghost и поставить себе на локальный, либо же нормальный хостинг.

Скачать :
Пожалуйста, авторизуйтесь для просмотра ссылки.


Просмотреть результат :
Пожалуйста, авторизуйтесь для просмотра ссылки.


Скриншот:
1d4e0aaea4eed7ece3983d63da482007.png
 
Последнее редактирование:
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки.
Можешь подсказать для чего это нужно?useless же нет?
 
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки.
Можешь подсказать для чего это нужно?useless же нет?
Анимированный фон с возможностью выбора скорости и цветовых гамм - юзлесс? Ну как знаешь..

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

Если есть подобные сообщения, можете писать, любая критика приветствуется.
 
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки.
Анимированный фон с возможностью выбора скорости и цветовых гамм - юзлесс? Ну как знаешь..

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

Если есть подобные сообщения, можете писать, любая критика приветствуется.
Я не видел ни одного сайта,где было бы грамотно реализована данная тема
 
Я не видел ни одного сайта,где было бы грамотно реализована данная тема
И в чем же плоха реализация?

Костыли? Их нету.
Кроссбразуерность? Есть.

Фон просто растянут в 10 раз и анимация перемещается с 0 позици на 50% .
Так что не вижу тут чего-либо плохого..

В любом случае опыт анимировать 0deg до 360 не дал результата, этот параметр не оптимизируется, чтобы это было плавно, нужно 360раз вписать стиль с изменением на 1deg больше , что уже является костылем/говнокодом.

Вопрос остался прежним, что является здесь неграмотной реализацией?
 
Назад
Сверху Снизу