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" <!DOCTYPE html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <style>
#flyer {
<head> width: 100%;
<title>quilt</title> max-width: 1000px;
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> }
</head> </style>
<body> <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 // generate random translations (unbounded, minimum of 10px)
january - march 2024 - to eternity var r_x = get_r_polarity() * (Math.random(50) + 10);
</pre> var r_y = get_r_polarity() * (Math.random(50) + 10);
</body>
// 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> <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"> <link rel="stylesheet" type="text/css" href="https://issue.xpub.nl/23/quilt/quilt.css">
</html> </html>

Write Preview
Loading…
Cancel
Save