rrporor
×
Accedi al tuo account

Hai perso la password?
Registrati adesso è GRATUITO

Appena entrato avrai:
Norton Safe Web Connessione HTTPS Sicura

Registrati Adesso!

Menu
NAV
Pubblicità

BETA
Tag: rrporor,
Valutazione discussione:
  • 0 voto(i) - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5

rrporor

228 Visite
Tecnico e Gestore
*******
5,056.50C
03/2013
118
1,022
Gestori
Messaggio: #1
rrporor
25/02/2018, 04:22

Aggiorna il tuo account per nascondere gli annunci pubblicitari.

Hello users, today I will explain how to create a splash screen or almost because I will give you the baby food ready, but you have to edit the images a very easy thing
 
Here is a demo: https://codepen.io/M...elux/pen/RQZoaB
 
 
Let's begin.
 

First we create an html page and name it "splashscreen.html" and then
 
<!doctype html>
<html>
<head>
<title>Titolo del sito</title>
</head>
<body>
Contenuto del sito
</body>
</html>

Now you have to insert this css code between <head> and </ head> with the <style> and </ style> tags
<style>
body
{
background
: url(INSERT THE BACKGROUND YOU LIKE) center no-repeat;
width
: 100%;
height
: 100%;
overflow
: hidden;


}
.cssdeck-logo {
background
: transparent;
width
: 120px;
height
: 120px;
position
: absolute;
top
: 50%;
left
: 50%;
margin
-top: -100px;
;


-webkit-animation: logo 3s infinite;
animation
: logo 3s infinite;
}

.cssdeck-logo::after {
background
: url(INSERT THE URL OF YOUR LOGO) no-repeat;
width
: 500px;
height
: 500px;
content
: "";
position
: absolute;
top
: -70px;
right
: -300px;
}

@keyframes logo {
0% {
transform
: scale(10) rotate(0deg) translateY(-80px);
-ms-transform: scale(10) rotate(0deg) translateY(-80px);
-webkit-transform: scale(10) rotate(0deg) translateY(-80px);

-webkit-filter: blur(30px);
-moz-filter: blur(30px);
-o-filter: blur(30px);
-ms-filter: blur(30px);
filter
: blur(30px);
}
40% {
transform
: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);

-webkit-filter: none;
-moz-filter: none;
-o-filter: none;
-ms-filter: none;
filter
: none;
}
50% {
transform
: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-webkit-tranform: scale(1) rotate(0deg);
}
60% {
transform
: scale(1) rotate(30deg);
-ms-transform: scale(1) rotate(30deg);
-webkit-tranform: scale(1) rotate(30deg);
}
70% {
transform
: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);
}
}

@-webkit-keyframes logo {
0% {
transform
: scale(10) rotate(0deg) translateY(-80px);
-ms-transform: scale(10) rotate(0deg) translateY(-80px);
-webkit-transform: scale(10) rotate(0deg) translateY(-80px);

-webkit-filter: blur(30px);
-moz-filter: blur(30px);
-o-filter: blur(30px);
-ms-filter: blur(30px);
filter
: blur(30px);
}
40% {
transform
: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);

-webkit-filter: none;
-moz-filter: none;
-o-filter: none;
-ms-filter: none;
filter
: none;
}
50% {
transform
: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-webkit-tranform: scale(1) rotate(0deg);
}
60% {
transform
: scale(1) rotate(30deg);
-ms-transform: scale(1) rotate(30deg);
-webkit-tranform: scale(1) rotate(30deg);
}
70% {
transform
: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);
}
}
</style>

This css code is the style of the splash screen, created half by me and the other for the effects and animations I had to search on google.
You have to change the url of the images in the writings.
 
 
Now always inside <head> </ head> enter this code that serves to redirect to the page you want after a few seconds.
 
<meta http-equiv = "refresh" content = "3; URL = 'YOU MUST INSERT LINKS ON YOUR SITE'" />
You have to enter the link of your site, the number "3" is the seconds how long it is to redirect the page, leave 3 seconds.
 
 
Now let's go to the Html part you have to insert this simple html code inside between <body> and </ body>
 
<div class="cssdeck-logo">
</div>

Now if you have done everything right, your splash screen for your site should be finished.
 
 
There is a problem, if someone goes to your site does not appear the splash screen, obviously because it is not the primary page, so how should we do to make this splash screen always appear?
 
to do this, ie redirect the site on a certain page you have to open filezilla or any other program that allows you to use FTP to open the .htaccess file (if you did not create it) you will need to insert this file
# Provide Specific Index Page (Set the default handler)
DirectoryIndex splashscreen.html

obviously the page html splashscreen.html must be in the primary folder, that is in local and not in the other folders.
 
and therefore all the code should look like this:
 
<!doctype html>
<html>
<head>
<title>Titolo del sito</title>
<style>
body
{
background
: url(http://i.imgur.com/oqSqyUw.jpg) center no-repeat;
width
: 100%;
height
: 100%;
overflow
: hidden;


}
.cssdeck-logo {
background
: transparent;
width
: 120px;
height
: 120px;
position
: absolute;
top
: 50%;
left
: 50%;
margin
-top: -100px;
;


-webkit-animation: logo 3s infinite;
animation
: logo 3s infinite;
}

.cssdeck-logo::after {
background
: url(http://i.imgur.com/PqyrKPg.png) no-repeat;
width
: 500px;
height
: 500px;
content
: "";
position
: absolute;
top
: -70px;
right
: -300px;
}

@keyframes logo {
0% {
transform
: scale(10) rotate(0deg) translateY(-80px);
-ms-transform: scale(10) rotate(0deg) translateY(-80px);
-webkit-transform: scale(10) rotate(0deg) translateY(-80px);

-webkit-filter: blur(30px);
-moz-filter: blur(30px);
-o-filter: blur(30px);
-ms-filter: blur(30px);
filter
: blur(30px);
}
40% {
transform
: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);

-webkit-filter: none;
-moz-filter: none;
-o-filter: none;
-ms-filter: none;
filter
: none;
}
50% {
transform
: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-webkit-tranform: scale(1) rotate(0deg);
}
60% {
transform
: scale(1) rotate(30deg);
-ms-transform: scale(1) rotate(30deg);
-webkit-tranform: scale(1) rotate(30deg);
}
70% {
transform
: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);
}
}

@-webkit-keyframes logo {
0% {
transform
: scale(10) rotate(0deg) translateY(-80px);
-ms-transform: scale(10) rotate(0deg) translateY(-80px);
-webkit-transform: scale(10) rotate(0deg) translateY(-80px);

-webkit-filter: blur(30px);
-moz-filter: blur(30px);
-o-filter: blur(30px);
-ms-filter: blur(30px);
filter
: blur(30px);
}
40% {
transform
: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);

-webkit-filter: none;
-moz-filter: none;
-o-filter: none;
-ms-filter: none;
filter
: none;
}
50% {
transform
: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-webkit-tranform: scale(1) rotate(0deg);
}
60% {
transform
: scale(1) rotate(30deg);
-ms-transform: scale(1) rotate(30deg);
-webkit-tranform: scale(1) rotate(30deg);
}
70% {
transform
: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);
}
}
</style>



<meta http-equiv="refresh" content="3;URL='https://stertix.it/'" />
</head>
<body>
<div class="cssdeck-logo">
</div>
</body>
</html>

Here is a demo: https://codepen.io/M...elux/pen/RQZoaB 

 
For any problem please comment  [Immagine: smile.png]


Firma:

Ciao Carò Utente Hai un Problema o una Domanda? bhe allora Contattaci:

Email: info@natnox.com
Twitter: Natnox
Facebook: Natnox

EMINEM & RIHANNA
[Immagine: 9vJLLEP.gif][Immagine: AUpdxc9.gif]

Rispondi


Aggiorna il tuo account per nascondere gli annunci pubblicitari.




Utenti che stanno guardando questa discussione: 1 Ospite(i)