Fullscreen merupakan sebuah mode atau tampilan yang menampilkan seluruh layar pada perangkat.
Script full screen yang saya berikan ini
Terbuat dari javascript sebagai kode utama
Html button sebagai penghubung dan yang menjalankan javascript
CSS untuk desain tampilan
Oh ya saya memberikan Marquee ya biar seperti di blog saya
<style type='text/css'>
body{
background: black;
}
.bahh{
float: right;
}
#openfull,
#exitfull {
border: 1px;
cursor: pointer;
padding: 0;
margin: 0;
text-align: center;
width: 30px;
height: 25px;
float: left;
background:linear-gradient(45deg, #5E64EE, #5EEE66);
border-radius: 4px;
box-shadow: 1px 3px 4px black;
}
#openfull:active,
#exitfull:active,
#openfull:focus,
#exitfull:focus {
outline: 0;
}
#openfull svg,
#exitfull svg {
vertical-align: middle;
}
#exitfull {
display: none;
}
.marquee-text {
height: 26px;
display: block;
line-height: 30px;
overflow: hidden;
position: relative;
background: #ddd;
border-radius: 4px;
}
.marquee-text:before,
.marquee-text:after {
content: '';
position: absolute;
width: 5px;
height: 100%;
background: #ddd;
top: 0;
z-index: 2;
}
.marquee-text:before {
left: 0;
}
.marquee-text:after {
right: 0;
}
.marquee-text div {
height: 30px;
line-height: 30px;
font-size: 16px;
white-space: nowrap;
color: #555;
z-index: 1;
animation: marquee 15s linear infinite;
}
.marquee-text:hover div {
animation-play-state: paused
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
</div>
<div class="bahh">
<button aria-label="Open Fullscreen" id="openfull" onclick="openFullscreen(); alert ('peringatan Fullscreen di aktifkan');"><svg width="24" height="24" viewbox="0 0 24 24"><path fill="#fff" d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" /></path></svg></button>
<button class="bh" aria-label="Exit Fullscreen" id="exitfull" onclick="closeFullscreen(); alert ('Fullscreen di tutup ');"><svg width="24" height="24" viewbox="0 0 24 24"><path fill="#fff" d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" /></path></svg></button>
</div>
<div class="marquee-text">
<div><b><!--selamat datang di blog hamzahxou coba tools gratis nya:)-->selamat datang di blog Hamzahxou coba tools gratis nya</b>
</div>
<script>
//<![CDATA[
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
document.getElementById("openfull").style.display = "none";
document.getElementById("exitfull").style.display = "block";
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
document.getElementById("openfull").style.display = "block";
document.getElementById("exitfull").style.display = "none";
}
//]]>
</script>
<script type="text/javascript">
// Function text(){
// document.write(selamat datang di blog Hamzahxou coba tools gratis nya )
// }
</script>Demo kalian liat di atas itu ada Marquee sama tombol fullscreen
Bisa saling yang ini
<style type='text/css'>
body{
background: black;
}
.bahh{
float: right;
}
#openfull,
#exitfull {
border: 1px;
cursor: pointer;
padding: 0;
margin: 0;
text-align: center;
width: 30px;
height: 25px;
float: left;
background:linear-gradient(45deg, #5E64EE, #5EEE66);
border-radius: 4px;
box-shadow: 1px 3px 4px black;
}
#openfull:active,
#exitfull:active,
#openfull:focus,
#exitfull:focus {
outline: 0;
}
#openfull svg,
#exitfull svg {
vertical-align: middle;
}
#exitfull {
display: none;
}
</style>
</div>
<div class="bahh">
<button aria-label="Open Fullscreen" id="openfull" onclick="openFullscreen(); alert ('peringatan Fullscreen di aktifkan');"><svg width="24" height="24" viewbox="0 0 24 24"><path fill="#fff" d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" /></path></svg></button>
<button class="bh" aria-label="Exit Fullscreen" id="exitfull" onclick="closeFullscreen(); alert ('Fullscreen di tutup ');"><svg width="24" height="24" viewbox="0 0 24 24"><path fill="#fff" d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" /></path></svg></button>
</div>
<script>
//<![CDATA[
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
document.getElementById("openfull").style.display = "none";
document.getElementById("exitfull").style.display = "block";
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
document.getElementById("openfull").style.display = "block";
document.getElementById("exitfull").style.display = "none";
}
//]]>
</script>
<script type="text/javascript">
// Function text(){
// document.write(selamat datang di blog Hamzahxou coba tools gratis nya )
// }
</script>