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

1
2
3
4
5

Версия: v1.0.1

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

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

Для Bootstrap: 3, 4

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

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

Вес файла: 44.6 Kb

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

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

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

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

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

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

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

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

Авторство: https://github.com/jnicol/particleground

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

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

Теги: flexbox, эффект фона, Plugin, Effect, particleground, Canvas, Bootstrap, flexbox bootstrap, flex

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

Добавлено: 2018-01-04 в 17:52

Метка: 1582702019

⇄ ⇅

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2018/particleground/jquery.particleground.min.js"></script>

<style>
@font-face {
font-family: 'Digital_dream';
src: url('/fonts/d/Digital-7.ttf');
}
#foneffect{position:fixed;top:0px;left:0px;right:0;bottom:0px;px;z-index:1}
#header{
 background: #070000;
 background: -webkit-linear-gradient(to right, #070000, #4C0001, #070000);
 background: linear-gradient(to right, #070000, #4C0001, #070000);
 } 
.namesite{min-height:100vh}
.namesite p{
 color: rgb(176, 150, 237);
 text-shadow: rgb(3, 3, 3) 4px 4px 4px;
 font-family: 'Digital_dream';
 font-size:100%;
 font-weight:bold;
 }
@media(min-width:576px){.namesite p{font-size:200%}}
@media(min-width:768px){.namesite p{font-size:300%}}
@media(min-width:992px){.namesite p{font-size:400%}}
@media(min-width:1200px){.namesite p{font-size:500%}}
</style>

<span id="foneffect"></span>

<div id="header" class="container-fluid">

<div class="namesite d-flex flex-row justify-content-around align-items-center">
<p class="align-self-center">B</p>
<p class="align-self-center">O</p>
<p class="align-self-center">O</p>
<p class="align-self-center">T</p>
<p class="align-self-center">S</p>
<p class="align-self-center">T</p>
<p class="align-self-center">R</p>
<p class="align-self-center">A</p>
<p class="align-self-center">P</p>
<p class="align-self-center">T</p>
<p class="align-self-center">E</p>
<p class="align-self-center">M</p>
<p class="align-self-center">A</p> 
</div>

</div>

<script>
$(document).ready(function() {

$('#foneffect').particleground({
 proximity: 244,
 curvedLines: false,
 dotColor: '#5cbdaa',
 lineColor: '#5cbdaa'
 });

});
</script>