How do i make this subtle fade in effect?

JavaScript
1

I want to something similar to what this guy has done with the text on the banner, that has a subtle fade in effect to it when u enter the site.

http://matthewcarleton.com/

Can anyone help me with this?

Thanks in advance.

2

He’s just using CSS3 for that, which is the easy way, but won’t work in older browsers. Meh.

.fadeInRight {
-webkit-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-o-animation-name: fadeInRight;
animation-name: fadeInRight;
}

.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-ms-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}
3

Hmm thanks, but I applied these classes to the elements i wanted to fade in but nothing happens?

4

Which browser are you using?
Can you post a demo of what you have so far?

5

Sure, here u go: http://dabblet.com/gist/5429126

Im trying in Firefox and Chrome, both newest versions.

I got it fading now with some keyframes but I dont know why it wont slide in from right;

6

This is more of their code, which makes your example work:

@-webkit-keyframes reset {
  0%{opacity:0}100%{opacity:0}
}

@-moz-keyframes reset {
  0%{opacity:0}100%{opacity:0}
}

.animated {
  -webkit-animation-fill-mode:both;
  -moz-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  -o-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:3s;
  -moz-animation-duration:3s;
  -ms-animation-duration:3s;-o-animation-duration:3s;
  animation-duration:3s
}

.animated.hinge {
  -webkit-animation-duration:2s;
  -moz-animation-duration:2s;
  -ms-animation-duration:2s;
  -o-animation-duration:2s;animation-duration:2s
}

@-webkit-keyframes fadeInRight {
  0%{opacity:0;-webkit-transform:translateX(20px)}
  100%{opacity:1;-webkit-transform:translateX(0)}
}

@-moz-keyframes fadeInRight {
  0%{opacity:0;-moz-transform:translateX(20px)}
  100%{opacity:1;-moz-transform:translateX(0)}
}

@-o-keyframes fadeInRight {
  0%{opacity:0;-o-transform:translateX(20px)}
  100%{opacity:1;-o-transform:translateX(0)}
}

@keyframes fadeInRight {
  0%{opacity:0;transform:translateX(20px)}
  100%{opacity:1;transform:translateX(0)}
}

.fadeInRight {
  -webkit-animation-name:fadeInRight;
  -moz-animation-name:fadeInRight;
  -o-animation-name:fadeInRight;
  animation-name:fadeInRight
}

@-webkit-keyframes fade-in {
  0%{opacity:0}60%{opacity:0}
  100%{opacity:1}
}

@-moz-keyframes fade-in {
  0%{opacity:0}60%{opacity:0}
  100%{opacity:1}
}

.fade-in {
-webkit-animation-name:reset, fade-in;
-webkit-animation-duration:.9s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-iteration-count:1;
-moz-animation-name:reset, fade-in;
-moz-animation-duration:.9s;
-moz-animation-timing-function:ease-in;
-moz-animation-iteration-count:1
}

@-webkit-keyframes bounce {
  0%{top:0}60%{top:10px}100%{top:0px}
}

@-moz-keyframes bounce {
  0%{top:0}60%{top:10px}
  100%{top:0px}
}

@keyframes bounce {
  0%{top:0}60%{top:10px}100%{top:0px}
}

.bounce {
  -webkit-animation:bounce 2s linear infinite;
  -moz-animation:bounce 2s linear infinite;
  animation:bounce 2s linear infinite
}

.box {
  background: #eee;
  width: 300px;
  float: right;
  margin-right: 200px;
}

h1 {
  font-size: 2em;
  color: blue;
  text-transform: uppercase;
}

I haven’t gotten into a lot of this stuff yet, but it’s quite interesting.

7

Here’s a jQuery solution, because, as we know, jQuery is the solution to ANY web design problem you might encounter.

Demo

You might also want to check in this demo I made for someone else.
It demonstrates how to animate a background image.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Fade in background and animate header</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>
      h1, h2{
        text-transform:uppercase;
        font-size: 2em;
        letter-spacing: .1em;
        line-height: 1em;
        text-align:right;
        position:relative;
        right:30px;
        top: 50px;
        color:white;
      }

      section{
        width:100%;
        height:350px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(http://matthewcarleton.com/images/main/bg-masthead.jpg);
      }

      div{
        background: rgb(255, 255, 255);
        transition: background 0.5s linear;
        -webkit-transition: background 1.5s linear;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>

  <body>
  <section>
    <div>
      <h1 class="heading">Your heading here</h1>
      <h2 class="heading">Your sub heading here</h2>
    </div>
  </section>

    <script>
      $(document).ready(function() {
        $("div").css('background', 'rgba(255, 255, 255, 0)');
        $(".heading").animate({right: 60}, 2000);
      });
    </script>
  </body>
</html>

Hope that helps.