Fadein onload of website

[mikk809h]

Hello everyone.

I've for some time thought about how it was possible to make a webpage fadeinto a background color, when
the page has been visited. If i for example refresh this page, it should not start with a light background,
until i visit the page in a new tab.

I have a example here:
http://olivercooper.me/

 

Notice the fading effect, only occurs once. ( even if you refresh its still not fading from white-dark )

 

 

I've heard that this requires JQuery, or JavaScript, to make it fade, when the site is visited.

 

Do you have any ideas how this might be possible?

 

And just to ask stupid: Does anyone know what that "Hello" font is?

 

 

Best regards,

 

~Mikk809h 

 

 

Edit: Why did this post just get multiplied? I only posted this once? Can anyone please remove the others? Thanks in advance

Edited June 23, 2014 by mikk809h

[Psycho]

If i for example refresh this page, it should not start with a light background,

until i visit the page in a new tab.

 

I'm not following. Are you talking about the default white background that EVERY page starts with until the page loads and styles can be applied? At least, that is all I see when I refresh that page. If so, there's nothing you can do about that. When you click refresh, the browser starts "from scratch". Every page starts loading with a white background. Although that is a feature of the browsers not anything to do with the code to build the pages. It may be something that can be changed in the browser, but it would be a change by the individual users, not something that could be controlled in the code for the page. Well, it *may* be possible to prevent the refresh at all, but I can't see anything good coming from that.

 

If you don't want that momentary flash of white when loading a new page (i.e. clicking a link), then you could implement AJAX to change the content dynamically without a page refresh. But, if the user explicitly clicks refresh it will start over.

 

 

 

Does anyone know what that "Hello" font is?

Yes, I do. It's right there in the source code.

Edited June 23, 2014 by Psycho

[mikk809h]

Okay, Thanks for your answer, I found the font and got it onto my web.
Now i have a weird transition problem, which makes the text disappear after a 2s transition.
 

html {
  height: 100%;
}

body, html{
  padding: 0;
  margin: 0;
  font-family: Comfortaa, Verdana, Arial, sans-serif;
  min-height: 100%;
  transition: background-color 1s, color 1s; /* This works fine and smoothly! */
  background: #1a1a1a;
  color: white;
  min-height: 380px;
}

.container {
  opacity: 0;
  -webkit-transition: opacity 2s; /* This seems to make the image first appear, then it "looks" like the opacity is getting lower, so its invisible */
  transition: opacity 2s;
}

.first {
  font-size: 200px;
  line-height: 200px;
  margin-top: -100px;
  position: absolute;
  text-align: center;
  width: 100%;
  opacity: 1; /*This should make the text fully visible... */
  top: 35%;
}

And here's some pics:

 

When i go to the page (no refresh)

Starts from the picture above, and fading into:

Then The text is being "faded out"

into this:

Into:

into:

 

 

 

 

 

Hmm.. Is this a cause of my Css style code?

[Psycho]

You say you have a weird transition problem and then post some pics. So, I have an idea of what IS happening. But, I have no idea what you are wanting to happen. Are you wanting to stop after the 2nd image (i.e. not have the text transition to black)? The transition would be controlled by JS, yet you've not provided that code.

[mikk809h]

Well. What i want is that Whenever i load the page, no text is displayed, then when backgroundcolor-transition has finished, it slowly fades in the text (with white color)

 

im in a bit of hurry, so i'll be back in a moment or so

[Psycho]

I would suggest the following:

 

Set the default style of the text as black and make its display property 'none'. So, it won't be in the initial page load at all.

 

Then, perform the background transition to black. Once that completes, change the display property of the text to in-line and perform the transition to white

[mikk809h]

Well.. Somehow it doesnt fade in that text. i think its because im placing the display: none; wrong...

 

@font-face {
  font-family: Comfortaa;
  src: url('Fonts/Comfortaa/Comfortaa-Regular.ttf');
  font-weight: normal;
}

@font-face {
  font-family: Comfortaa;
  src: url('Fonts/Comfortaa/Comfortaa-Light.ttf');
  font-weight: 300;
}

@font-face {
  font-family: Comfortaa;
  src: url('Fonts/Comfortaa/Comfortaa-Bold.ttf');
  font-weight: bold;
}

html {
  height: 100%;
}

body, html{
  z-index: 10;
  padding: 0;
  margin: 0;
  font-family: Comfortaa, Verdana, Arial, sans-serif;
  min-height: 100%;
  transition: background-color 1s;
  background: #1a1a1a;
  color: #1a1a1a;
  min-height: 380px;
}

.container {
  -webkit-transition: color 2s, display 2s;
  transition: color 2s, display 2s;
  display: inline;
}

.first {
  color: white;
  font-size: 200px;
  line-height: 200px;
  margin-top: -100px;
  position: absolute;
  text-align: center;
  width: 100%;
  top: 35%;
}

.second {
  color: white;
  font-size: 30px;
  line-height: 200px;
  margin-top: -100px;
  position: absolute;
  text-align: center;
  width: 100%;
  top: 50%;
}

.third {
  color: white;
  font-size: 30px;
  line-height: 200px;
  margin-top: -100px;
  position: absolute;
  text-align: center;
  width: 100%;
  top: 55%;
}

index.php

 

<html>
  <head>
  <title>
    MikkOS
  </title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <!--<div id="background">-->
      <!--<script type="text/javascript">
        $(window).ready(function() {
        $('#background').fadeIn(1024);
        });
      </script>-->
      <!--<div class="HeadText">-->
      <div class="container">
          <div class="first">
            Hello
          </div>
          <div class="second">
            Mikkel Andersen
          </div>
          <div class="third">
            Odense, Denmark
          </div>
      </div>
      <!--</div>-->
    <!--</div>-->
  </body>
</html>

Thanks in Advance

[mikk809h]

And since i cannot edit my previous post, then:

 

It does show the text... it just doesnt fade in, after the background ( it fades in at the same time )