MirrorMirror
/
PairDrop
mirror of https://github.com/schlagmichdoch/PairDrop.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Background animation: offset for large screens / cleanup

This commit is contained in:
RobinLinus 2020-12-20 22:08:16 +01:00
parent b40c5f2053
commit c6fb8899ef
1 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
client/scripts/ui.js
View File

@ -546,29 +546,24 @@ window.addEventListener('beforeinstallprompt', e => {
// Background Animation
Events.on('load', () => {
var requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var c = document.createElement('canvas');
let c = document.createElement('canvas');
document.body.appendChild(c);
var style = c.style;
let style = c.style;
style.width = '100%';
style.position = 'absolute';
style.zIndex = -1;
style.top = 0;
style.left = 0;
var ctx = c.getContext('2d');
var x0, y0, w, h, dw;
let ctx = c.getContext('2d');
let x0, y0, w, h, dw;
function init() {
w = window.innerWidth;
h = window.innerHeight;
c.width = w;
c.height = h;
var offset = h > 380 ? 100 : 65;
let offset = h > 380 ? 100 : 65;
offset = h > 800 ? 116 : h;
x0 = w / 2;
y0 = h - offset;
dw = Math.max(w, h, 1000) / 13;
@ -578,28 +573,28 @@ Events.on('load', () => {
function drawCicrle(radius) {
ctx.beginPath();
var color = Math.round(255 * (1 - radius / Math.max(w, h)));
let color = Math.round(255 * (1 - radius / Math.max(w, h)));
ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)';
ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.lineWidth = 2;
}
var step = 0;
let step = 0;
function drawCircles() {
ctx.clearRect(0, 0, w, h);
for (var i = 0; i < 8; i++) {
for (let i = 0; i < 8; i++) {
drawCicrle(dw * i + step % dw);
}
step += 1;
}
var loading = true;
let loading = true;
function animate() {
if (loading || step % dw < dw - 5) {
requestAnimFrame(function() {
requestAnimationFrame(function() {
drawCircles();
animate();
});