How to add jquery rotate effect for images. For this post i am using CSS with jquery. You can use this effect on side bar with any image size. Its easy to add to your blog. So i think i don't need to explain more and more so keep this simple and let's start our work.
1. Log in to blogger account
2. Click on Layout
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below one of below code.
7. Now save your HTML/Javascript'.
1. Log in to blogger account
2. Click on Layout
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below one of below code.
Replace red color link with your image URL.<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/AVvXsEgoN8eYc88Kl-wnYMXKwHozI3yUB4ouAG3VFv59ULtJHDTKfdAAXgDAVeyDoQMAxpty6TjQfiz4U9_RaBtvwFLQPy7ItKWAKbzXkA_KcSet0xiJvQCN7NiCaKS1AVYlHDXVP0-E2ywaLYI/s1600/nature.jpg" /></div><div class="img_c"><img class="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoN8eYc88Kl-wnYMXKwHozI3yUB4ouAG3VFv59ULtJHDTKfdAAXgDAVeyDoQMAxpty6TjQfiz4U9_RaBtvwFLQPy7ItKWAKbzXkA_KcSet0xiJvQCN7NiCaKS1AVYlHDXVP0-E2ywaLYI/s1600/nature.jpg" /></div><div class="img_c"><img class="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoN8eYc88Kl-wnYMXKwHozI3yUB4ouAG3VFv59ULtJHDTKfdAAXgDAVeyDoQMAxpty6TjQfiz4U9_RaBtvwFLQPy7ItKWAKbzXkA_KcSet0xiJvQCN7NiCaKS1AVYlHDXVP0-E2ywaLYI/s1600/nature.jpg" /></div><div class="img_c"><img class="img4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoN8eYc88Kl-wnYMXKwHozI3yUB4ouAG3VFv59ULtJHDTKfdAAXgDAVeyDoQMAxpty6TjQfiz4U9_RaBtvwFLQPy7ItKWAKbzXkA_KcSet0xiJvQCN7NiCaKS1AVYlHDXVP0-E2ywaLYI/s1600/nature.jpg" /></div><div class="img_c"><img class="img5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoN8eYc88Kl-wnYMXKwHozI3yUB4ouAG3VFv59ULtJHDTKfdAAXgDAVeyDoQMAxpty6TjQfiz4U9_RaBtvwFLQPy7ItKWAKbzXkA_KcSet0xiJvQCN7NiCaKS1AVYlHDXVP0-E2ywaLYI/s1600/nature.jpg" /></div><div class="img_c"><img class="img6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoN8eYc88Kl-wnYMXKwHozI3yUB4ouAG3VFv59ULtJHDTKfdAAXgDAVeyDoQMAxpty6TjQfiz4U9_RaBtvwFLQPy7ItKWAKbzXkA_KcSet0xiJvQCN7NiCaKS1AVYlHDXVP0-E2ywaLYI/s1600/nature.jpg" /></div><div class="img_c"><img class="img7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoN8eYc88Kl-wnYMXKwHozI3yUB4ouAG3VFv59ULtJHDTKfdAAXgDAVeyDoQMAxpty6TjQfiz4U9_RaBtvwFLQPy7ItKWAKbzXkA_KcSet0xiJvQCN7NiCaKS1AVYlHDXVP0-E2ywaLYI/s1600/nature.jpg" /></div><div class="img_c"><img class="img8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoN8eYc88Kl-wnYMXKwHozI3yUB4ouAG3VFv59ULtJHDTKfdAAXgDAVeyDoQMAxpty6TjQfiz4U9_RaBtvwFLQPy7ItKWAKbzXkA_KcSet0xiJvQCN7NiCaKS1AVYlHDXVP0-E2ywaLYI/s1600/nature.jpg" /></div><div class="img_c"><img class="img9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoN8eYc88Kl-wnYMXKwHozI3yUB4ouAG3VFv59ULtJHDTKfdAAXgDAVeyDoQMAxpty6TjQfiz4U9_RaBtvwFLQPy7ItKWAKbzXkA_KcSet0xiJvQCN7NiCaKS1AVYlHDXVP0-E2ywaLYI/s1600/nature.jpg" /></div><div class="img_c"><img class="img10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoN8eYc88Kl-wnYMXKwHozI3yUB4ouAG3VFv59ULtJHDTKfdAAXgDAVeyDoQMAxpty6TjQfiz4U9_RaBtvwFLQPy7ItKWAKbzXkA_KcSet0xiJvQCN7NiCaKS1AVYlHDXVP0-E2ywaLYI/s1600/nature.jpg" /></div></div>
7. Now save your HTML/Javascript'.
You are done. If you get any problem then comment us, we will respond you quickly.
0 comments:
Post a Comment