Website (#28)
* page update * w * update * m * better looking page * better looking page * Better looking website
This commit is contained in:
Hu Kaixiang
GitHub
parent
ffbac4b7d1
commit
fe60b76197
|
|
@ -0,0 +1,75 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
|
||||
body {
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
font-size: 2em;
|
||||
padding: 5px;
|
||||
color: #ffc200;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: 'IBM Plex Sans Hebrew', sans-serif;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-family: 'IBM Plex Sans Hebrew', sans-serif;
|
||||
color: white;
|
||||
font-size: 1.2em;
|
||||
color: rgb(0, 179, 255);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: rgb(112, 224, 255);
|
||||
text-decoration: underline;
|
||||
transition: all .4s ease-in-out;
|
||||
}
|
||||
|
||||
#header-img {
|
||||
padding: 5px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#screenshot-img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 30%;
|
||||
height: auto;
|
||||
}
|
||||
/*scroll bar style*/
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(0, 179, 255) /*#555*/;
|
||||
}
|
||||
#particles {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: -99;
|
||||
}
|
||||
38
index.html
38
index.html
|
|
@ -8,13 +8,12 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" type="image/png" href="./img/favicon.ico"/>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="./css/styles.css">
|
||||
<title>Planet Launcher</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
animation: fadeInAnimation ease 3s;
|
||||
animation-iteration-count: 1;
|
||||
animation-iteration-count: s1;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes fadeInAnimation {
|
||||
|
|
@ -29,19 +28,24 @@
|
|||
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainimage">
|
||||
<img src="./img/planet-logo.png" height="175" width=auto>
|
||||
</div>
|
||||
<div class="beginningtext">
|
||||
<h1 class="mainheader">Planet Launcher</h1>
|
||||
<h3 class="secondheader">An interactive launcher for minecraft pi edition, reborn!</h3>
|
||||
<p>
|
||||
<a href="https://github.com/mcpiscript/Planet" target="_blank" class="githubpagehyperlink">GitHub page</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="screenshotimage">
|
||||
<img src="./img/screenshot.png" alt="screenshot of launcher" class="launcherimage">
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div id="particles"></div>
|
||||
<section>
|
||||
<img id="header-img" src="./img/planet-logo.png" height="175" width=auto>
|
||||
<h1>Planet Launcher</h1>
|
||||
<h3>An interactive launcher for minecraft pi edition, reborn!</h3>
|
||||
<p>
|
||||
<a class="link" href="https://github.com/mcpiscript/Planet" target="_blank">GitHub page</a>
|
||||
</p>
|
||||
</section>
|
||||
<section id="screenshots">
|
||||
<img id="screenshot-img" src="./img/screenshot.png" alt="screenshot of launcher">
|
||||
</section>
|
||||
</main>
|
||||
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
|
||||
<script>
|
||||
particlesJS.load('particles', '/Planet/particle-config.json', function () {
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,109 @@
|
|||
{
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 80,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "image",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"image": {
|
||||
"src": "/Planet/img/planet-logo.png"
|
||||
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.5,
|
||||
"random": false,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 3,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 40,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": true,
|
||||
"distance": 150,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"width": 1
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 6,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
|
|
@ -0,0 +1,559 @@
|
|||
/*!
|
||||
* A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
|
||||
*
|
||||
* @author Marc Bruederlin <hello@marcbruederlin.com>
|
||||
* @version 2.2.3
|
||||
* @license MIT
|
||||
* @see https://github.com/marcbruederlin/particles.js
|
||||
*/
|
||||
|
||||
/* exported Particles */
|
||||
var Particles = (function (window, document) {
|
||||
'use strict';
|
||||
|
||||
var Plugin, Particle = {};
|
||||
|
||||
function particleCompareFunc(p1, p2) {
|
||||
if (p1.x < p2.x) {
|
||||
return -1;
|
||||
} else if (p1.x > p2.x) {
|
||||
return 1;
|
||||
} else if (p1.y < p2.y) {
|
||||
return -1;
|
||||
} else if (p1.y > p2.y) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Represents the plugin.
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
Plugin = (function () {
|
||||
function Plugin() {
|
||||
var _ = this;
|
||||
|
||||
_.defaults = {
|
||||
responsive: null,
|
||||
selector: null,
|
||||
maxParticles: 100,
|
||||
sizeVariations: 3,
|
||||
showParticles: true,
|
||||
speed: 0.5,
|
||||
color: '#000000',
|
||||
minDistance: 120,
|
||||
connectParticles: false,
|
||||
};
|
||||
|
||||
_.element = null;
|
||||
_.context = null;
|
||||
_.ratio = null;
|
||||
_.breakpoints = [];
|
||||
_.activeBreakpoint = null;
|
||||
_.breakpointSettings = [];
|
||||
_.originalSettings = null;
|
||||
_.storage = [];
|
||||
_.usingPolyfill = false;
|
||||
}
|
||||
|
||||
return Plugin;
|
||||
}());
|
||||
|
||||
/**
|
||||
* Public mehtod to initialize the plugin with user settings.
|
||||
*
|
||||
* @public
|
||||
* @param {object} settings
|
||||
*/
|
||||
Plugin.prototype.init = function (settings) {
|
||||
var _ = this;
|
||||
|
||||
_.options = _._extend(_.defaults, settings);
|
||||
_.originalSettings = JSON.parse(JSON.stringify(_.options));
|
||||
|
||||
_._animate = _._animate.bind(_);
|
||||
|
||||
_._initializeCanvas();
|
||||
_._initializeEvents();
|
||||
_._registerBreakpoints();
|
||||
_._checkResponsive();
|
||||
_._initializeStorage();
|
||||
_._animate();
|
||||
|
||||
return _;
|
||||
};
|
||||
|
||||
/**
|
||||
* Public method to destroy the plugin.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
Plugin.prototype.destroy = function () {
|
||||
var _ = this;
|
||||
|
||||
_.storage = [];
|
||||
_.element.remove();
|
||||
|
||||
window.removeEventListener('resize', _.listener, false);
|
||||
window.clearTimeout(_._animation);
|
||||
cancelAnimationFrame(_._animation);
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup the canvas element.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
Plugin.prototype._initializeCanvas = function () {
|
||||
var _ = this, devicePixelRatio, backingStoreRatio;
|
||||
|
||||
if (!_.options.selector) {
|
||||
console.warn('particles.js: No selector specified! Check https://github.com/marcbruederlin/particles.js#options');
|
||||
return false;
|
||||
}
|
||||
|
||||
_.element = document.querySelector(_.options.selector);
|
||||
_.context = _.element.getContext('2d');
|
||||
|
||||
devicePixelRatio = window.devicePixelRatio || 1;
|
||||
backingStoreRatio = _.context.webkitBackingStorePixelRatio || _.context.mozBackingStorePixelRatio || _.context.msBackingStorePixelRatio ||
|
||||
_.context.oBackingStorePixelRatio || _.context.backingStorePixelRatio || 1;
|
||||
|
||||
_.ratio = devicePixelRatio / backingStoreRatio;
|
||||
_.element.width = (_.element.offsetParent) ? _.element.offsetParent.clientWidth * _.ratio : _.element.clientWidth * _.ratio;
|
||||
|
||||
if (_.element.offsetParent && _.element.offsetParent.nodeName === 'BODY') {
|
||||
_.element.height = window.innerHeight * _.ratio;
|
||||
} else {
|
||||
_.element.height = (_.element.offsetParent) ? _.element.offsetParent.clientHeight * _.ratio : _.element.clientHeight * _.ratio;
|
||||
}
|
||||
_.element.style.width = '100%';
|
||||
_.element.style.height = '100%';
|
||||
|
||||
_.context.scale(_.ratio, _.ratio);
|
||||
};
|
||||
|
||||
/**
|
||||
* Register event listeners.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
Plugin.prototype._initializeEvents = function () {
|
||||
var _ = this;
|
||||
|
||||
_.listener = function () { _._resize(); }.bind(this);
|
||||
window.addEventListener('resize', _.listener, false);
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize the particle storage.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
Plugin.prototype._initializeStorage = function () {
|
||||
var _ = this;
|
||||
|
||||
_.storage = [];
|
||||
|
||||
for (var i = _.options.maxParticles; i--;) {
|
||||
_.storage.push(new Particle(_.context, _.options));
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Register responsive breakpoints if the user declared some.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
Plugin.prototype._registerBreakpoints = function () {
|
||||
var _ = this, breakpoint, currentBreakpoint, l, responsiveSettings = _.options.responsive || null;
|
||||
|
||||
if (typeof responsiveSettings === 'object' && responsiveSettings !== null && responsiveSettings.length) {
|
||||
for (breakpoint in responsiveSettings) {
|
||||
l = _.breakpoints.length - 1;
|
||||
currentBreakpoint = responsiveSettings[breakpoint].breakpoint;
|
||||
|
||||
if (responsiveSettings.hasOwnProperty(breakpoint)) {
|
||||
while (l >= 0) {
|
||||
if (_.breakpoints[l] && _.breakpoints[l] === currentBreakpoint) {
|
||||
_.breakpoints.splice(l, 1);
|
||||
}
|
||||
|
||||
l--;
|
||||
}
|
||||
|
||||
_.breakpoints.push(currentBreakpoint);
|
||||
_.breakpointSettings[currentBreakpoint] = responsiveSettings[breakpoint].options;
|
||||
}
|
||||
}
|
||||
|
||||
_.breakpoints.sort(function (a, b) {
|
||||
return b - a;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if a breakpoint is active and load the breakpoints options.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
Plugin.prototype._checkResponsive = function () {
|
||||
var _ = this, breakpoint, targetBreakpoint = false, windowWidth = window.innerWidth;
|
||||
|
||||
if (_.options.responsive && _.options.responsive.length && _.options.responsive !== null) {
|
||||
targetBreakpoint = null;
|
||||
|
||||
for (breakpoint in _.breakpoints) {
|
||||
if (_.breakpoints.hasOwnProperty(breakpoint)) {
|
||||
if (windowWidth <= _.breakpoints[breakpoint]) {
|
||||
targetBreakpoint = _.breakpoints[breakpoint];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (targetBreakpoint !== null) {
|
||||
_.activeBreakpoint = targetBreakpoint;
|
||||
_.options = _._extend(_.options, _.breakpointSettings[targetBreakpoint]);
|
||||
} else {
|
||||
if (_.activeBreakpoint !== null) {
|
||||
_.activeBreakpoint = null;
|
||||
targetBreakpoint = null;
|
||||
|
||||
_.options = _._extend(_.options, _.originalSettings);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Rebuild the storage and update the canvas.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
Plugin.prototype._refresh = function () {
|
||||
var _ = this;
|
||||
|
||||
_._initializeStorage();
|
||||
_._draw();
|
||||
};
|
||||
|
||||
/**
|
||||
* Kick off various things on window resize.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
Plugin.prototype._resize = function () {
|
||||
var _ = this;
|
||||
|
||||
_.element.width = (_.element.offsetParent) ? _.element.offsetParent.clientWidth * _.ratio : _.element.clientWidth * _.ratio;
|
||||
|
||||
if (_.element.offsetParent && _.element.offsetParent.nodeName === 'BODY') {
|
||||
_.element.height = window.innerHeight * _.ratio;
|
||||
} else {
|
||||
_.element.height = (_.element.offsetParent) ? _.element.offsetParent.clientHeight * _.ratio : _.element.clientHeight * _.ratio;
|
||||
}
|
||||
|
||||
_.context.scale(_.ratio, _.ratio);
|
||||
|
||||
clearTimeout(_.windowDelay);
|
||||
|
||||
_.windowDelay = window.setTimeout(function () {
|
||||
_._checkResponsive();
|
||||
_._refresh();
|
||||
}, 50);
|
||||
};
|
||||
|
||||
/**
|
||||
* Animates the plugin particles by calling the draw method.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
Plugin.prototype._animate = function () {
|
||||
var _ = this;
|
||||
|
||||
_._draw();
|
||||
_._animation = window.requestAnimFrame(_._animate);
|
||||
};
|
||||
|
||||
/**
|
||||
* Restarts the particles animation by calling _animate.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
Plugin.prototype.resumeAnimation = function () {
|
||||
var _ = this;
|
||||
|
||||
if (!_._animation) {
|
||||
_._animate();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Pauses/stops the particle animation.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
Plugin.prototype.pauseAnimation = function () {
|
||||
var _ = this;
|
||||
|
||||
if (!_._animation) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (_.usingPolyfill) {
|
||||
window.clearTimeout(_._animation);
|
||||
} else {
|
||||
var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame;
|
||||
cancelAnimationFrame(_._animation);
|
||||
}
|
||||
|
||||
_._animation = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Draws the plugin particles.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
Plugin.prototype._draw = function () {
|
||||
var _ = this,
|
||||
element = _.element,
|
||||
parentWidth = (element.offsetParent) ? element.offsetParent.clientWidth : element.clientWidth,
|
||||
parentHeight = (element.offsetParent) ? element.offsetParent.clientHeight : element.clientHeight,
|
||||
showParticles = _.options.showParticles,
|
||||
storage = _.storage;
|
||||
|
||||
if (element.offsetParent && element.offsetParent.nodeName === 'BODY') {
|
||||
parentHeight = window.innerHeight;
|
||||
}
|
||||
|
||||
_.context.clearRect(0, 0, element.width, element.height);
|
||||
_.context.beginPath();
|
||||
|
||||
for (var i = storage.length; i--;) {
|
||||
var particle = storage[i];
|
||||
|
||||
if (showParticles) {
|
||||
particle._draw();
|
||||
}
|
||||
|
||||
particle._updateCoordinates(parentWidth, parentHeight);
|
||||
}
|
||||
|
||||
if (_.options.connectParticles) {
|
||||
storage.sort(particleCompareFunc);
|
||||
_._updateEdges();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the edges.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
Plugin.prototype._updateEdges = function () {
|
||||
var _ = this,
|
||||
minDistance = _.options.minDistance,
|
||||
sqrt = Math.sqrt,
|
||||
abs = Math.abs,
|
||||
storage = _.storage,
|
||||
storageLength = storage.length;
|
||||
|
||||
for (var i = 0; i < storageLength; i++) {
|
||||
var p1 = storage[i];
|
||||
|
||||
for (var j = i + 1; j < storageLength; j++) {
|
||||
var p2 = storage[j],
|
||||
distance, r = p1.x - p2.x, dy = p1.y - p2.y;
|
||||
|
||||
distance = sqrt(r * r + dy * dy);
|
||||
|
||||
if (abs(r) > minDistance) {
|
||||
break;
|
||||
}
|
||||
|
||||
if (distance <= minDistance) {
|
||||
_._drawEdge(p1, p2, (1.2 - distance / minDistance));
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Draws an edge between two points.
|
||||
*
|
||||
* @private
|
||||
* @param {Particle} p1
|
||||
* @param {Particle} p2
|
||||
* @param {number} opacity
|
||||
*/
|
||||
Plugin.prototype._drawEdge = function (p1, p2, opacity) {
|
||||
var _ = this,
|
||||
gradient = _.context.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
|
||||
|
||||
var color1 = this._hex2rgb(p1.color);
|
||||
var color2 = this._hex2rgb(p2.color);
|
||||
|
||||
gradient.addColorStop(0, 'rgba(' + color1.r + ',' + color1.g + ',' + color1.b + ',' + opacity + ')');
|
||||
gradient.addColorStop(1, 'rgba(' + color2.r + ',' + color2.g + ',' + color2.b + ',' + opacity + ')');
|
||||
|
||||
_.context.beginPath();
|
||||
_.context.strokeStyle = gradient;
|
||||
_.context.moveTo(p1.x, p1.y);
|
||||
_.context.lineTo(p2.x, p2.y);
|
||||
_.context.stroke();
|
||||
_.context.fill();
|
||||
_.context.closePath();
|
||||
};
|
||||
|
||||
/**
|
||||
* Merges the keys of two objects.
|
||||
*
|
||||
* @private
|
||||
* @param {object} source
|
||||
* @param {object} obj
|
||||
*/
|
||||
Plugin.prototype._extend = function (source, obj) {
|
||||
Object.keys(obj).forEach(function (key) {
|
||||
source[key] = obj[key];
|
||||
});
|
||||
|
||||
return source;
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts a hex string to a rgb object.
|
||||
*
|
||||
* @private
|
||||
* @param {string} hex
|
||||
* @return {object}
|
||||
*/
|
||||
Plugin.prototype._hex2rgb = function (hex) {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Represents a single particle.
|
||||
*
|
||||
* @constructor
|
||||
* @param {object} context
|
||||
* @param {object} options
|
||||
*/
|
||||
Particle = function (context, options) {
|
||||
var _ = this,
|
||||
random = Math.random,
|
||||
speed = options.speed,
|
||||
color = (options.color instanceof Array) ? options.color[Math.floor(Math.random() * options.color.length)] : options.color;
|
||||
|
||||
_.context = context;
|
||||
_.options = options;
|
||||
|
||||
var canvas = document.querySelector(options.selector);
|
||||
_.x = (canvas.offsetParent) ? random() * canvas.offsetParent.clientWidth : random() * canvas.clientWidth;
|
||||
|
||||
if (canvas.offsetParent && canvas.offsetParent.nodeName === 'BODY') {
|
||||
_.y = random() * window.innerHeight;
|
||||
} else {
|
||||
_.y = (canvas.offsetParent) ? random() * canvas.offsetParent.clientHeight : random() * canvas.clientHeight;
|
||||
}
|
||||
|
||||
_.vx = random() * speed * 2 - speed;
|
||||
_.vy = random() * speed * 2 - speed;
|
||||
_.radius = random() * random() * options.sizeVariations;
|
||||
_.color = color;
|
||||
|
||||
_._draw();
|
||||
};
|
||||
|
||||
/**
|
||||
* The particles draw function (renders the circle).
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
Particle.prototype._draw = function () {
|
||||
var _ = this;
|
||||
|
||||
_.context.save();
|
||||
_.context.translate(_.x, _.y);
|
||||
_.context.moveTo(0, 0);
|
||||
_.context.beginPath();
|
||||
_.context.arc(0, 0, _.radius, 0, Math.PI * 2, false);
|
||||
_.context.fillStyle = _.color;
|
||||
_.context.fill();
|
||||
_.context.restore();
|
||||
};
|
||||
|
||||
/**
|
||||
* This updates the particles coordinates.
|
||||
*
|
||||
* @private
|
||||
* @param parentWidth
|
||||
* @param parentHeight
|
||||
*/
|
||||
Particle.prototype._updateCoordinates = function (parentWidth, parentHeight) {
|
||||
var _ = this,
|
||||
|
||||
x = _.x + this.vx,
|
||||
y = _.y + this.vy,
|
||||
radius = _.radius;
|
||||
|
||||
if (x + radius > parentWidth) {
|
||||
x = radius;
|
||||
} else if (x - radius < 0) {
|
||||
x = parentWidth - radius;
|
||||
}
|
||||
|
||||
if (y + radius > parentHeight) {
|
||||
y = radius;
|
||||
} else if (y - radius < 0) {
|
||||
y = parentHeight - radius;
|
||||
}
|
||||
|
||||
_.x = x;
|
||||
_.y = y;
|
||||
};
|
||||
|
||||
/**
|
||||
* A polyfill for requestAnimFrame.
|
||||
*
|
||||
* @return {function}
|
||||
*/
|
||||
window.requestAnimFrame = (function () {
|
||||
var _ = this,
|
||||
requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
|
||||
|
||||
if (requestAnimationFrame) {
|
||||
return requestAnimationFrame;
|
||||
}
|
||||
|
||||
_._usingPolyfill = true;
|
||||
|
||||
return function (callback) {
|
||||
return window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
})();
|
||||
|
||||
return new Plugin();
|
||||
})(window, document);
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define('Particles', function () { return Particles; });
|
||||
} else if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = Particles;
|
||||
} else {
|
||||
window.Particles = Particles;
|
||||
}
|
||||
})();
|
||||
41
styles.css
41
styles.css
|
|
@ -1,41 +0,0 @@
|
|||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.beginningtext {
|
||||
text-align: center;
|
||||
}
|
||||
.mainimage {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
|
||||
}
|
||||
|
||||
.mainheader {
|
||||
font-family: 'IBM Plex Sans Hebrew', sans-serif;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.secondheader {
|
||||
font-family: 'IBM Plex Sans Hebrew', sans-serif;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.launcherimage {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 70%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.githubpagehyperlink {
|
||||
font-family: 'IBM Plex Sans Hebrew', sans-serif;
|
||||
color: white;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
Loading…
Reference in New Issue