ตัวอย่างโค้ดทั้งหมด
</html>
<head>
<title>
WELCOME TO MY WEBSITE
</title>
<style>
body, html {
height: 100%;
margin:0;
background-image: url("https://source.unsplash.com/1600x900/?nature,water");
//background-image: url("https://picsum.photos/1500");
/** center the background image vertically and horizontally*/
background-position: center center;
/** removing tilings and repeatition*/
background-repeat: no-repeat;
/** to scale image to fit the screen */
background-size: cover;
/** fixed viewport against scroll ups and downs*/
background-attachment: fixed;
}
/** for responsiveness: changing pictures after 760px, mostly same pcitures of small size is used.*/
@media only screen and (max-width: 760px) {
body, html {
/* to improve page load speed on mobile internet connections */
background-image: url("https://picsum.photos/1500");
}
}
/** loader page */
#loader{
position: fixed;
width: 100%;
height: 100vh;
background: #fff url('https://i.pinimg.com/originals/44/7e/3f/447e3f941b28b743e009d6b36e4148c1.gif') no-repeat center;
background-size: 350px auto;
z-index: 999;
}
/** Content */
h1 {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: poppins;
}
</style>
</head>
<body>
<!-- loader page -->
<div id="loader"></div>
<!-- content -->
<div id="content">
<!-- Everything in your body should go under here-->
<h1>WELCOME TO MY WEBSITE</h1>
</div>
<!-- script loader page-->
<script>
let loader;
function loadNow(opacity) {
if (opacity <= 0) {
displayContent();
} else {
loader.style.opacity = opacity;
window.setTimeout(function() {
loadNow(opacity - 0.05);
}, 50);
}
}
function displayContent() {
loader.style.display = 'none';
document.getElementById('content').style.display = 'block';
}
document.addEventListener("DOMContentLoaded", function() {
loader = document.getElementById('loader');
loadNow(1);
});
</script>
</body>
</html>
<!--
More background colors and image links.
color url
#e3e3e3 https://i.pinimg.com/originals/66/d1/ee/66d1eecbb03cb25bac5a5e8d13a2ec58.gif
#ead37d https://i.pinimg.com/originals/fe/16/40/fe1640a16b3315ab3d8d003197f69e27.gif
#051833 https://i.pinimg.com/originals/0f/e3/e9/0fe3e9f74d70e5d9c62ffdaa95519417.gif
#00cbff https://i.pinimg.com/originals/6b/fe/44/6bfe44e3cf85cccec4a122c3b1510299.gif
https://i.pinimg.com/originals/7d/a7/c8/7da7c8c153dece39bc993839b192c94e.gif
#d5e8bd https://i.pinimg.com/originals/5b/45/07/5b4507f94ea7a2ebceab823c7cff1f61.gif
#e3e3e3 https://i.pinimg.com/originals/30/e1/bb/30e1bbc05fe2ed8c90572c6a0b6e54a6.gif
#f0f3f2 https://i.pinimg.com/originals/b7/0b/a8/b70ba8e47610c5c233ed64679417e164.gif
#fbfbfb https://i.pinimg.com/originals/3a/50/8d/3a508d38d2f22998120d750c425cd220.gif
#fff https://i.pinimg.com/originals/44/7e/3f/447e3f941b28b743e009d6b36e4148c1.gif
#fff https://i.pinimg.com/originals/9a/55/cf/9a55cfbe6d0b89f06c4daa673b765ce3.gif
#fff https://cdn.dribbble.com/users/416315/screenshots/4275501/media/81a14e385dee6f7ca9e90d578b72d2b8.gif
-->