<style type="text/css">
#pun {
width: 960px;
margin: 0 auto;
}
#pun-title {
background: url(http://s014.radikal.ru/i329/1010/77/6481b220e4d7.png) no-repeat top center;
height: 432px;
border-style: none;
}
.title-logo span {
visibility: hidden;
}
#cloudbar {
display: block;
position: relative;
top:-730px;
float: right;
height:325px;
width:252px;
background:url('http://ruseller.com/lessons/les122/example/images/cloud-bar.png') no-repeat bottom center;
visibility: hidden;
}
#pun-title-message {
position: relative;
z-index: -1;
top: 355px;
}
#pun-title-message div {
width: 439px;
height: auto;
padding: 10px 5px 140px 5px;
font: bold italic 15pt serif;
color: white;
display: block;
visibility: hidden;
background-color: #a5946b;
margin: -2px 0 0 0;
}
</style>
<div id="pun-title-message">
<img src="http://s005.radikal.ru/i209/1010/c5/f411c593af6e.png" alt="man" />
<div>
Some text information... And Here and here.<br /> Here she comes
</div>
</div>
<div id="cloudbar">
<div class="cloud-padding">
<h2>Subscribe via RSS</h2>
<a href="#"><img src="http://ruseller.com/lessons/les122/example/images/feed-icon.gif" alt="Subscribe today!"/></a>
</div>
</div>
<script src="http://ruseller.com/lessons/les122/example/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var headeranimation = function(){
$("#pun-title-message div").css({visibility: 'visible'});
$("#pun-title-message").stop().animate({top: '-=230px'}, {queue:false, duration:2000,easing: "easeInOutBack"});
$("#cloudbar").css({visibility: 'visible'});
$("#cloudbar").stop().animate({top: '+=270px'}, {queue:false, duration:2000,easing: "easeInOutBack"});
}
setTimeout(headeranimation,1500);
})
</script>html-верх, когда появится новый стиль надо удалить все из html-верха и поставить это.
<div id="pun-title-message">
<img src="http://s005.radikal.ru/i209/1010/c5/f411c593af6e.png" alt="man" />
<div>
Some text information... And Here and here.<br /> Here she comes
</div>
</div>
<div id="cloudbar">
<div class="cloud-padding">
<h2>Subscribe via RSS</h2>
<a href="#"><img src="http://ruseller.com/lessons/les122/example/images/feed-icon.gif" alt="Subscribe today!"/></a>
</div>
</div>
текст в левом блоке
текст в правом блоке
<script src="http://ruseller.com/lessons/les122/example/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var headeranimation = function(){
$("#pun-title-message div").css({visibility: 'visible'});
$("#pun-title-message").stop().animate({top: '-=230px'}, {queue:false, duration:2000,easing: "easeInOutBack"});
$("#cloudbar").css({visibility: 'visible'});
$("#cloudbar").stop().animate({top: '+=270px'}, {queue:false, duration:2000,easing: "easeInOutBack"});
}
setTimeout(headeranimation,1500);
})
</script>
количество пикселей, на которое выезжает вниз правый блок
количество пикселей, на которое выезжает вверх левы блок
задержка в миллисекундах перед началом анимации после загрузки страницы