PC & IT SUPPORT MADE EASY FORUM
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How To Make Full-Screen Animated Logo For Your Website

Go down

How To Make Full-Screen Animated Logo For Your Website Empty How To Make Full-Screen Animated Logo For Your Website

Post by jamied_uk 27th January 2022, 21:22



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!
jamied_uk
jamied_uk
Admin

Posts : 2950
Join date : 2010-05-09
Age : 41
Location : UK

https://jnet.sytes.net

Back to top Go down

How To Make Full-Screen Animated Logo For Your Website Empty Re: How To Make Full-Screen Animated Logo For Your Website

Post by jamied_uk 28th January 2022, 21:06

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
jamied_uk
jamied_uk
Admin

Posts : 2950
Join date : 2010-05-09
Age : 41
Location : UK

https://jnet.sytes.net

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum