Nudista-Online/area-51
1
1
Fork 0
Code Issues 6 Pull requests Projects 1 Releases Packages Wiki Activity

Úprava souboru index.html

Browse source
This commit is contained in:
janrippl 2025-02-13 10:45:32 +01:00
parent 9264b44459
commit 33c5e41087
2 changed files with 556 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

556
index.html
View file

@ -1,7 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="cs"> <html lang="cs">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>White | responsive bootstrap3 html5 one page template</title> <title>White | responsive bootstrap3 html5 one page template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -12,16 +11,21 @@
<link href="style.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
<div class="content light-rays"> <div id='' style='background-color:#000; width:800px; height:300px; position:relative'><!-- id='holder' -->
<div id='effect' style='position:absolute; width:800px; height:1300px'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ismobilejs/0.4.1/isMobile.min.js'></script>
<div class="content light-rays glow">
<img width="100%" src="alien3.png" style=""> <img width="100%" src="alien3.png" style="">
<div style="margin-top: -15rem;"> <div class="glow" style="margin-top: -15.5rem; opacity: 30%;">
<div class="marquee"> <div class="marquee">
<div class="marquee_blur" aria-hidden="true"> <div class="marquee_blur" aria-hidden="true">
<p class="marquee_text">AREA-51 &middot; CZ!</p> <p class="marquee_text">AREA&mdash;51 &middot; CZ</p>
</div> </div>
<div class="marquee_clear"> <div class="marquee_clear">
<p class="marquee_text">AREA-51 &middot; CZ!</p> <p class="marquee_text">AREA&mdash;51 &middot; CZ</p>
</div> </div>
</div> </div>
</div> </div>
@ -30,5 +34,547 @@
I wanted to make a Gooey Marquee type effect, tried a couple of things, and ended up using two layers of text, one with the effect, and a clean one on top so that the text remains readable. I wanted to make a Gooey Marquee type effect, tried a couple of things, and ended up using two layers of text, one with the effect, and a clean one on top so that the text remains readable.
</p> </p>
</div> </div>
</div>
</div>
<script id="rendered-js" >
$(document).ready(function () {
var mobile = false;
//---
if (isMobile.phone || isMobile.tablet) {
mobile = true;
}
//---
var canvasWidth = 800;
var canvasHeight = 300;
//---
var canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.oncontextmenu = function (e) {
e.preventDefault();
};
if (!mobile) {
canvas.addEventListener('mousemove', mouseMoveHandler);
canvas.addEventListener('mousedown', mouseDownHandler);
canvas.addEventListener('mouseup', mouseUpHandler);
canvas.addEventListener('mouseenter', mouseEnterHandler);
canvas.addEventListener('mouseleave', mouseLeaveHandler);
$(canvas).css('cursor', 'pointer');
} else {
canvas.addEventListener('touchstart', touchStartHandler, false);
canvas.addEventListener('touchend', touchEndHandler, false);
canvas.addEventListener('touchmove', touchMoveHandler, false);
canvas.addEventListener('touchcancel', touchCancelHandler, false);
}
document.getElementById('effect').appendChild(canvas);
//---
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
var pix = imageData.data;
//---
var MATHPI180 = Math.PI / 180;
var MATHPI2 = Math.PI * 2;
var center = { x: canvas.width / 2, y: canvas.height / 2 };
//---
var mouseActive = false;
var mouseDown = false;
var mousePos = { x: center.x, y: center.y };
//---
var rotationSpeed = -1.00;
var rotationSpeedFactor = { x: 0, y: 0 };
rotationSpeedFactor.x = rotationSpeed / center.x;
rotationSpeedFactor.y = rotationSpeed / center.y;
var fov = 300;
var fovMin = 210;
var fovMax = fov;
var starHolderCount = 6666;
var starHolder = [];
var starBgHolder = [];
var starSpeed = 20;
var starSpeedMin = starSpeed;
var starSpeedMax = 200;
var starDistance = 8000;
var starRotation = 0;
var backgroundColor = { r: 0, g: 0, b: 0, a: 0 };
var colorInvertValue = 0;
//---
function clearImageData() {
for (var i = 0, l = pix.length; i < l; i += 4) {
pix[i] = backgroundColor.r;
pix[i + 1] = backgroundColor.g;
pix[i + 2] = backgroundColor.b;
pix[i + 3] = backgroundColor.a;
}
};
function setPixel(x, y, r, g, b, a) {
var i = (x + y * canvasWidth) * 4;
pix[i] = r;
pix[i + 1] = g;
pix[i + 2] = b;
pix[i + 3] = a;
};
function setPixelAdditive(x, y, r, g, b, a) {
var i = (x + y * canvasWidth) * 4;
pix[i] = pix[i] + r;
pix[i + 1] = pix[i + 1] + g;
pix[i + 2] = pix[i + 2] + b;
pix[i + 3] = a;
};
//---
function drawLine(x1, y1, x2, y2, r, g, b, a) {
var dx = Math.abs(x2 - x1);
var dy = Math.abs(y2 - y1);
var sx = x1 < x2 ? 1 : -1;
var sy = y1 < y2 ? 1 : -1;
var err = dx - dy;
var lx = x1;
var ly = y1;
while (true) {
if (lx > 0 && lx < canvasWidth && ly > 0 && ly < canvasHeight) {
setPixel(lx, ly, r, g, b, a);
}
if (lx === x2 && ly === y2)
break;
var e2 = 2 * err;
if (e2 > -dx) {
err -= dy;
lx += sx;
}
if (e2 < dy) {
err += dx;
ly += sy;
}
}
};
//---
function addParticle(x, y, z, ox, oy, oz) {
var particle = {};
particle.x = x;
particle.y = y;
particle.z = z;
particle.ox = ox;
particle.oy = oy;
particle.x2d = 0;
particle.y2d = 0;
return particle;
};
function addParticles() {
var i;
var x, y, z;
var colorValue;
var particle;
for (i = 0; i < starHolderCount / 3; i++) {
x = Math.random() * 24000 - 12000;
y = Math.random() * 4500 - 2250;
z = Math.round(Math.random() * starDistance); //Math.random() * 700 - 350;
colorValue = Math.floor(Math.random() * 55) + 5;
particle = addParticle(x, y, z, x, y, z);
particle.color = { r: colorValue, g: colorValue, b: colorValue, a: 255 };
starBgHolder.push(particle);
}
for (i = 0; i < starHolderCount; i++) {
x = Math.random() * 10000 - 5000;
y = Math.random() * 10000 - 5000;
z = Math.round(Math.random() * starDistance); //Math.random() * 700 - 350;
colorValue = Math.floor(Math.random() * 155) + 100;
particle = addParticle(x, y, z, x, y, z);
particle.color = { r: colorValue, g: colorValue, b: colorValue, a: 255 };
particle.oColor = { r: colorValue, g: colorValue, b: colorValue, a: 255 };
particle.w = 1;
particle.distance = starDistance - z;
particle.distanceTotal = Math.round(starDistance + fov - particle.w);
starHolder.push(particle);
}
};
//---
window.requestAnimFrame = function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
}();
function animloop() {
requestAnimFrame(animloop);
render();
};
function render() {
clearImageData();
//---
var i, j, l, k, m, n;
//---
var rx, rz;
var star;
var scale;
//---
if (mouseActive) {
starSpeed += 2;
if (starSpeed > starSpeedMax)
starSpeed = starSpeedMax;
} else {
starSpeed -= 1;
if (starSpeed < starSpeedMin)
starSpeed = starSpeedMin;
}
//---
if (!mouseActive) {
fov += 0.5;
if (fov > fovMax)
fov = fovMax;
} else {
fov -= 1;
if (fov < fovMin)
fov = fovMin;
}
//---
var warpSpeedValue;
if (mobile) {
warpSpeedValue = starSpeed * (starSpeed / starSpeedMax);
} else {
warpSpeedValue = starSpeed * (starSpeed / (starSpeedMax / 2));
}
//---
for (i = 0, l = starBgHolder.length; i < l; i++) {
star = starBgHolder[i];
scale = fov / (fov + star.z);
star.x2d = star.x * scale + center.x;
star.y2d = star.y * scale + center.y;
if (star.x2d > 0 && star.x2d < canvasWidth && star.y2d > 0 && star.y2d < canvasHeight) {
setPixel(star.x2d | 0, star.y2d | 0, star.color.r, star.color.g, star.color.b, 255);
}
}
//---
for (i = 0, l = starHolder.length; i < l; i++) {
star = starHolder[i];
star.z -= starSpeed;
star.distance += starSpeed;
if (star.z < -fov + star.w) {
star.z = starDistance;
star.distance = 0;
}
//---
//star color
var distancePercent = star.distance / star.distanceTotal;
star.color.r = Math.floor(star.oColor.r * distancePercent);
star.color.g = Math.floor(star.oColor.g * distancePercent);
star.color.b = Math.floor(star.oColor.b * distancePercent);
//---
//star draw
scale = fov / (fov + star.z);
star.x2d = star.x * scale + center.x;
star.y2d = star.y * scale + center.y;
if (star.x2d > 0 && star.x2d < canvasWidth && star.y2d > 0 && star.y2d < canvasHeight) {
setPixelAdditive(star.x2d | 0, star.y2d | 0, star.color.r, star.color.g, star.color.b, 255);
}
if (starSpeed != starSpeedMin) {
var nz = star.z + warpSpeedValue;
scale = fov / (fov + nz);
var x2d = star.x * scale + center.x;
var y2d = star.y * scale + center.y;
if (x2d > 0 && x2d < canvasWidth && y2d > 0 && y2d < canvasHeight) {
drawLine(star.x2d | 0, star.y2d | 0, x2d | 0, y2d | 0, star.color.r, star.color.g, star.color.b, 255);
}
}
if (mouseDown) {
//rotation
var radians = MATHPI180 * starRotation;
var cos = Math.cos(radians);
var sin = Math.sin(radians);
star.x = cos * (star.ox - center.x) + sin * (star.oy - center.y) + center.x,
star.y = cos * (star.oy - center.y) - sin * (star.ox - center.x) + center.y;
}
}
//---
ctx.putImageData(imageData, 0, 0);
//---
if (mouseActive) {
center.x += (mousePos.x - center.x) * 0.015;
} else {
center.x += (canvas.width / 2 - center.x) * 0.015;
}
//---
if (mouseDown) {
starRotation -= 0.5;
}
};
//---
function mouseMoveHandler(event) {
mousePos = getMousePos(canvas, event);
};
function mouseEnterHandler(event) {
mouseActive = true;
};
function mouseLeaveHandler(event) {
mouseActive = false;
mouseDown = false;
};
function mouseDownHandler(event) {
mouseDown = true;
speed = 0;
};
function mouseUpHandler(event) {
mouseDown = false;
speed = 0.25;
};
//---
function getMousePos(canvas, event) {
var rect = canvas.getBoundingClientRect();
return { x: event.clientX - rect.left, y: event.clientY - rect.top };
};
//---
function touchStartHandler(event) {
event.preventDefault();
mouseDown = true;
mouseActive = true;
};
function touchEndHandler(event) {
event.preventDefault();
mouseDown = false;
mouseActive = false;
};
function touchMoveHandler(event) {
event.preventDefault();
mousePos = getTouchPos(canvas, event);
};
function touchCancelHandler(event) {
mouseDown = false;
mouseActive = false;
};
//---
function getTouchPos(canvas, event) {
var rect = canvas.getBoundingClientRect();
return { x: event.touches[0].clientX - rect.left, y: event.touches[0].clientY - rect.top };
};
//---
addParticles();
animloop();
});
//# sourceURL=pen.js
</script>
</body> </body>
</html> </html>

5
style.css
View file

@ -14,6 +14,11 @@ body {
font-size: 24px; font-size: 24px;
} }
.glow {
background-color: white; /* for the 1px in the center */
box-shadow: 0 0 50px 70px white;
}
.content { .content {
width: 95%; width: 95%;
max-width: 40ch; max-width: 40ch;