background: transparent;
}
+ html, body {
+ /* To create our "window" onto the scene, we're going to slide the
+ * SVG off the left-hand side of the screen, and we don't want
+ * scroll bars to appear. */
+ overflow: hidden;
+ }
+
+ svg {
+ /* Set the height to 100% of the screen, which we'll keep; and the
+ * initial position to (0,0), which we're going to change
+ * every time the window is resized, because the exact amount
+ * that we have to slide the SVG to the left to get the ticket
+ * into the center will change. */
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100%;
+ }
+
/* The blinking fade in/out animation for the ticket date and time */
@keyframes blink {
25% {
/* Define, load, and specify the custom font we use for the ticket
* date, time, and service name. */
@font-face {
- font-family: "CharmBypass Ticket Text";
+ font-family: "CharmBypass Regular";
src:
- url("data:font/woff2;base64,@TICKETFONT@") format("woff2")
+ url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
}
#servicename, #tickettime, #ticketdate {
- font-family: "CharmBypass Ticket Text" !important;
+ font-family: "CharmBypass Regular";
+ }
+
+ @font-face {
+ font-family: "CharmBypass Bold";
+ src:
+ url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
+ }
+
+ #serviceletter {
+ font-family: "CharmBypass Bold";
}
/************************/
}
#bus {
- animation: busroll 20s linear infinite;
+ animation: busroll 23s linear infinite;
}
}
#tram {
- animation: tramroll 15s linear infinite;
+ animation: tramroll 17s linear infinite;
}
}
#train {
- animation: trainroll 10s linear infinite;
+ animation: trainroll 11s linear infinite;
}
/* The trees move a little faster than the clouds */
animation: treescopypass 30s linear infinite;
}
+
+
+ /* City skyline */
+ @keyframes cityscroll {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+ }
+
+ #city {
+ /* The city moves faster than the clouds but slower
+ * than the trees */
+ animation: cityscroll 35s linear infinite;
+ }
+
+ @keyframes citycopyscroll {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+ }
+
+ #citycopy {
+ /* The city moves faster than the clouds but slower
+ * than the trees */
+ animation: citycopyscroll 35s linear infinite;
+ }
</style>
</head>
tt = document.getElementById("tickettime");
tt.firstChild.textContent = date.toLocaleTimeString();
- td = document.getElementById("ticketdate");
+ const td = document.getElementById("ticketdate");
const dateopts = {
day: "2-digit",
month: "2-digit",
}
document.body.addEventListener("click", swap_colors);
+
+
+ /*************************************************/
+ /* Finally, center the ticket within the browser */
+ /*************************************************/
+ function center_ticket() {
+ /* We're relying on the SVG being the full height of the
+ * viewport already, and on the aspect ratio being
+ * preserved. First, find the center of the ticket. */
+ const r = document.getElementById("ticket").getBoundingClientRect();
+ const c = r.left + (r.width / 2);
+
+ /* That's the center-line of the ticket. We want to move it to
+ * the center-line of the viewport. */
+ const vc = document.documentElement.clientWidth / 2;
+
+ /* This is how much we need to translate the SVG */
+ const delta = vc - c;
+
+ /* But before we can set the absolute left-coordinate of the
+ * SVG, we need to know where it is now. Note: without the
+ * "px" this doesn't default to pixels like CSS does. */
+ const svg = document.querySelector("svg");
+ svg.style.left = (svg.getBoundingClientRect().left + delta) + "px";
+ }
+
+ /* Re-center it when the window is resized */
+ window.addEventListener("resize", center_ticket);
+
+ /* Center it once when the page has loaded, too */
+ window.addEventListener("load", center_ticket);
</script>
</body>
</html>