"PARTICLE BACKGROUND"
Bootstrap 4.0.0 Snippet by webcoderskull

1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="particles">
<div id="webcoderskull">
<h1>PARTICLE BACKGROUND</h1>
<p>Web Coder Skull Team</p>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#webcoderskull{
position: absolute;
left: 0;
top: 50%;
padding: 0 20px;
width: 100%;
text-align: center;
}
canvas{
height:100vh;
background-color:#16a085;
}
#webcoderskull h1{
letter-spacing: 5px;
font-size: 5rem;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-weight: bold;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*!
* Particleground
*
*/
document.addEventListener('DOMContentLoaded', function () {
particleground(document.getElementById('particles'), {
dotColor: '#5cbdaa',
lineColor: '#5cbdaa'
});
var intro = document.getElementById('intro');
intro.style.marginTop = - intro.offsetHeight / 2 + 'px';
}, false);
;(function(window, document) {
"use strict";
var pluginName = 'particleground';
function extend(out) {
out = out || {};
for (var i = 1; i < arguments.length; i++) {
var obj = arguments[i];
if (!obj) continue;
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === 'object')
deepExtend(out[key], obj[key]);
else
out[key] = obj[key];
}
}
}
return out;
};
var $ = window.jQuery;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

I wanted to use this background as a background to a project I was working on.

In order to do so, I needed to readjust the height and width of the canvas.

I am however, forced to set its height and width with min and max values respectively.

This works, until I resize the page and the min height value stays on and makes the page longer than needed.

I was wondering where in the javascript or css of this code I could make adjustments, so that the background resizes based on adjustments?

I've tried setting the height to a 100 % of the body and it keeps making the canvas only appear at the very top of the page (with height of 150px and full width).

When inspecting using dev tools I also received these two errors:

Uncaught TypeError: Cannot read property 'fn' of undefined

at util.js:68

at util.js:10

at bootstrap.min.js:6

at bootstrap.min.js:6

connectDots.js:11 Uncaught TypeError: Cannot read property 'style' of null

at HTMLDocument.<anonymous> (connectDots.js:11)

'connectDots.js' is the name I gave my js file and line 11 here corresponds to the same line 11 in the javascript above .

Any help would be much appreciated as I feel I've exhausted all options.

Thank you in advance!

8080co () - 3 years ago - Reply 0


I wanted to use this background as a background to a project I was working on.

In order to do so, I needed to readjust the height and width of the canvas.

I am however, forced to set its height and width with min and max values respectively.

This works, until I resize the page and the min height value stays on and makes the page longer than needed.

I was wondering where in the javascript or css of this code I could make adjustments, so that the background resizes based on adjustments?

I've tried setting the height to a 100 % of the body and it keeps making the canvas only appear at the very top of the page (with height of 150px and full width).

When inspecting using dev tools I also received these two errors:

Uncaught TypeError: Cannot read property 'fn' of undefined

at util.js:68

at util.js:10

at bootstrap.min.js:6

at bootstrap.min.js:6

connectDots.js:11 Uncaught TypeError: Cannot read property 'style' of null

at HTMLDocument.<anonymous> (connectDots.js:11)

'connectDots.js' is the name I gave my js file and line 11 here corresponds to the same line 11 in the javascript above .

Any help would be much appreciated as I feel I've exhausted all options.

Thank you in advance!

8080co () - 3 years ago - Reply 0