Monday, May 5, 2014

In today post I try to do a little experiment with css animation, with jquery to generating css value on the fly. When this post created the this animation examples only works on firefox and chrome browser.

 

In this short example I try to create a stack of images, on the default position each of images have a different angle, and rotating to the same angle in the same duration of time.

 CODE

 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Rotate And Animation</title>
    <script src="jquery-1.6.4.min.js"></script>
    <script>
    $(function() {
        var tot = $(".img_c").length;
        var stat = deg = 10;
        var rotate = "";
        var frame, mozframe, webkitframe;
        $("img").each(function(index) {
            $(this).css({
                "transform": "rotate("+deg+"deg)",
                "-moz-transform": "rotate("+deg+"deg)",
                "-webkit-transform": "rotate("+deg+"deg)",
                "-o-transform": "rotate("+deg+"deg)"
            });

            rotate = "100% {" +
                "transform: rotate(360deg);" +
                "-moz-transform: rotate(360deg);" +
                "-webkit-transform: rotate(360deg);" +
                "-o-transform: rotate(360deg);" +
                "} ";

            var imgclass = parseInt(index+1);
            frame = " @keyframe anim" + imgclass + " { " +
                rotate + "}";
            mozframe = " @-moz-keyframes anim" + imgclass + " { " +
                rotate + "}";
            webkitframe = " @-webkit-keyframes anim" + imgclass + " { " +
                rotate + "}";
            $('<style> '+ frame + mozframe + webkitframe +
                ' .img'+imgclass+' { animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +
                                   '-moz-animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +
                                   '-webkit-animation: anim'+imgclass+' 3s ease 0s infinite alternate; }'
                +'</style>').appendTo('head');

            deg = deg + stat;
        });
    });
    </script>
    <style>
        body {
            background: #fff url('wood_pattern.png') repeat top right;
        }
        .content {
            margin: 0 auto;
            padding: 100px;
        }
        img {
            margin: 10px;
            padding: 20px;
            background: #fff;
            -moz-box-shadow: 0px 0px 3px #d3d3d3;
            -webkit-box-shadow: 0px 0px 3px #d3d3d3;
            box-shadow: 0px 0px 3px #d3d3d3;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="img_c"><img class="img1" src="img/01.jpg"/></div>
        <div class="img_c"><img class="img2" src="img/02.jpg"/></div>
        <div class="img_c"><img class="img3" src="img/03.jpg"/></div>
        <div class="img_c"><img class="img4" src="img/04.jpg"/></div>
        <div class="img_c"><img class="img5" src="img/05.jpg"/></div>
        <div class="img_c"><img class="img6" src="img/06.jpg"/></div>
        <div class="img_c"><img class="img7" src="img/07.jpg"/></div>
        <div class="img_c"><img class="img8" src="img/07.jpg"/></div>
        <div class="img_c"><img class="img9" src="img/09.jpg"/></div>
        <div class="img_c"><img class="img10" src="img/09.jpg"/></div>
    </div>
</body>
</html>

I use jquery for generating each images angle, and adding CSS animation on the fly using jquery, you can see all the images have the same animation keyframe which is animation to 360deg in 3 seconds, with ease effect, so why not just put on static css style, I don’t really know what, but on webkit browser it is not working. Here the demo, this might be a lag on firefox.





DEMO 







Tagged








































0
comments



    
























        

      







Subscribe to:
Post Comments (Atom)





























Thank you for visiting 9pixle.