-5

In this website - http://bit.ly/1Oir0D7 a line slides in between logo and slogan, when page first loads. I couldn't understand how this is done. Could you please help me figure out how could I replicate it?

1 Answer 1

2

You can do something like this

$('.b').animate({
    marginLeft:'0px'
},500)
.a{
    font-size:50px;
}
.b{
    position:absolute;
    content:"";
    width:100px;
    height:2px;
    background:orange;
    margin-top:50;
    margin-left:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="a">Text</div>
<div class="b"></div>

Or this CSS solution

div{
    font-size:50px;
}
div:after{
    position:absolute;
    content:"";
    width:100px;
    height:2px;
    background:orange;
    margin-top:50px;
    margin-left:100px;
    -webkit-animation:move 1s forwards;
   -moz-animation:move 1s forwards;
   -o-animation:move 1s forwards;
   -ms-animation:move 1s forwards;
   animation:move 1s forwards;
}

@-webkit-keyframes move{
    100%{margin-left:-100px;}
}
@-moz-keyframes move{
    100%{margin-left:-100px;}
}
@-o-keyframes move{
    100%{margin-left:-100px;}
}
@-ms-keyframes move{
    100%{margin-left:-100px;}
}
@keyframes move{
    100%{margin-left:-100px;}
}
<div>Text</div>

1
  • Wow, this was fast, thank you very much!
    – Uldis
    Commented Apr 10, 2015 at 12:03

Not the answer you're looking for? Browse other questions tagged or ask your own question.