Code သံုးၿပီး.animation လုပ္ရေအာင္..1 ~ Zero Myanmar

Friday, January 25, 2013

Code သံုးၿပီး.animation လုပ္ရေအာင္..1

ဒီတစ္ခါေတာ့...စာအုပ္မေလ့လာေတာ့ဘူး..။ coding ေတြေလ့လာၾကည့္ရေအာင္..။ html နဲ႔ css သံုးၿပီး.. animation တစ္ခုဖန္တီးၾကမယ္.. :)
ေအာက္မွာၿပထားတဲ့ code ေတြကုိ.. copy ကူးလိုက္ပါ..။

<html>
<head>
<style>
* {margin: 0; padding: 0;}

#logo {position: relative;}

.horse {
    width: 469px; height: 54px;
    background: url(http://www.google.co.in/logos/2012/muybridge12-hp-f.jpg);
}

.frame {position: absolute; left: 0; top: 0; z-index: 1;}

/*Clicking the label will select the checkbox which will be used to
trigger the animation of the horses*/

#play_button:checked ~ .horse {
    -webkit-animation: horse-ride 0.5s steps(12, end) infinite;
    -webkit-animation-delay: 2.5s;
    -moz-animation: horse-ride 0.5s steps(12, end) infinite;
    -moz-animation-delay: 2.5s;
    /*Lets add a pre-anim which will start slowly and merge into the fast animation*/
    background-position: -2412px 0;
    -webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
    -moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

/*Hide the play image*/
#play_button:checked ~ #play_image img{
    left: -68px;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
}

/*804px is the width of the image with 12 horse frames
steps are used in the animation to have the best animation effect
it will position the horse frames accurately in the boxes instead of
tweening it px by px all the way through*/
@-webkit-keyframes horse-ride {
    0% {background-position: 0 0;}
    100% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
    0% {background-position: 0 0;}
    100% {background-position: -804px 0;}
}

#play_button {display: none;}
#play_label {
    width: 67px; height: 54px;
    display: block;
    position: absolute; left: 201px; top: 54px; z-index: 2;
}
#play_image {position: absolute; left: 201px; top: 54px; z-index: 0;
    overflow: hidden; width: 68px; height: 55px;
}
#play_image img {position: absolute; left: 0; top: 0;}
</style>
<body>


<div id="logo">
    <div class="frame">
        <img src="https://www.google.com/logos/2012/muybridge12-hp-v.png" />
    </div>

    
    <label for="play_button" id="play_label"></label>
    <input type="checkbox" id="play_button" name="play_button" />

    
    <span id="play_image">
        <img src="http://www.google.co.in/logos/2012/muybridge12-hp-p.jpg" />
    </span>

    <div class="horse"></div>
    <div class="horse"></div>
    <div class="horse"></div>
</div>
</body>
</html>

ၿပီးရင္.. notepad မွာထည့္လိုက္ပါ..။
animation.html ဆုိၿပီး.. desktop မွာ.. save လုပ္လိုက္ပါ့မယ္..။
desktop မွာ..အခုသိမ္းလိုက္တဲ့.. animation.html ဖိုင္ေလးကုိ.. double click ႏွိပ္ၿပီး ဖြင့္လိုက္ပါ..။
ပံုေတြအလယ္မွာ.. Play button ေလးရွိပါတယ္...ႏွိပ္ၾကည့္လိုက္ပါ..။
ဘာပံုမွမပါဘဲ.. coding ေတြနဲ႔..ၿမင္းစီးေနတဲ့..ပံုတစ္ပံုရပါၿပီ.. ^_^

Please Give Us Your 1 Minute In Sharing This Post!

SOCIALIZE IT →

Zero Myanmar

Friday, January 25, 2013