Градиентная анимация для uKit
Данный код помогает создавать плавные и интерактивные градиентные анимации в блоках uKit.
Преимущества данного скрипта заключается в его легкой установки, без HTML виджетов на странице.
Настройки блока
Укажите класс «convasnew» (без кавычек) блоку в котором должна проигрываться «градиентная анимация» (Скриншот)
Если Вы не знаете, как указать класс блоку, посмотрите это видео — YouTube
Вы также можете поменять цвета для анимации в самом начале кода.
Установка скрипта
Рекомендуем установить скрипт только на странницу где будет находиться блок с анимацией (скриншот).
Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
<style>
.gradient-canvas,
.gradient-canvas2 {
--gradient-color-1: #946fd6; /*УКАЗАТЬ СВОЙ ЦВЕТ №1*/
--gradient-color-2: #673ab7; /*УКАЗАТЬ СВОЙ ЦВЕТ №2*/
--gradient-color-3: #223C97; /*УКАЗАТЬ СВОЙ ЦВЕТ №3*/
--gradient-color-4: #2196f3; /*УКАЗАТЬ СВОЙ ЦВЕТ №4*/
}
</style>
<canvas id="canvas" class="gradient-canvas"></canvas>
<style>
.gradient-canvas, .gradient-canvas2 {
width: 100%;
height: 100%;}
canvas {display: none;}
.convasnew canvas#canvas {display: inline-block;}
</style>
<script src="https://ukit.top/canvas/canvasnew.js"></script>
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
-1
