XPUB
/
SI23
19
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Update landing page to include animated flyer

Browse Source
main
Nyxaeroz 8 months ago
parent c149ceccf1
commit 6428ec5948
2 changed files with 561 additions and 37 deletions
Show Stats Download Patch File Download Diff File

510
web/flyer.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 984 KiB

74
web/index.html
Unescape Escape View File

@ -1,43 +1,57 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>quilt</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<!DOCTYPE html>
<html>
<style>
#flyer {
width: 100%;
max-width: 1000px;
}
</style>
<body>
<pre>
_| _| _| _|
_|_|_| _| _| _| _|_|_|_| _|_|_| _|_|_|
_| _| _| _| _| _| _| _| _| _| _| _|
_| _| _| _| _| _| _| _| _| _| _| _|
_|_|_| _|_|_| _| _| _|_| _| _| _| _|_|_|
_| _|
_| _|_|
<!-- the flyer svg -->
<object id="flyer" type="image/svg+xml" data="flyer.svg" ></object>
_| _|_| _|
_|_|_| _| _| _|_| _|_|_| _|_|_| _|_|_|_| _| _|_|
_| _| _| _|_|_|_| _|_| _| _| _|_| _| _|_|
_| _| _| _| _| _| _| _|_| _| _|
_| _| _| _| _| _|_|_| _|_|_| _|_| _|
</body>
<script>
// function to get a random polarity, returns 1 or -1
function get_r_polarity() {
var r = Math.floor(Math.random() * 2);;
if (r==0) return 1;
return -1;
}
// get the svg element in the DOM
var flyer_obj = document.getElementById("flyer");
_|
_| _| _|_|_| _|_|_|_| _| _| _| _|_| _|_|
_| _| _| _| _| _| _|_| _|_|_|_|
_| _| _| _| _| _| _| _|
_|_|_| _|_|_| _|_| _|_|_| _| _|_|_|
// start animation once the svg element is loaded
flyer_obj.addEventListener("load",function(){
// fetch the svg structure and find all elements belonging to the class 'moveable'
var svg_doc = flyer_obj.contentDocument;
var moveables = svg_doc.getElementsByClassName("moveable");
// function to move one random element of the class 'moveable'
function move_svg_el() {
// generate a random id
var r_id = Math.floor(Math.random() * moveables.length);
special issue 23
january - march 2024 - to eternity
</pre>
</body>
// generate random translations (unbounded, minimum of 10px)
var r_x = get_r_polarity() * (Math.random(50) + 10);
var r_y = get_r_polarity() * (Math.random(50) + 10);
// translate the selected element with the generated distances
var s = 'translate(' + r_x.toString() + ',' + r_y.toString() + ')';
moveables[r_id].setAttribute('transform',s);
}
// eveny 100ms, call the function that animates one element
var timer = setInterval(move_svg_el, 200);
}, false);
</script>
<script src="https://issue.xpub.nl/23/quilt/quilt.js" data-cutFileName="false" data-cutFileName="false"></script>
<link rel="stylesheet" type="text/css" href="https://issue.xpub.nl/23/quilt/quilt.css">
</html>

Write Preview
Loading…
Cancel
Save