How To Make Full-Screen Animated Logo For Your Website

Code

Code:

<style>

.logoload {

  /* SET BACKGROUND COLOR */

  background-color: #000;

  /* SET BACKGROUND SIZE */

  background-size: 35%;

  position: fixed;

  left: 0px;

  top: 0px;

  width: 100%;

  height: 100%;

  z-index: 9999;

  background-position: center;

  background-repeat: no-repeat;

  background-image: url("/images/Animated_JNET_Logo/Animated_JNET_colourful.gif");

}

</style>

<div class="logoload"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript">

$(window).load(function() {

    $(".logoload").delay(500).fadeOut("slow");

})

</script>

Replace gif file with your own image!

Here is an example of a smaller but higher quality image version.

Code:

<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #000;
  /* SET BACKGROUND SIZE */
  background-size: 15%;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/images/Animated_JNET_Logo/300x300-Animated_JNET_colourful.gif");
}
</style>


Code:

background-size: 15%

The above example is the only line I changed to increase image quality.

So then, I resized the image in order to speed up load times using these following commands

Code:

sudo apt install -y gifsicle

Code:

gifsicle Animated_JNET_colourful.gif --resize 300x300 > resized-Animated_JNET_colourful.gif