SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do i make this subtle fade in effect?

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    He's just using CSS3 for that, which is the easy way, but won't work in older browsers. Meh.

    Code:
    .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. #3
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    He's just using CSS3 for that, which is the easy way, but won't work in older browsers. Meh.

    Code:
    .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;
    }
    Hmm thanks, but I applied these classes to the elements i wanted to fade in but nothing happens?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Which browser are you using?
    Can you post a demo of what you have so far?

  5. #5
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Which browser are you using?
    Can you post a demo of what you have so far?
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    This is more of their code, which makes your example work:

    Code:
    @-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. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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.


    Code:
    <!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/ma...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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •