Skip to content

Instantly share code, notes, and snippets.

@Rowan-Bird
Created January 30, 2021 19:46
Show Gist options
  • Select an option

  • Save Rowan-Bird/c63917bc0acb8449f68cc7c14535a7cf to your computer and use it in GitHub Desktop.

Select an option

Save Rowan-Bird/c63917bc0acb8449f68cc7c14535a7cf to your computer and use it in GitHub Desktop.
Windows 95 setup
<div id="BG">Windows 95 setup</div>
<div id="Progressbar"><div id="myProgress">
<div id="myBar"></div>
</div>
<div id="fixed">Copying files...</div>
</div>
<div id="wrapper"><img src="https://i.ibb.co/Z818BHj/Screenshot-1.png" alt="Screenshot-1" border="0" style="height: 95%; width: 96%;" hidden /> <img src="https://i.ibb.co/2ZG6wg4/Screenshot-2.png" alt="Screenshot-1" border="0" style="height: 95%; width: 96%;" hidden /><img src="https://i.ibb.co/bQGM68B/Screenshot-3.png" alt="Screenshot-1" border="0" style="height: 96%; width: 96%;" hidden /><img src="https://i.ibb.co/FwGsjfC/Screenshot-4.png" alt="Screenshot-1" border="0" style="height: 95%; width: 96%;" hidden /><img src="https://i.ibb.co/FwGsjfC/Screenshot-4.png" alt="Screenshot-1" border="0" style="height: 95%; width: 96%;" hidden /><img src="https://i.ibb.co/hs6rZH9/Screenshot-5.png" alt="Screenshot-1" border="0" style="height: 95%; width: 96%;" hidden /><img src="https://i.ibb.co/TPnt5Tp/Screenshot-6.png.png" alt="Screenshot-1" border="0" style="height: 95%; width: 96%;" hidden /><img src="https://i.ibb.co/cLZrSp4/Screenshot-7.png" alt="Screenshot-1" border="0" style="height: 95%; width: 96%;" hidden /><img src="https://i.ibb.co/Rz5sn5C/Screenshot-8.png" alt="Screenshot-1" border="0" style="height: 95%; width: 96%;" hidden /><img src="https://i.ibb.co/CmJPZQ9/Screenshot-9.png" alt="Screenshot-1" border="0" style="height: 95%; width: 96%;" hidden /><img src="https://i.ibb.co/4tZ2wP8/Screenshot-10.png" alt="Screenshot-1" border="0" style="height: 95%; width: 96%;" hidden /><img src="https://i.ibb.co/TPnt5Tp/Screenshot-6.png.png" alt="Screenshot-1" border="0" style="height: 95%; width: 96%;" hidden /><img src="https://i.ibb.co/H7R4GcG/Screenshot-11.png" alt="Screenshot-1" border="0" style="height: 95%; width: 96%;" hidden /><img src="https://i.ibb.co/XxZF9yN/Screenshot-12.png" alt="Screenshot-1" border="0" style="height: 95%; width: 96%;" hidden /></div>
var currentImageIndex = -1,
maxImageIndex = 0,
images = [],
changeInterval = 9000;
// Prepares relevant variables to cycle throguh images
var setUp = function () {
images = document.images;
maxImageIndex = images.length;
currentImageIndex = 0;
};
// Changes the banner currently being displayed
var changeBanner = function () {
var i;
currentImageIndex =
currentImageIndex >= maxImageIndex - 1 ? 0 : (currentImageIndex += 1);
for (i = 0; i < maxImageIndex; i += 1) {
images[i].hidden = i !== currentImageIndex;
}
};
// A function which is triggered following the `load` event
window.onload = function () {
setUp();
images[currentImageIndex].hidden = false; // show the first banner image;
setInterval(changeBanner, changeInterval); // following a delay, keep changing the banner image by the specified interval
};
#Progressbar {
position: fixed;
width: 95%;
height: 50px;
margin-left: 0%;
background: #c0c0c0;
bottom: 0px;
left: 6%;
}
#fixed {
padding-left: 15px;
position: absolute;
bottom: 25%;
right: 9;
width: 300px;
}
img {
display: block;
margin-top: 1.4%;
margin-left: auto;
margin-right: auto;
width: 50%;
}
#myProgress {
width: 80%;
margin-top: 1%;
margin-left: 18%;
margin-right: 1%;
background-color: lightgrey;
}
#myBar {
width: 4%;
height: 30px;
background-color: darkblue;
}
#wrapper {
position: fixed;
width: 75%;
height: 60%;
margin-left: 0%;
background: #c0c0c0;
bottom: 20%;
left: 10%;
border-style: solid;
border-color: white;
}
#BG {
font-size: 230%;
font-family: 'Times New Roman', serif;
color: white;
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/19b878e3-6630-4a23-97c6-ded92ea870f1/d1ninoy-e31fa477-d29a-4246-a725-78ca360cfc4e.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMTliODc4ZTMtNjYzMC00YTIzLTk3YzYtZGVkOTJlYTg3MGYxXC9kMW5pbm95LWUzMWZhNDc3LWQyOWEtNDI0Ni1hNzI1LTc4Y2EzNjBjZmM0ZS5qcGcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.a_A-mPO-uXtutM_qLniSlB0Yhe8JJHUm0k-eNv6svio");
background-repeat: no-repeat;
background-position: cover;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment