I am using this code for transition between my HTML pages and it works just fine:
http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
But there is tiny issue that I cannot resolve and that is the blank white background shown between fade in and fade out transitions.
basically when the page is faded out and the code is trying to the load the next page, there is a slight delay (almost 1 seconds) and in that 1 second gap a blank white screen is shown. I know that I have to use some CSS and i added this to my HTML css code:
html{
font-size: 100%;
background-color:#000;
}
but when i do that, a black line is shown on the loaded page for some strange reason!
is there anyway to eliminate the 1 second delay or eliminate the black line on the page as i really don't know what is causing the issue?
Here is my Entire CSS code:
<style type="text/css" media="screen">
html{
font-size: 100%;
background-color:#000;
}
#maximage {
/* position:fixed !important;*/
}
#container{
overflow:hidden;
}
#footer{
color:#FFF;
text-align:left;
}
/*Set my logo in bottom left*/
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
#txt1 {
top:55%;
height:auto;
left:5%;
position:absolute;
width:55%;
z-index:1000;
color:#FFF;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
}
#txt2 {
top:59%;
height:auto;
left:5%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
}
#txt3 {
top:63%;
height:auto;
left:5%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
}
#txt4{
top:22%;
height:auto;
left:3%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
margin-top:4%;
float:left;
}
#txt5{
height:auto;
width:100%;
z-index:1000;
color:#fff;
font-size:4%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
text-align:center;
}
#logo img {
width:69%;
}
body {
background-color:#000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font: 16px/1.8 sans-serif;
font-family:Verdana, Geneva, sans-serif;
}
#preloader{
position:absolute;
top: 45%;
left: 75%;
width:278px;
height: 105px;
margin-top: -45px;
margin-left: -210px;
z-index:1000;
}
#wait{
position:absolute;
top: 37%;
left: 45%;
width:300px;
height: 113px;
margin-top: -45px;
margin-left: -120px;
z-index:1000;
}
h1 {
text-align: left;
color:#fff;
font: 16px/1 "Verdana, Geneva, sans-serif";
display: inline-block;
width: 100%;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
position: relative;
width: 39%;
margin: 0 auto;
height:50%;
overflow: hidden;
}
#navigation{
margin-left:2%;
margin-top:2%;
}
#home{
width:10%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
}
#products{
width:10%;
margin-bottom:0.5%;
text-align:center;
}
a:link { text-decoration:none;} /* unvisited link */
a:visited { text-decoration:none;} /* visited link */
a:hover {
text-decoration:none;
} /* mouse over link */
a:active { text-decoration:none;} /* selected link */
#div101:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
padding: 20px;
border-radius: 15px;
/* HOVER ON */
-webkit-transition: border-radius 2s;
transition:all 2s ease-in-out;
perspective: 800px;
}
#div102:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
/* Landscape */
@media screen and (orientation:landscape) {
#logo{
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
#preloader{
position:absolute;
top: 45%;
left: 55%;
width:278px;
height: 105px;
margin-top: -45px;
margin-left: -210px;
z-index:1000;
}
}
@media screen and (max-width: 600px) , screen and (max-height: 700px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
@media screen and (max-width: 4000px) , screen and (max-height: 2000px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
@media only screen and (min-width : 321px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
@media only screen and (max-width : 321px) {
#footer {
font-size:10px;
text-align: left;
margin-left:10%;
margin-bottom:5%;
font-family:Verdana, Geneva, sans-serif;
width:42%;
}
#home{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#products{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
font-weight:bold;
color:#fff;
border:#666;
border:2px solid;
}
#vodka{
background-color:#C0C0C0;
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#contact{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#div101:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
padding: 5px;
border-radius: 5px;
/* HOVER ON */
-webkit-transition: border-radius 1s;
transition:all 1s ease-in-out;
perspective: 800px;
}
}
@media only screen and (min-width : 321px) {
#footer {
font-size:13px;
text-align:left;
margin-left:5%;
margin-bottom:10%;
font-family:Verdana, Geneva, sans-serif;
width:30%;
}
#home{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#products{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#vodka{
background-color:#C0C0C0;
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#contact{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
.rotate{
cursor:pointer;
}
.rotate:hover
{
background-color:#da2128;
}
}
@keyframes filleffect
{
from {width:0;}
to {width: 400px;}
}
@-webkit-keyframes filleffect /* Safari and Chrome */
{
from {width:0;}
to {width: 400px;}
}
</style>