Granim.js / Дизайн / Плагины Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.6

Каталог: Плагины Bootstrap

Категория: Дизайн

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify

Язык: Английский

Вес файла: 219.5 Kb

Уникальный ID: 1697

Посмотрели: 1917 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 66 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/sarcadass/granim.js

Информация: Пользователям

Информация: Правообладателям

Теги: эффект, Plugin, Effect, фон, Background, Canvas, Bootstrap, Gradient, градиент

Поделился: BootstrapТема

Добавлено: 2017-01-18 в 15:44

Метка: 1588864078

⇄ ⇅

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2017/granim-js/granim.min.js"></script>

<style>
#canvas-basic {
 position: absolute;
 display: block;
 width: 100%;
 height: 100%;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index:-1
}

.name {
 text-shadow: 1px 1px 0px rgb(223, 223, 223), 2px 2px 0px rgb(185, 185, 185);
 color: #fff;
 font-size: 500%;
}
</style>

<div class="container">
<canvas id="canvas-basic"></canvas>
<div class="row">

<h1 class="text-center name">Granim.js</h1>
 
</div>
</div>

<script>
var granimInstance = new Granim({
 element: '#canvas-basic',
 name: 'basic-gradient',
 direction: 'left-right',
 opacity: [1, 1],
 isPausedWhenNotInView: true,
 states : {
 "default-state": {
 gradients: [
 ['#AA076B', '#61045F'],
 ['#02AAB0', '#00CDAC'],
 ['#DA22FF', '#9733EE']
 ]
 }
 }
});
</script>