1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- <!DOCTYPE html>
-
- <html>
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="author" content="Victor Giers">
- <meta name="date" content="2020-02-14">
- <meta property="og:url" content="https://www.victorgiers.com/stern/index.htm" />
- <meta property="og:type" content="animation" />
- <meta property="og:title" content="Kleiner Stern" />
- <meta property="og:description" content="Digitales Replikate von Walter Giers' 'Kleiner Stern' (1990)" />
- <meta property="og:image" content="https://www.victorgiers.com/stern/img/thumbnail_512.jpg" />
- <link rel="icon" type="image/vnd.microsoft.icon" href="img/favicon.ico">
-
- <script language="javascript" type="text/javascript" src="p5.min.js"></script>
- <script language="javascript" type="text/javascript" src="stern.js"></script>
- <style>
- 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;}
- #fsb { position: absolute; right: 20px; bottom: 20px; }
- #nca { position: absolute; width: 100%; height: 100%; }
- </style>
- </head>
- <body>
- <div id="nca"></div>
- <button id="fsb" onclick="toggleFullscreen();">Vollbild</button>
- <script>
- var elem = document.documentElement;
- var fullScreen = false;
- function toggleFullscreen() {
- if(fullScreen){
- if (document.exitFullscreen) {
- document.exitFullscreen();
- } else if (document.mozCancelFullScreen) { /* Firefox */
- document.mozCancelFullScreen();
- } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
- document.webkitExitFullscreen();
- } else if (document.msExitFullscreen) { /* IE/Edge */
- document.msExitFullscreen();
- }
- } else {
- if (elem.requestFullscreen) {
- elem.requestFullscreen();
- } else if (elem.mozRequestFullScreen) { /* Firefox */
- elem.mozRequestFullScreen();
- } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
- elem.webkitRequestFullscreen();
- } else if (elem.msRequestFullscreen) { /* IE/Edge */
- elem.msRequestFullscreen();
- }
- document.getElementById('fsb').style.display = "none";
- document.getElementById('nca').style.cursor = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='), url(images/blank.cur), none"
- }
- fullscreen = !fullscreen;
- }
-
- if (document.addEventListener)
- {
- document.addEventListener('fullscreenchange', exitHandler, false);
- document.addEventListener('mozfullscreenchange', exitHandler, false);
- document.addEventListener('MSFullscreenChange', exitHandler, false);
- document.addEventListener('webkitfullscreenchange', exitHandler, false);
- }
- function exitHandler()
- {
- if (document.webkitIsFullScreen === false || document.mozFullScreen === false || document.msFullscreenElement === false)
- {
- document.getElementById('fsb').style.display = "";
- document.getElementById('nca').style.cursor = "";
- }
- }
- </script>
- </body>
- </html>
|