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-image: url("bild.jpg");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
height: 650px;
padding: 25px;
border: Solid 1px Silver;
}
div#fullscreen:fullscreen {
font-size: 2em;
letter-spacing: 2px;
}
div.title {
color: Orangered;
}
button#button {
background-color: Transparent;
width: 250px;
border: Solid 1px rgba(86, 187, 248,0.8);
transition: background-color 0.5s;
}
button#button:hover {
cursor: Pointer;
background-color: rgba(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.
<hgroup> Überschriften gruppieren
CSS - Animationen mit Keyframes
PHP - Lange Links automatisch kürzen