"PARTICLE BACKGROUND"
Bootstrap 4.0.0 Snippet by webcoderskull

<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>
#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; }
/*! * 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; function Plugin(element, options) { var canvasSupport = !!document.createElement('canvas').getContext; var canvas; var ctx; var particles = []; var raf; var mouseX = 0; var mouseY = 0; var winW; var winH; var desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i); var orientationSupport = !!window.DeviceOrientationEvent; var tiltX = 0; var pointerX; var pointerY; var tiltY = 0; var paused = false; options = extend({}, window[pluginName].defaults, options); /** * Init */ function init() { if (!canvasSupport) { return; } //Create canvas canvas = document.createElement('canvas'); canvas.className = 'pg-canvas'; canvas.style.display = 'block'; element.insertBefore(canvas, element.firstChild); ctx = canvas.getContext('2d'); styleCanvas(); // Create particles var numParticles = Math.round((canvas.width * canvas.height) / options.density); for (var i = 0; i < numParticles; i++) { var p = new Particle(); p.setStackPos(i); particles.push(p); }; window.addEventListener('resize', function() { resizeHandler(); }, false); document.addEventListener('mousemove', function(e) { mouseX = e.pageX; mouseY = e.pageY; }, false); if (orientationSupport && !desktop) { window.addEventListener('deviceorientation', function () { // Contrain tilt range to [-30,30] tiltY = Math.min(Math.max(-event.beta, -30), 30); tiltX = Math.min(Math.max(-event.gamma, -30), 30); }, true); } draw(); hook('onInit'); } /** * Style the canvas */ function styleCanvas() { canvas.width = element.offsetWidth; canvas.height = element.offsetHeight; ctx.fillStyle = options.dotColor; ctx.strokeStyle = options.lineColor; ctx.lineWidth = options.lineWidth; } /** * Draw particles */ function draw() { if (!canvasSupport) { return; } winW = window.innerWidth; winH = window.innerHeight; // Wipe canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Update particle positions for (var i = 0; i < particles.length; i++) { particles[i].updatePosition(); }; // Draw particles for (var i = 0; i < particles.length; i++) { particles[i].draw(); }; // Call this function next time screen is redrawn if (!paused) { raf = requestAnimationFrame(draw); } } /** * Add/remove particles. */ function resizeHandler() { // Resize the canvas styleCanvas(); var elWidth = element.offsetWidth; var elHeight = element.offsetHeight; // Remove particles that are outside the canvas for (var i = particles.length - 1; i >= 0; i--) { if (particles[i].position.x > elWidth || particles[i].position.y > elHeight) { particles.splice(i, 1); } }; // Adjust particle density var numParticles = Math.round((canvas.width * canvas.height) / options.density); if (numParticles > particles.length) { while (numParticles > particles.length) { var p = new Particle(); particles.push(p); } } else if (numParticles < particles.length) { particles.splice(numParticles); } // Re-index particles for (i = particles.length - 1; i >= 0; i--) { particles[i].setStackPos(i); }; } /** * Pause particle system */ function pause() { paused = true; } /** * Start particle system */ function start() { paused = false; draw(); } /** * Particle */ function Particle() { this.stackPos; this.active = true; this.layer = Math.ceil(Math.random() * 3); this.parallaxOffsetX = 0; this.parallaxOffsetY = 0; // Initial particle position this.position = { x: Math.ceil(Math.random() * canvas.width), y: Math.ceil(Math.random() * canvas.height) } // Random particle speed, within min and max values this.speed = {} switch (options.directionX) { case 'left': this.speed.x = +(-options.maxSpeedX + (Math.random() * options.maxSpeedX) - options.minSpeedX).toFixed(2); break; case 'right': this.speed.x = +((Math.random() * options.maxSpeedX) + options.minSpeedX).toFixed(2); break; default: this.speed.x = +((-options.maxSpeedX / 2) + (Math.random() * options.maxSpeedX)).toFixed(2); this.speed.x += this.speed.x > 0 ? options.minSpeedX : -options.minSpeedX; break; } switch (options.directionY) { case 'up': this.speed.y = +(-options.maxSpeedY + (Math.random() * options.maxSpeedY) - options.minSpeedY).toFixed(2); break; case 'down': this.speed.y = +((Math.random() * options.maxSpeedY) + options.minSpeedY).toFixed(2); break; default: this.speed.y = +((-options.maxSpeedY / 2) + (Math.random() * options.maxSpeedY)).toFixed(2); this.speed.x += this.speed.y > 0 ? options.minSpeedY : -options.minSpeedY; break; } } /** * Draw particle */ Particle.prototype.draw = function() { // Draw circle ctx.beginPath(); ctx.arc(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY, options.particleRadius / 2, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); // Draw lines ctx.beginPath(); // Iterate over all particles which are higher in the stack than this one for (var i = particles.length - 1; i > this.stackPos; i--) { var p2 = particles[i]; // Pythagorus theorum to get distance between two points var a = this.position.x - p2.position.x var b = this.position.y - p2.position.y var dist = Math.sqrt((a * a) + (b * b)).toFixed(2); // If the two particles are in proximity, join them if (dist < options.proximity) { ctx.moveTo(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY); if (options.curvedLines) { ctx.quadraticCurveTo(Math.max(p2.position.x, p2.position.x), Math.min(p2.position.y, p2.position.y), p2.position.x + p2.parallaxOffsetX, p2.position.y + p2.parallaxOffsetY); } else { ctx.lineTo(p2.position.x + p2.parallaxOffsetX, p2.position.y + p2.parallaxOffsetY); } } } ctx.stroke(); ctx.closePath(); } /** * update particle position */ Particle.prototype.updatePosition = function() { if (options.parallax) { if (orientationSupport && !desktop) { // Map tiltX range [-30,30] to range [0,winW] var ratioX = (winW - 0) / (30 - -30); pointerX = (tiltX - -30) * ratioX + 0; // Map tiltY range [-30,30] to range [0,winH] var ratioY = (winH - 0) / (30 - -30); pointerY = (tiltY - -30) * ratioY + 0; } else { pointerX = mouseX; pointerY = mouseY; } // Calculate parallax offsets this.parallaxTargX = (pointerX - (winW / 2)) / (options.parallaxMultiplier * this.layer); this.parallaxOffsetX += (this.parallaxTargX - this.parallaxOffsetX) / 10; // Easing equation this.parallaxTargY = (pointerY - (winH / 2)) / (options.parallaxMultiplier * this.layer); this.parallaxOffsetY += (this.parallaxTargY - this.parallaxOffsetY) / 10; // Easing equation } var elWidth = element.offsetWidth; var elHeight = element.offsetHeight; switch (options.directionX) { case 'left': if (this.position.x + this.speed.x + this.parallaxOffsetX < 0) { this.position.x = elWidth - this.parallaxOffsetX; } break; case 'right': if (this.position.x + this.speed.x + this.parallaxOffsetX > elWidth) { this.position.x = 0 - this.parallaxOffsetX; } break; default: // If particle has reached edge of canvas, reverse its direction if (this.position.x + this.speed.x + this.parallaxOffsetX > elWidth || this.position.x + this.speed.x + this.parallaxOffsetX < 0) { this.speed.x = -this.speed.x; } break; } switch (options.directionY) { case 'up': if (this.position.y + this.speed.y + this.parallaxOffsetY < 0) { this.position.y = elHeight - this.parallaxOffsetY; } break; case 'down': if (this.position.y + this.speed.y + this.parallaxOffsetY > elHeight) { this.position.y = 0 - this.parallaxOffsetY; } break; default: // If particle has reached edge of canvas, reverse its direction if (this.position.y + this.speed.y + this.parallaxOffsetY > elHeight || this.position.y + this.speed.y + this.parallaxOffsetY < 0) { this.speed.y = -this.speed.y; } break; } // Move particle this.position.x += this.speed.x; this.position.y += this.speed.y; } /** * Setter: particle stacking position */ Particle.prototype.setStackPos = function(i) { this.stackPos = i; } function option (key, val) { if (val) { options[key] = val; } else { return options[key]; } } function destroy() { console.log('destroy'); canvas.parentNode.removeChild(canvas); hook('onDestroy'); if ($) { $(element).removeData('plugin_' + pluginName); } } function hook(hookName) { if (options[hookName] !== undefined) { options[hookName].call(element); } } init(); return { option: option, destroy: destroy, start: start, pause: pause }; } window[pluginName] = function(elem, options) { return new Plugin(elem, options); }; window[pluginName].defaults = { minSpeedX: 0.1, maxSpeedX: 0.7, minSpeedY: 0.1, maxSpeedY: 0.7, directionX: 'center', // 'center', 'left' or 'right'. 'center' = dots bounce off edges directionY: 'center', // 'center', 'up' or 'down'. 'center' = dots bounce off edges density: 10000, // How many particles will be generated: one particle every n pixels dotColor: '#666666', lineColor: '#666666', particleRadius: 7, // Dot size lineWidth: 1, curvedLines: false, proximity: 100, // How close two dots need to be before they join parallax: true, parallaxMultiplier: 5, // The lower the number, the more extreme the parallax effect onInit: function() {}, onDestroy: function() {} }; // nothing wrong with hooking into jQuery if it's there... if ($) { $.fn[pluginName] = function(options) { if (typeof arguments[0] === 'string') { var methodName = arguments[0]; var args = Array.prototype.slice.call(arguments, 1); var returnVal; this.each(function() { if ($.data(this, 'plugin_' + pluginName) && typeof $.data(this, 'plugin_' + pluginName)[methodName] === 'function') { returnVal = $.data(this, 'plugin_' + pluginName)[methodName].apply(this, args); } }); if (returnVal !== undefined){ return returnVal; } else { return this; } } else if (typeof options === "object" || !options) { return this.each(function() { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); } }); } }; } })(window, document); (function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }());

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