• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Анимация CSS для смены фона градиента сайта (Создание красивой анимации градиента при ротации оттенков)
Анимация CSS для смены фона градиента сайта
Kosten
Дата: Суббота, 2018-10-13, 17:05 | Сообщение 1
Администраторы
Сообщений:18467
Награды: 55


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

Так как еще при этом будет возможность самостоятельно анимировать градиент, что нужно знать. Это все желается для того, чтоб фон иди элемент где он находится, точнее интерфейс, стал необычно переливаться той палитрой, что была указана, это разными цветовыми гаммами.

Изначально нужно прописать библиотекой granim.js: https://sarcadass.github.io/granim.js/ - которая также будет представлено на demo странице.

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



Приступаем к установке:

HTML

Код
<canvas id="dopletun-kasevtedkos"></canvas>

CSS

Код
#dopletun-kasevtedkos {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

JS

Код
var granimInstance = new Granim({
    element: '#dopletun-kasevtedkos',
    name: 'basic-gradient',
    direction: 'left-right',
    opacity: [1, 1],
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#a5106b', '#650963'],
                ['#0d9196', '#0abfa2'],
                ['#cd1cf1', '#8a28de']
            ]
        }
    }
});


У каждого фона идет 2 оттенка, что можно сменить на свои, а вообще идет 3 фона по умолчанию.

Демонстрация
Прикрепления: 7947497.jpg(21.7 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Анимация CSS для смены фона градиента сайта (Создание красивой анимации градиента при ротации оттенков)
  • Страница 1 из 1
  • 1
Поиск: