Bemerkenswertes vom Blick auf Walter Giers' "Kleiner Stern" (1990) https://www.victorgiers.com/stern/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.htm 3.4KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <meta name="author" content="Victor Giers">
  7. <meta name="date" content="2020-02-14">
  8. <meta property="og:url" content="https://www.victorgiers.com/stern/index.htm" />
  9. <meta property="og:type" content="animation" />
  10. <meta property="og:title" content="Kleiner Stern" />
  11. <meta property="og:description" content="Digitales Replikate von Walter Giers' 'Kleiner Stern' (1990)" />
  12. <meta property="og:image" content="https://www.victorgiers.com/stern/img/thumbnail_512.jpg" />
  13. <link rel="icon" type="image/vnd.microsoft.icon" href="img/favicon.ico">
  14. <script language="javascript" type="text/javascript" src="p5.min.js"></script>
  15. <script language="javascript" type="text/javascript" src="stern.js"></script>
  16. <style>
  17. body { background-color: #6b718d; display: flex; position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; align-items: center; justify-content: center; border:none; margin:0; padding:0; overflow:hidden; z-index:1;}
  18. #fsb { position: absolute; right: 20px; bottom: 20px; }
  19. #nca { position: absolute; width: 100%; height: 100%; }
  20. </style>
  21. </head>
  22. <body>
  23. <div id="nca"></div>
  24. <button id="fsb" onclick="toggleFullscreen();">Vollbild</button>
  25. <script>
  26. var elem = document.documentElement;
  27. var fullScreen = false;
  28. function toggleFullscreen() {
  29. if(fullScreen){
  30. if (document.exitFullscreen) {
  31. document.exitFullscreen();
  32. } else if (document.mozCancelFullScreen) { /* Firefox */
  33. document.mozCancelFullScreen();
  34. } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
  35. document.webkitExitFullscreen();
  36. } else if (document.msExitFullscreen) { /* IE/Edge */
  37. document.msExitFullscreen();
  38. }
  39. } else {
  40. if (elem.requestFullscreen) {
  41. elem.requestFullscreen();
  42. } else if (elem.mozRequestFullScreen) { /* Firefox */
  43. elem.mozRequestFullScreen();
  44. } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
  45. elem.webkitRequestFullscreen();
  46. } else if (elem.msRequestFullscreen) { /* IE/Edge */
  47. elem.msRequestFullscreen();
  48. }
  49. document.getElementById('fsb').style.display = "none";
  50. document.getElementById('nca').style.cursor = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='), url(images/blank.cur), none"
  51. }
  52. fullscreen = !fullscreen;
  53. }
  54. if (document.addEventListener)
  55. {
  56. document.addEventListener('fullscreenchange', exitHandler, false);
  57. document.addEventListener('mozfullscreenchange', exitHandler, false);
  58. document.addEventListener('MSFullscreenChange', exitHandler, false);
  59. document.addEventListener('webkitfullscreenchange', exitHandler, false);
  60. }
  61. function exitHandler()
  62. {
  63. if (document.webkitIsFullScreen === false || document.mozFullScreen === false || document.msFullscreenElement === false)
  64. {
  65. document.getElementById('fsb').style.display = "";
  66. document.getElementById('nca').style.cursor = "";
  67. }
  68. }
  69. </script>
  70. </body>
  71. </html>