9-fluid.html - bitreich-www - the bitreich www website generator
(HTM) git clone git://bitreich.org/bitreich-www/ git://enlrupgkhuxnvlhsf6lc3fziv5h2hhfrinws65d7roiv6bfj7d652fid.onion/bitreich-www/
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) Tags
---
9-fluid.html (2462B)
---
1 <div class="fluidanimationcanvas">
2 <canvas id="fluidCanvas"></canvas>
3 </div>
4 <style type="text/css">
5 .fluidanimationcanvas {
6 z-index: -1;
7 border-bottom: 2px solid var(--yellow);
8 background-color: rgba(0,0,0,1);
9 width: 100%;
10 height: 100%;
11 min-height: 600px;
12 max-height: none;
13 display: block;
14 position: absolute;
15 inset: 0%;
16 overflow: hidden;
17 }
18 </style>
19 <script type="text/javascript">
20 function loadFluidScript() {
21 // Check if the screen width is greater than 960px
22 if (screen.width > 960) {
23 // Dynamically add the fluid animation script to the <head>
24 const head = document.getElementsByTagName('head')[0];
25 const script = document.createElement('script');
26 script.type = 'text/javascript';
27 script.src = 'https://bitreich.org/fluid.js';
28 head.appendChild(script);
29 console.log("Running fluid animation script");
30
31 // Adjust the canvas size after the script is loaded
32 setTimeout(() => {
33 const canvas = document.getElementById("fluidCanvas");
34 if (canvas) {
35 // Override the inline attributes for width and height
36 canvas.removeAttribute("width");
37 canvas.removeAttribute("height");
38
39 // Apply custom width and height via JavaScript
40 canvas.width = window.innerWidth; // Set the canvas width to the window width
41 canvas.height = window.innerHeight; // Set the canvas height to the window height
42 canvas.style.width = "100%"; // Ensure canvas takes full width of its container
43 canvas.style.height = "auto"; // Maintain aspect ratio to prevent vertical overflow
44 console.log("Canvas dimensions successfully adjusted");
45 }
46 }, 1000); // Wait 1 second to ensure the fluid script is fully loaded before adjustments
47 }
48 }
49
50 // Load the function when the DOM is fully loaded
51 document.addEventListener('DOMContentLoaded', loadFluidScript);
52 </script>
53
54
55 <script>
56 // Check the flag every 100 milliseconds.
57 // If the flag is not set (loading animation has finished), execute the fluid script.
58 var checkInterval = setInterval(function() {
59 var loadingAnimationRunning = sessionStorage.getItem("loadingAnimationRunning");
60 if (!loadingAnimationRunning) {
61 clearInterval(checkInterval); // Stop checking
62 loadFluidScript(); // Execute the fluid script
63 }
64 }, 1000);
65 </script>
66