Canvas эффект цветного дождя / Эффекты / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Каталог: Сниппеты Bootstrap

Категория: Эффекты

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress

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

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

Количество символов:

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

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

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

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

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

Авторство: https://goo.gl/P3MJCJ

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

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

Теги: эффект, Snippet, html, Effect, Canvas, сниппет, Bootstrap

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

Добавлено: 2016-12-29 в 21:26

Метка: 1483035973

⇄ ⇅

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<style>
body{background-color:#222}
h1{
 color: rgb(255, 255, 255);
font-size: 500%;
text-shadow: rgb(204, 204, 204) 0px 1px 0px, rgb(201, 201, 201) 0px 2px 0px, rgb(187, 187, 187) 0px 3px 0px, rgb(185, 185, 185) 0px 4px 0px, rgb(170, 170, 170) 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 6px 1px, rgba(0, 0, 0, 0.1) 0px 0px 5px, rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(0, 0, 0, 0.15) 0px 3px 5px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.2) 0px 10px 10px, rgba(0, 0, 0, 0.1) 0px 20px 20px;
}
#canvaseffect {
 position:absolute;
 top:0; left:0;
 opacity:.8;
}
</style>

<br><br><br>

<canvas id="canvaseffect"></canvas>

<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">

<h1 class="text-center">CANVAS EFFECT</h1>

</div>
</div>
</div>

<script>
var w = canvaseffect.width = window.innerWidth,
 h = canvaseffect.height = window.innerHeight,
 ctx = canvaseffect.getContext('2d'),
 
 total = w,
 accelleration = .05,
 
 size = w/total,
 occupation = w/total,
 repaintColor = 'rgba(0, 0, 0, .04)'
 colors = [],
 dots = [],
 dotsVel = [];

var portion = 360/total;
for(var i = 0; i < total; ++i){
 colors[i] = portion * i;
 
 dots[i] = h;
 dotsVel[i] = 10;
}

function anim(){
 window.requestAnimationFrame(anim);
 
 ctx.fillStyle = repaintColor;
 ctx.fillRect(0, 0, w, h);
 
 for(var i = 0; i < total; ++i){
 var currentY = dots[i] - 1;
 dots[i] += dotsVel[i] += accelleration;
 
 ctx.fillStyle = 'hsl('+ colors[i] + ', 80%, 50%)';
 ctx.fillRect(occupation * i, currentY, size, dotsVel[i] + 1);
 
 if(dots[i] > h && Math.random() < .01){
 dots[i] = dotsVel[i] = 0;
 }
 }
}
anim();
</script>