SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    243
    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
    23,595
    Mentioned
    411 Post(s)
    Tagged
    6 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
    243
    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,312
    Mentioned
    178 Post(s)
    Tagged
    8 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
    243
    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
    23,595
    Mentioned
    411 Post(s)
    Tagged
    6 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,312
    Mentioned
    178 Post(s)
    Tagged
    8 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
  •