Erzeugt eine Laufschrift, die einmal komplett um das Fenster geht. Text kann man bei dem Beispiel direkt wechseln
Code
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Figcaption figure flip boards</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
<style>
* {
box-sizing: border-box;
}
#marquee {
border: 12px solid black;
height: 100%;
left: 0;
pointer-events: none;
position: fixed;
top: 0;
width: 100%;
}
.marq-input {
border: 1px solid black;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
font-size: 16px;
left: 50%;
max-width: calc(100% - 44px);
outline: 0;
padding: .5em .75em;
position: fixed;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50%;
}
.marq-input:active, .marq-input:focus {
border-color: blue;
box-shadow: 2px 2px 0 rgba(0, 0, 255, 0.5);
}
@media screen and (max-width: 640px) {
.marq-input {
font-size: 12px;
width: 75%;
}
}
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> </head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-core.min.js"></script>
<body>
<input class="marq-input" type="text" value="hallo basti du geiler bock" spellcheck="false">
<script>
paper.install(window);
var marqInput = document.querySelector('.marq-input');
var canvasEl = document.createElement('canvas');
canvasEl.setAttribute('resize', 'true');
canvasEl.id = 'marquee';
document.body.appendChild(canvasEl);
var canvas = document.getElementById('marquee');
var testText = 'A';
var textAttrs = {
fontFamily: 'monospace',
fontSize: 18,
fontWeight: 'bold',
leading: 18
};
var marqGutter = 1;
var marqCharWidth = '10px';
var marqPath = null;
var marqChars = [];
var marqTime = 10;
var endText = '?';
function measureCharWidth() {
var testChar = new paper.PointText(textAttrs);
testChar.content = testText;
marqCharWidth = Math.ceil(testChar.bounds.width);
testChar.remove();
};
function winChanged() {
newMarquee();
};
function clearMarquee() {
if (marqPath) {
marqPath.remove();
marqPath = null;
}
if (marqChars.length) {
marqChars.forEach(function (char) {
return char.remove();
});
marqChars = [];
}
};
function newMarquee() {
var text = marqInput.value.toUpperCase();
clearMarquee();
var pathGutter = marqCharWidth * 2 + marqGutter;
var pathWidth = paper.view.size.width - pathGutter;
var pathHeight = paper.view.size.height - pathGutter;
marqPath = new paper.Path.Rectangle({
center: paper.view.center,
size: [pathWidth, pathHeight],
radius: 4
});
var marqCharCount = Math.round(marqPath.length / marqCharWidth);
var marqText = text.repeat(marqCharCount / text.length + 1);
if (marqText.includes(' ')) {
if (!marqText.startsWith(' ') && !endText.endsWith(' ')) {
endText += ' ';
}
}
marqText = marqText.slice(0, -(marqText.length - marqCharCount + endText.length)) + endText;
var marqTextArr = marqText.split('');
marqTextArr.forEach(function (char, i) {
var pathLoc = marqPath.getLocationAt(i * marqCharWidth % marqPath.length);
var marqChar = new paper.PointText(textAttrs);
marqChar.content = char;
marqChar.position = pathLoc.point;
marqChar.rotation = pathLoc.tangent.angle;
marqChar.onFrame = function (e) {
var offset = marqTime + i * marqCharWidth + e.count;
var loc = marqPath.getLocationAt(offset % marqPath.length);
if (loc) {
this.position = loc.point;
this.rotation = loc.tangent.angle;
}
};
marqChars.push(marqChar);
});
};
function focusMarqInput() {
var inputVal = marqInput.value;
marqInput.focus();
marqInput.value = '';
marqInput.value = inputVal;
};
function initMarquee() {
paper.setup(canvas);
measureCharWidth();
newMarquee();
window.addEventListener('resize', winChanged);
window.addEventListener('orientationchange', winChanged);
paper.view.onFrame = function (e) {
return marqTime = e.count;
};
};
function initMarqInput() {
focusMarqInput();
marqInput.addEventListener('keyup', newMarquee);
};
window.onload = function () {
initMarquee();
initMarqInput();
};
</script>
</html>