diff options
| author | Daniel Jones <daniel@danieljon.es> | 2025-02-22 05:26:02 +1100 |
|---|---|---|
| committer | Daniel Jones <daniel@danieljon.es> | 2025-02-22 05:26:02 +1100 |
| commit | 1559fb1c7db22e7f90a03c01051250b3a8faf4a5 (patch) | |
| tree | 82573f51b0eb96ffeb96323c751f9f85ae269670 | |
| parent | 7cd0ddb019d2b7466e74e548f219dee4d1728f0f (diff) | |
| download | websitegenerator-master.tar.gz websitegenerator-master.zip | |
| -rw-r--r-- | template.txt | 96 |
1 files changed, 94 insertions, 2 deletions
diff --git a/template.txt b/template.txt index b96b5e8..7915e3e 100644 --- a/template.txt +++ b/template.txt @@ -373,7 +373,101 @@ to { font-size: 20px; font-weight: bold; } + +.ufo { + position: fixed; + width: 100px; + height: 100px; + background-image: url('https://danieljones.au/media/ufo.gif'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + pointer-events: none; + z-index: -50; + opacity: 0; + top: 50%; + left: 50%; + transform-origin: center; +} + +@keyframes fly-across { + 0% { + opacity: 0; + transform: translate(var(--start-x), var(--start-y)) rotate(var(--angle)); + } + 10% { + opacity: 0.5; + } + 90% { + opacity: 0.5; + } + 100% { + opacity: 0; + transform: translate(var(--end-x), var(--end-y)) rotate(var(--angle)); + } +} </style> + +<script> +class UFO { + constructor() { + this.element = document.createElement('div'); + this.element.className = 'ufo'; + document.body.appendChild(this.element); + this.animate(); + } + + getRandomPosition() { + const screenWidth = window.innerWidth; + const screenHeight = window.innerHeight; + const diagonal = Math.sqrt(screenWidth * screenWidth + screenHeight * screenHeight); + + // Random angle for direction of travel + const angle = Math.random() * 360; + const rad = angle * Math.PI / 180; + + // Distance from center to ensure off-screen start/end + const distance = diagonal; + + // Calculate start and end positions + const startX = Math.cos(rad) * distance; + const startY = Math.sin(rad) * distance; + const endX = Math.cos(rad + Math.PI) * distance; + const endY = Math.sin(rad + Math.PI) * distance; + + return { + startX, + startY, + endX, + endY, + angle: angle // UFO points in direction of travel + }; + } + + animate() { + const pos = this.getRandomPosition(); + + this.element.style.setProperty('--start-x', `${pos.startX}px`); + this.element.style.setProperty('--start-y', `${pos.startY}px`); + this.element.style.setProperty('--end-x', `${pos.endX}px`); + this.element.style.setProperty('--end-y', `${pos.endY}px`); + this.element.style.setProperty('--angle', `${pos.angle}deg`); + + this.element.style.animation = 'none'; + void this.element.offsetWidth; // Force reflow + this.element.style.animation = 'fly-across 6s linear'; + + // Schedule next animation + this.element.addEventListener('animationend', () => { + setTimeout(() => this.animate(), Math.random() * 5000); + }, { once: true }); + } +} + +document.addEventListener('DOMContentLoaded', () => { + new UFO(); +}); +</script> </head> <body> <script> @@ -595,5 +689,3 @@ document.addEventListener('DOMContentLoaded', () => { }); </script> <div class="running-sprite2"></div> -</body> -</html> |