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.

<mark> Physische Auszeichnung

CSS - Uhrzeitanzeige mal anders!

PHP - Inhalt auf einen bestimmten Zeitraum pro Tag begrenzen

JavaScript - CountUp

MySQL - Text in einer Spalte austauschen

Prägnante Linkbeschreibungen
Auch Links sind im Textfluss eine Art von Hervorhebungen. Sinnvollerweise sollten einzelne Wörter oder kurze Sätze als Link fungieren und nicht etwa ganze Textabsätze.