New Loading Screen For Site

Developer
Matt Cowley
Size
4,263 Kb
Views
95,128
  1. New Loading Screen For Site Previews
  2. New Loading Screen For Site HTML Codes
  3. New Loading Screen For Site CSS Codes
  4. New Loading Screen For Site JS Codes

How do I make an new loading screen for site?

Never actually used...Idea & outline code from http://codepen.io/Yakudoo/pen/NqKvRY/ Thanks Yakudoo!. What is a new loading screen for site? How do you make a new loading screen for site? This script and codes were developed by Matt Cowley on 12 June 2022, Sunday.

New Loading Screen For Site Previews
IQ Test

New Loading Screen For Site - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>New Loading Screen For Site</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="myCanvas"></canvas> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenLite.min.js'></script>
<script src='http://dat-gui.googlecode.com/git/build/dat.gui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

New Loading Screen For Site - Script Codes CSS Codes

body, html { background-color: #000; overflow: hidden;
}
canvas { position: absolute; margin: auto; width: 2000; height: 1000; top: 0; bottom: 0; left: 0; right: 0; background-color: #000; overflow: hidden;
}

New Loading Screen For Site - Script Codes JS Codes

var viewWidth = 2000, viewHeight = 1000, mouseX = mouseY = mouseOldX = mouseOldY = 0, C = document.getElementById('myCanvas'), c = C.getContext('2d'), triW = 14, triH = 18, neighbours = ["side", "top", "bottom"], speedTrailAppear = 1, speedTrailDisappear = .1, speedTriOpen = 1, trailMaxLength = 18, trailIntervalCreation = 50, delayBeforeDisappear = 5, cols, rows, tris, randomAlpha = true, colors = [ //greens '#05391e', '#004b25', '#006d3c', '#059849', '#15ae44', '#52b933', '#78c340', '#b2cd53', //blues '#0c1a36', '#01235d', '#0b3f7a', '#0561a6', '#007ecb', '#32b2fa', '#54cefc', '#91dffa' ];
C.width = viewWidth;
C.height = viewHeight;
Triangle = function(pos, column, row) { this.selectedForTrail = false; this.pos = pos; this.col = column; this.row = row; this.alpha = this.tAlpha = 1; this.color = colors[Math.floor(Math.random() * colors.length)]; this.rgb = hexToRgb(this.color); this.opened = false; this.isLeft = (this.pos % 2); this.tX1 = (this.isLeft) ? (this.col + 1) * triW : this.col * triW; this.tX2 = (this.isLeft) ? this.col * triW : (this.col + 1) * triW; this.tX3 = (this.isLeft) ? (this.col + 1) * triW : this.col * triW; this.x1 = this.tX1; this.x2 = this.tX1; this.x3 = this.tX1; this.tY1 = .5 * this.row * triH; this.tY2 = .5 * (this.row + 1) * triH; this.tY3 = .5 * (this.row + 2) * triH; this.y1 = this.tY1; this.y2 = this.tY1; this.y3 = this.tY1; this.tweenClose, this.tweenOpen; this.draw = function() { c.fillStyle = 'rgba(' + this.rgb.r + ',' + this.rgb.g + ',' + this.rgb.b + ',' + this.alpha + ')'; c.beginPath(); c.moveTo(this.x1, this.y1); c.lineTo(this.x2, this.y2); c.lineTo(this.x3, this.y3); c.closePath(); c.fill(); } this.open = function(direction, targetSpeed, targetAlpha, targetDelay) { if (!this.opened || targetAlpha > this.tAlpha) { if (this.tweenClose) this.tweenClose.kill(); this.direction = direction || "top"; this.opened = true; this.delay = targetDelay || 0; this.tAlpha = targetAlpha; this.tSpeed = targetSpeed || 1.5; if (this.direction == "side") { this.x1 = this.x2 = this.x3 = this.tX1; this.y1 = this.tY1; this.y2 = this.tY2; this.y3 = this.tY3; } else if (this.direction == "top") { this.x1 = (this.tX2 + this.tX3) / 2; this.x2 = this.tX2; this.x3 = this.tX3; this.y1 = (this.tY2 + this.tY3) / 2; this.y2 = this.tY2; this.y3 = this.tY3; } else if (this.direction == "bottom") { this.x1 = this.tX1; this.x2 = this.tX2; this.x3 = (this.tX1 + this.tX2) / 2; this.y1 = this.tY1; this.y2 = this.tY2; this.y3 = (this.tY1 + this.tY2) / 2; } this.tweenOpen = TweenLite.to(this, this.tSpeed, { x1: this.tX1, x2: this.tX2, x3: this.tX3, y1: this.tY1, y2: this.tY2, y3: this.tY3, alpha: this.tAlpha, ease: Strong.easeInOut, delay: this.delay }); } } this.close = function(direction, targetSpeed, targetDelay) { if (this.opened) { this.direction = direction || "top"; this.delay = targetDelay || 1; this.tSpeed = targetSpeed || .8; this.opened = false; var closeX1, closeX2, closeX3, closeY1, closeY2, closeY3; if (this.direction == "side") { closeX1 = closeX2 = closeX3 = this.tX1; closeY1 = this.tY1; closeY2 = this.tY2; closeY3 = this.tY3; } else if (this.direction == "top") { closeX1 = (this.tX2 + this.tX3) / 2; closeX2 = this.tX2; closeX3 = this.tX3; closeY1 = (this.tY2 + this.tY3) / 2; closeY2 = this.tY2; closeY3 = this.tY3; } else if (this.direction == "bottom") { closeX1 = this.tX1; closeX2 = this.tX2; closeX3 = (this.tX1 + this.tX2) / 2; closeY1 = this.tY1; closeY2 = this.tY2; closeY3 = (this.tY1 + this.tY2) / 2; } if (this.tweenClose) this.tweenClose.kill(); this.tweenClose = TweenLite.to(this, this.tSpeed, { x1: closeX1, x2: closeX2, x3: closeX3, y1: closeY1, y2: closeY2, y3: closeY3, alpha: 0, ease: Strong.easeInOut, delay: this.delay }); } }
}
function handleMouseMove(e){ mouseX = event.clientX - rectCanvas.left; mouseY = event.clientY - rectCanvas.top; mouseSpeedX = mouseX - mouseOldX; mouseSpeedY = mouseY - mouseOldY; if (Math.abs(mouseSpeedX)>Math.abs(mouseSpeedY)){ mouseDirection = "h"; }else{ mouseDirection = "v"; } mouseOldX = mouseX; mouseOldY = mouseY; var tcol = Math.floor(mouseX/triW); var trow = Math.floor((mouseY-triH/4)/(triH/2)); var trianglePos = tcol + (trow*cols); var ts = tris[trianglePos]; var openDirection; for (var i=0;i<tris.length;i++){ var tt = tris[i]; if (tt == ts){ if (mouseDirection == "v"){ if (mouseSpeedY>0){	openDirection = "bottom"; }else{ openDirection = "top";	} }else { // mouse direction horizontal if (mouseSpeedX>0){ if (tt.isLeft){ openDirection = "bottom"; }else{ openDirection = "side"; } }else{ if (tt.isLeft){ openDirection = "side"; }else{ openDirection = "bottom"; } } } tt.open(openDirection, .5, 1, 0); }else{ tt.close(); } } draw();
}
function unselectTris() { for (var i = 0; i < tris.length; i++) { tris[i].selectedForTrail = false; }
}
function createTrail() { unselectTris(); var currentTri; var trailLength = Math.floor(Math.random() * trailMaxLength - 2) + 2; var index = Math.round(Math.random() * tris.length); startTri = tris[index]; startTri.selectedForTrail = true; currentTri = { tri: startTri, openDir: "side", closeDir: "side" }; for (var i = 0; i < trailLength; i++) { var o = getNeighbour(currentTri.tri); if (o != null) { o.tri.selectedForTrail = true; var opacity = (randomAlpha) ? Math.random() : 1; currentTri.tri.closeDir = o.openDir; currentTri.tri.open(currentTri.openDir, speedTriOpen, opacity, i * speedTrailAppear); currentTri.tri.close(currentTri.closeDir, 1, delayBeforeDisappear + i * speedTrailDisappear); currentTri = o; } else { currentTri.tri.open(currentTri.openDir, speedTriOpen, opacity, (i + 1) * speedTrailAppear); currentTri.tri.close(currentTri.closeDir, 1, delayBeforeDisappear + (i + 1) * speedTrailDisappear); break; } }
}
function getNeighbour(t) { shuffleArray(neighbours); for (var i = 0; i < neighbours.length; i++) { if (neighbours[i] == "top") { if (t.row != 0 && !tris[t.pos - cols].selectedForTrail && !tris[t.pos - cols].opened) { return { tri: tris[t.pos - cols], openDir: "top", closeDir: "top" }; } } else if (neighbours[i] == "bottom") { if (t.row != rows - 1 && !tris[t.pos + cols].selectedForTrail && !tris[t.pos + cols].opened) { return { tri: tris[t.pos + cols], openDir: "bottom", closeDir: "top" }; } } else { if (t.isLeft && t.col != cols - 1 && !tris[t.pos + 1].selectedForTrail && !tris[t.pos + 1].opened) { return { tri: tris[t.pos + 1], openDir: "side", closeDir: "top" }; } else if (!t.isLeft && t.col != 0 && !tris[t.pos - 1].selectedForTrail && !tris[t.pos - 1].opened) { return { tri: tris[t.pos - 1], openDir: "side", closeDir: "top" }; } } } return null;
}
function draw() { c.clearRect(0, 0, C.width, C.height); for (var i = 0; i < tris.length; i++) { tris[i].draw(); }
}
function handleResize() { rectCanvas = C.getBoundingClientRect();
}
function hexToRgb(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;
}
function shuffleArray(o) { for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o;
}
function initDoc() { initParams(); //document.onmousemove = handleMouseMove; window.addEventListener("resize", handleResize); TweenLite.ticker.addEventListener("tick", draw); handleResize();
}
function initParams() { cols = Math.floor(viewWidth / triW); cols = (cols % 2) ? cols : cols - 1; // => keep it odd rows = Math.floor(viewHeight / triH) * 2; tris = [];
}
function initGrid() { for (var j = 0; j < rows; j++) { for (var i = 0; i < cols; i++) { var pos = i + (j * cols); var triangle = new Triangle(pos, i, j); tris.push(triangle); triangle.draw(); } }
}
var interval;
function start() { if (interval) clearInterval(interval); initParams(); initGrid(); interval = setInterval(createTrail, trailIntervalCreation); createTrail();
}
initDoc();
start();
New Loading Screen For Site - Script Codes
New Loading Screen For Site - Script Codes
Home Page Home
Developer Matt Cowley
Username MattCowley
Uploaded June 12, 2022
Rating 3
Size 4,263 Kb
Views 95,128
Do you need developer help for New Loading Screen For Site?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Cowley (MattCowley) Script Codes
Name
Unreal Designs Server Default Page
Matt Cowley - Console Site
OxmeadJB Landing Page
A New Blink - Coming Soon
Paypal Order
Sign
NerdSports Landing Page
Email Signature
Sinclair Research Computers
UD System - Domain Not Found
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!