Довольно старая jquery-анимация от Sam Dunn; тем не менее, возможно, вы сумеете найти ей применение... излишне говорить, что картинки несложно заменить, и для вас не представит сложности создать таким образом красочный баннер для своего сайта. Особенно в пору окончательно почившего в бозе Flash! Вам попросту понадобится приведенный далее код, и не более того:

<script type="text/javascript" src="/jquery-1.3.2.js"></script>
 <script src="/jquery.easing.1.3.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 setTimeout("animation()",300);
 });
 function animation(){
 sun_raft();
 cloud1();
 cloud2();
 cloud3();
 $("#greetings").animate({top: '125px' }, {queue:false, duration:600, easing:'easeOutBounce'});
 $("#stamp").animate({left: '545px' }, {queue:false, duration:1200, easing:'easeOutBounce'}); 
 }
 function sun_raft(){
 $("#sun").animate({opacity:".7"},1000).animate({opacity:"1"},1000);
 $("#raft").animate({top:"-=5px"},1000).animate({top:"+=5px"}, 1000);
 $("#raftripple").animate({opacity:".1"},1000).animate({opacity:"1"},1000);
 setTimeout("sun_raft()",2000);
 }
 function cloud1(){
 $("#cloud1").animate({left:"+=850px"},10000).animate({left:"-150px"}, 0)
 setTimeout("cloud1()",10000);
 }
 function cloud2(){
 $("#cloud2").animate({left:"+=950px"},9000).animate({left:"-250px"}, 0)
 setTimeout("cloud2()",9000);
 }
 function cloud3(){
 $("#cloud3").animate({left:"+=800px"},6000).animate({left:"-100px"}, 0)
 setTimeout("cloud3()",6000);
 }
 </script>
 <style type="text/css">
 *{ margin:0; padding:0; }
 #wrapper1{ margin:0px auto; width:650px; }
 #content1{ position:relative; width:650px; height:300px; overflow:hidden; border:5px solid #f5f5f5; background: url('images/scene_bg.jpg'); }
 #sun{ position:absolute; top:10px; left:30px; }
 #cloud1{ position:absolute; top:60px; left: -150px; z-index:5; }
 #cloud2{ position:absolute; top:40px; left: -250px; z-index:4; }
 #cloud3{ position:absolute; top:25px; left: -100px; z-index:3; }
 #raft{ position:absolute; top:220px; left: 312px; z-index:20; }
 #raftripple{ position:absolute; top:220px; left: 309px; z-index:19; }
 #greetings{ position:absolute; top:-51px; left: 200px; z-index:21; }
 #stamp{ position:absolute; top:5px; left: 801px; z-index:21; }
 </style>
 <div id="wrapper1">
 <div id="content1">
 <div id="sun"><img src="/images/sun.gif"/></div>
 <div id="cloud1"><img src="/images/cloud1.png"></div>
 <div id="cloud2"><img src="/images/cloud2.png"></div>
 <div id="cloud3"><img src="/images/cloud3.png"></div>
 <div id="raft"><img src="/images/raft.png"></div>
 <div id="raftripple"><img src="/images/raftripple.gif"></div>
 <div id="greetings"><img src="/images/greetings.png"></div>
 <div id="stamp"><img src="/images/stamp.png"></div>
 </div>
 </div>