How To Make Full-Screen Animated Logo For Your Website
Page 1 of 1
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!
Re: How To Make Full-Screen Animated Logo For Your Website
Here is an example of a smaller but higher quality image version.
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:
<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
Similar topics
» How To Make A Youtube Playlist And Embed It To Your Website
» How to change notificationtimeout for full screen youtube on firefox
» php code website base full of open source code
» Animated desktop in Linux Mint 10 KDE
» Amazing 3D Rotating Animated 6 Sided Cube With CSS
» How to change notificationtimeout for full screen youtube on firefox
» php code website base full of open source code
» Animated desktop in Linux Mint 10 KDE
» Amazing 3D Rotating Animated 6 Sided Cube With CSS
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
|
|