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.

<col> Tabellenspalten vordefinieren

CSS - Container vertikal drehen

PHP - Alle Sessions ausgeben

JavaScript - Checkboxen JavaScript-Funktion zuweisen

MySQL - Das Alter von Personen ermitteln

Sinnvolle Kommentare
Ein HTML-, JavaScript oder PHP-Quelltext, der zum Beispiel mit Leerzeilen und Einrückungen übersichtlich aufgebaut ist und an entscheidenden Stellen Umbrüche und Kommentare aufweist, ist deutlich leichter zu pflegen.
Auch wenn Sie Teile des Quelltextes auf einer anderen Seite benötigen, können Sie den mit Kommentaren versehenen Code leichter nachvollziehen!