SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  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,596
    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,596
    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.


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
  •