JavaScript - In den Vollbild-Modus umschalten

Mit ein wenig JavaScript und CSS ist es möglich in den Vollbild-Modus umzuschalten.
Den Scroll-Effekt für das Bild finden Sie unter: Parallax Scrolling-Effekt

Dies wird ein Vollbild


<style>

div#fullscreen {
 
background-imageurl("bild.jpg");
 
background-sizecover;
 
background-attachmentfixed;
 
background-repeatno-repeat;
 
height650px;
 
padding25px;
 
borderSolid 1px Silver;
}

div#fullscreen:fullscreen {
 
font-size2em;
 
letter-spacing2px;
}

div.title {
 
colorOrangered;
}

button#button {
 
background-colorTransparent;
 
width250px;
 
borderSolid 1px rgba(86187248,0.8);
 
transitionbackground-color 0.5s;
}

button#button:hover {
 
cursorPointer;
 
background-colorrgba(135,206,250,0.8);
}
</
style>

<
div id="fullscreen">
 <
div class="title">Dies wird ein Vollbild</div>
 <
p><button type="button" id="button">Vollbild umschalten</button></p>
</
div>

<
script>
let fullscreen document.querySelector("#fullscreen");
let button document.querySelector("#button");

button.addEventListener("click", () => {
 if (!
document.fullscreenElement) {
  
fullscreen?.requestFullscreen();
  } else {
  
document.exitFullscreen();
 }
});
</
script>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<ul> Aufzählungsliste

CSS - Bild vergrößern mit dem „Checkbox Hack”

PHP - Bildanzeige je nach der Tageszeit

JavaScript - Erkennung für Chromium-basierte Browser

MySQL - Wie oft ist ein Eintrag in einer Spalte vorhanden