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
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>