Monday, January 7, 2013

Awesome Jquery Rotate Effect For Blogger Images

In this post im gonna explain how to add awesome jquery  rotate  effect for  images. For  this  post im
using CSS with jquery.You can use  this  effect on side bar  with  any  image  size. its  easy to  add to blogger. I think  i don't  need to  explain more. just check the demo link below. you will get it.Get my
earlier images effect post here.

Awesome+Jquery+Rotate+Effect+For+Blogger+Images

Demo

1.
Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<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 #000000;
            position: absolute;
        }
    </style>


    <br />
<div class="content">
<div class="img_c">
<img class="img1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
</div>

Replace red color link with your image URL

7. Now save your HTML/Javascript'.

    You are done...

0 comments:

Post a Comment