Скрипты для uKit 17.05.2021 4 104
Градиентная анимация для uKit

Градиентная анимация для 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>». (скриншот).
Сохраните код и опубликуйте ваш сайт.

 

Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Минимальный» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 4
avatar
-1
1
avatar
0
2
Попрошу без спама, иначе вы будете перемещены в карантин, на неопределенный срок!
avatar
0
3
Анимация накрывает собой весь блок, если к нему применить тень
avatar
0
4
А не нужно применять тень, зачем она там?
avatar