Few weeks ago I posted a tutorial about Awesome Jquery Rotate Effect For Blogger Images.
Actually you can add that image rotating to your side bar with some
special image, who want to make their blog attractive.Anyway,Today im
gonna explain about,Make Image swap animation with using CSS key-frames.
Most of every new browsers are support with this effect. You can add
this to blogger side bar by resizing images.Im just using CSS for this
swapping effect. CSS code is too long for this widgets.Hope you can
understand it.if you have any problem regarding to this tutorial let me
know.
Make Image swap animation with using CSS
1. Log in to blogger account and Click drop down.
2. Now select "Layout" Like Below.
4. Paste below code. (You can add any Names for Title )
<style> .btcontainer { position: relative;margin: 30px;height: 250px;width: 550px;float: left;} /*Photo Border*/ .imagebt1, .imagebt2 { border: 5px solid #fff;border-radius: 3px;height: 200px;margin: 20px;position: absolute;width: 300px; -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3);} .imagebt1 { -webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);} .imagebt2 { left: 100px;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);} /*HOVERS*/ .btcontainer:hover { cursor: pointer;} .btcontainer:hover .imagebt1 { -webkit-animation: imagebt1 1.5s 2 alternate;-moz-animation: imagebt1 1.5s 2 alternate;-ms-animation: imagebt1 1.5s 2 alternate;-o-animation: imagebt1 1.5s 2 alternate;animation: imagebt1 1.5s 2 alternate; } .btcontainer:hover .imagebt2 { -webkit-animation: imagebt2 1.5s 2 alternate; -moz-animation: imagebt2 1.5s 2 alternate; -ms-animation: imagebt2 1.5s 2 alternate; -o-animation: imagebt2 1.5s 2 alternate; animation: imagebt2 1.5s 2 alternate;} @keyframes "imagebt1" { 0% {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg); } 50% {-webkit-transform: rotate(-14deg);-moz-transform: rotate(-14deg);-o-transform: rotate(-14deg);-ms-transform: rotate(-14deg);transform: rotate(-14deg); } 100% {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg); }} @-moz-keyframes imagebt1 { 0% { -moz-transform: rotate(-7deg);transform: rotate(-7deg); } 50% { -moz-transform: rotate(-14deg);transform: rotate(-14deg); } 100% { -moz-transform: rotate(-7deg);transform: rotate(-7deg); } } @-webkit-keyframes "imagebt1" { 0% { -webkit-transform: rotate(-7deg);transform: rotate(-7deg); } 50% { -webkit-transform: rotate(-14deg);transform: rotate(-14deg); } 100% { -webkit-transform: rotate(-7deg);transform: rotate(-7deg); } } @-ms-keyframes "imagebt1" { 0% {-ms-transform: rotate(-7deg);transform: rotate(-7deg); } 50% {-ms-transform: rotate(-14deg);transform: rotate(-14deg); } 100% {-ms-transform: rotate(-7deg);transform: rotate(-7deg); } } @-o-keyframes "imagebt1" { 0% {-o-transform: rotate(-7deg);transform: rotate(-7deg); } 50% {-o-transform: rotate(-14deg);transform: rotate(-14deg); } 100% {-o-transform: rotate(-7deg);transform: rotate(-7deg); } } @keyframes "imagebt2" { 0% { left: 100px;z-index: 1;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg); } 49% { left: 350px;z-index: 1;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg); } 50% { left: 350px;z-index: -3;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg); } 100% { left: 100px;z-index: -3;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg); } } @-moz-keyframes imagebt2 { 0% {left: 100px;z-index: 1;-moz-transform: rotate(7deg);transform: rotate(7deg); } 49% { left: 350px;z-index: 1;-moz-transform: rotate(20deg);transform: rotate(20deg); } 50% { left: 350px;z-index: -3;-moz-transform: rotate(20deg);transform: rotate(20deg); } 100% { left: 100px;z-index: -3;-moz-transform: rotate(7deg);transform: rotate(7deg); } } @-webkit-keyframes "imagebt2" { 0% {left: 100px;z-index: 1;-webkit-transform: rotate(7deg);transform: rotate(7deg); } 49% { left: 350px;z-index: 1;-webkit-transform: rotate(20deg);transform: rotate(20deg); } 50% {left: 350px;z-index: -3;-webkit-transform: rotate(20deg);transform: rotate(20deg); } 100% {left: 100px;z-index: -3;-webkit-transform: rotate(7deg);transform: rotate(7deg); } } @-ms-keyframes "imagebt2" { 0% {left: 100px;z-index: 1;-ms-transform: rotate(7deg);transform: rotate(7deg); } 49% {left: 350px;z-index: 1;-ms-transform: rotate(20deg);transform: rotate(20deg); } 50% {left: 350px;z-index: -3;-ms-transform: rotate(20deg);transform: rotate(20deg); } 100% {left: 100px;z-index: -3;-ms-transform: rotate(7deg);transform: rotate(7deg); } } @-o-keyframes "imagebt2" { 0% {left: 100px;z-index: 1;-o-transform: rotate(7deg);transform: rotate(7deg); } 49% {left: 350px;z-index: 1;-o-transform: rotate(20deg);transform: rotate(20deg); } 50% {left: 350px;z-index: -3;-o-transform: rotate(20deg);transform: rotate(20deg); } 100% {left: 100px;z-index: -3;-o-transform: rotate(7deg);transform: rotate(7deg); } } </style> <div class="btcontainer"> <img class="imagebt1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3_TZWll9RQFcqLKkAwf21LWwL16N9Bq7unR6sjxMvjIrVmd3BXxD-ShIYV28xg4JKk34B9lNNF1kGcnlUcNt2X7XX16S7032SQ3d11uE6U1x94wicevuQBlsa-jMLAS_rfUOWEyrH0II/s1600/image1bt.jpg" alt=""> <img class="imagebt2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_tzD0HfF4zC9gM-FwqCjcCPG03FU_iP5Hmew4GmFgnkNb0L_7kMtCmTWINflQgQjcxamPXTdHJ_fSDvmZrGE3CgE2jQDjuMyo9ebCGeIV6hSSmp77zVhXCnvljTf9m5CJ72XUFgLh16Q/s1600/image2bt.jpg" alt=""> </div>You can change above two urls for changing your images.
5. Now save your HTML/Javascript'. You are done...
If you need any help for Image Swap Animation Widget, Just leave a comment.
0 comment:
Post a Comment