Úprava souboru index.html
This commit is contained in:
janrippl
parent
9264b44459
commit
33c5e41087
2 changed files with 556 additions and 5 deletions
556
index.html
556
index.html
|
|
@ -1,7 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="cs">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>White | responsive bootstrap3 html5 one page template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -12,16 +11,21 @@
|
|||
<link href="style.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<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="">
|
||||
<div style="margin-top: -15rem;">
|
||||
<div class="glow" style="margin-top: -15.5rem; opacity: 30%;">
|
||||
|
||||
<div class="marquee">
|
||||
<div class="marquee_blur" aria-hidden="true">
|
||||
<p class="marquee_text">AREA-51 · CZ!</p>
|
||||
<p class="marquee_text">AREA—51 · CZ</p>
|
||||
</div>
|
||||
<div class="marquee_clear">
|
||||
<p class="marquee_text">AREA-51 · CZ!</p>
|
||||
<p class="marquee_text">AREA—51 · CZ</p>
|
||||
</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.
|
||||
</p>
|
||||
</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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,11 @@ body {
|
|||
font-size: 24px;
|
||||
}
|
||||
|
||||
.glow {
|
||||
background-color: white; /* for the 1px in the center */
|
||||
box-shadow: 0 0 50px 70px white;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 95%;
|
||||
max-width: 40ch;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue