Spiral

HTML code :


<!--<script src="/demos/spiral1/jquery-css-transform.js" type="text/javascript" charset="utf-8"></script>-->
<script src="/demos/spiral1/jquery-animate-css-rotate-scale.js" type="text/javascript" charset="utf-8"></script>

<div id="spiralContainer">
    <p id="rwControls">
        <a id="rwPlay" class="rwBtn">Play animation</a>
        <a id="rwStop" style="display: none;"  class="rwBtn">Stop animation</a>
    </p>

    <div class="" id="spiral"><img src="/demos/spiral1/spiral.gif" alt="" /></div>

</div>

Javascript code :


$(document).ready(function(){

    var timer1;

	$("#spiral").css("left", (($(window).width()-2000)/2)+"px");
	
       
        $('a#rwPlay').click(function () {
            $(this).hide();
            $('a#rwStop').show();

            

            // then looping :

            timer1 = setInterval(function () { $('#spiral').rotate('42deg');  }, 100);
            //$('#spiral').click(function () {$(this).animate({scale: '+=0.33'}, {queue: false, duration: 1000});});
            


        });

        $('a#rwStop').click(function () {
            //alert($('#spiral').css('-moz-transform'));
            $(this).hide();
            $('a#rwPlay').show();
            clearInterval(timer1);
 
        });


});

$(window).resize(function() {
    $("#spiral").css("left", (($(window).width()-2000)/2)+"px");
});

CSS code :


div#spiralContainer {
    position: relative;
    width: 100%;
    text-align: center;
    height: 550px;
}

div#spiral {
position:absolute;
top: -725px;
left: 0;
width: 2000px;
height: 2000px;
z-index: 20;
margin: 0;
}

#content {
    overflow: hidden;
    height: 550px;
}

#rwControls { z-index: 100; }

Comments are closed.