Thursday, May 19, 2011

Header Animation in SharePoint

Copy and Paste below code in SharePoint banner section and change images URL : 

<style>
ul.ppt {
                position: relative;
                list-style-type: none;
                z-index:1;
                padding:0px!important;
                margin:0px!important;
            /*    float:right;*/
            }
           
.ppt li {
                /*list-style-type: none;*/
                position: absolute;
                top: 0;
                left: 0;
                text-decoration:none;
                padding:0px!important;
                margin:0px!important;


            }
           
.ppt img {
                /*border: 1px solid #e7e7e7;
                padding: 5px;
                background-color: transparent;*/
               
         background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */
    zoom: 1;
   
}
 </style>          
            

<div style="height:245px; width:100%;">
                            
<ul class="ppt" >
  
    <li style="left: 0; top: 0">
    <img src="/Banner images/one.png" alt="First Image"></img></li>
    <li><img src="/Banner images/two.png" alt="Second Image"></img></li>
    <li><img src="/Banner images/three.png" alt="Third Image"></img></li>
    <li><img src="/Banner images/four.png" alt="Four Image"></img></li>

    <!--<li><img src="/SiteAssets/HomePageImages/slide4.jpg" alt="fourth Image"></img></li>-->
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');

function animate() {
    cur.fadeOut( 1000 );
    if ( cur.attr('class') == 'last' )
        cur = $('.ppt li:first');
    else
        cur = cur.next();
    cur.fadeIn( 1000 );
}

$(function() {
    setInterval( "animate()", 8000 );
} );
</script>

</div>

1 comment:

  1. Thanks for sharing as it is an excellent post would love to read your future post. animation classes in vadodara

    ReplyDelete