Sunday, February 26, 2012

Continual rotating background image with jQuery

Example:
http://jsfiddle.net/Wz8Py/


















makes use of this jQuery plug-in:
http://code.google.com/p/jqueryrotate

image will be forced into square dimensions, so use an image that is a square


<div style="z-index:-2;position:fixed;width:100%;height:100%;">
<img id="mainImg" src="http://2.bp.blogspot.com/-IuwcSwf0v8Y/TlvC9WmS_nI/AAAAAAAAAGU/KG0IOybyrWQ/s1600/3d_space_33-3D-Space-Wallpapers.jpg" style="display:none;"/>
</div>
<div id="dog" style="background:url(http://gif-favicon.com/images/animals/dog-face-transparent-background-0250-10015.gif);width:250px;height:223px;margin:0 auto;position:fixed;z-index:-1;"></div>


<script>
var count 0;
function rotateImg({            
    $('#mainImg').rotate(count);

    $('#dog').rotate(-count*20);
    
    // how fast to rotate image
    count += .12;
    
    if (count >= 360{
        count 0.0;
    }
}
$(document).ready(function({
    // affects how much the image will overlap screen size
    var enlarge 2.6;

    var docWidth $(document).width();
    var imgSize enlarge*docWidth;   
    var mLeft -(imgSize-docWidth)/2
    var docHeight $(document).height();
    var mTop (docHeight imgSize)/2;
   

    $('#mainImg').css('width',imgSize);
    $('#mainImg').css('height',imgSize);
    $('#mainImg').css('display','inline');
    $('#mainImg').css('margin-left',mLeft);
    $('#mainImg').css('margin-top',mTop);  

    var loop 0;
    
    // refresh rate
    var time 5;
    
    setInterval(function({
            rotateImg();
    }time);
    
    var dogLeft (docWidth $('#dog').width())/2;
    var dogTop (docHeight $('#dog').height())/2;
    
    $('#dog').css('margin-left'dogLeft);
    $('#dog').css('margin-top'dogTop);
    

    $(window).resize(function({
            docWidth $(document).width();
            imgSize enlarge*docWidth;
            mLeft -(imgSize-docWidth)/2;  
            docHeight $(document).height();   
            mTop (docHeight imgSize)/2;  
        
            $('#mainImg').css('width',imgSize);
            $('#mainImg').css('height',imgSize);
            $('#mainImg').css('display','inline');
            $('#mainImg').css('margin-left',mLeft);
            $('#mainImg').css('margin-top',mTop)

            dogLeft (docWidth $('#dog').width())/2;
            dogTop (docHeight $('#dog').height())/2;
    
            $('#dog').css('margin-left'dogLeft);
            $('#dog').css('margin-top'dogTop);     
    
    });
});

</script>

No comments:

Post a Comment