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,097
    Mentioned
    448 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;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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,861
    Mentioned
    206 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,097
    Mentioned
    448 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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,861
    Mentioned
    206 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
  •