Animasi css3 mampu menampilkan gambar seperti urutan film

Anda sekarang tidak perlu lagi menggunakan animasi Flash untuk membuat web berbasis animasi dan interaktivitas. Freelance web developer John Galantini menyajikan 10 dari eksperimen terbaik di CSS3 animasi untuk menginspirasi Anda.

The CSS3 terbaru properti telah membuka banyak pintu baru untuk web designer dan pengembangnya. Sekarang mungkin sudah saatnyauntuk membuat animasi dan interaktivitas sepenuhnya di CSS markup, tanpa pengaruh Flash, Silverlight atau After Effects.

Percobaan inspirasional dalam CSS3 animasi tercantum di sini menunjukkan apa yang CSS mampu lakukan - dan sementara beberapa memanfaatkan sedikit bantuan JavaScript, tidak ada plug-in yang diperlukan. Berhati-hatilah, meskipun: karena animasi tersebut secara khusus dibuat sebagai percobaan, sebagian besar animasi hanya akan bekerja pada versi terbaru dari browser web anda (dan beberapa juga hanya akan bekerja di browser tertentu).

Untuk mempelajari lebih lanjut tentang animasi CSS, periksa A masterclass di CSS animasi dari A masterclass in CSS animations from .net magazine



Untuk mengetahui bagaimana ia diciptakan, lihat contoh animasi mereka di http://stuffandnonsense.co.uk/content/demo/madmanimation/

Dibuat oleh: Anthony Calzadilla, Geri Coady dan Andy Clarke

CATATAN: Ini animasi CSS3 hanya bekerja di browser berbasis WebKit, yang meliputi Safari dan Chrome. Atau, Anda dapat melihatnya pada video YouTube di atas.
The Man dari Hollywood
Man dari Hollywood

Membuat animasi bergerak dengan css3 tanpa gambar dan javascript

Di kesempatan kali ini saya mau berbagi trik lagi menggunakan efek animasi css3. Bagaimana membuat sebuah objek bergerak tanpa javasript dan gambar seperti objek di bawah ini?

CodeStyle
Animation

Tentu kita berpikir objek ini terbentuk dari gambar atau dari pengaruh javascript yang di tuliskan pada halaman artikel atau yang di tanam pada pengaturan kode html. Hilangkan prasangka tersebut, karena css3 mampu melakukan hal ini.

Coba simak kode berikut sebagai referensi dan praktekan pada browser anda.

Berikut Kodenya :

<style>
#animated_div {
width:100px;
height:60px;
background:#92B901;
color:#000;
position:relative;
font-weight:bold;
font-size:20px;
text-shadow:1px 1px 3px #000;
margin-left:10px;
animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-webkit-animation:animated_div 5s 1;
-o-animation:animated_div 5s 1;
border-radius:5px;
-webkit-border-radius:5px;
box-shadow:1px 4px 8px #000;
}


@keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animated_div
{
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(20deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:500px;}
55% {-webkit-transform: rotate(0deg);left:500px;}
70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animated_div
{
0% {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(20deg);left:0px;}
50% {-moz-transform: rotate(0deg);left:500px;}
55% {-moz-transform: rotate(0deg);left:500px;}
70% {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}

</style>
<div id="animated_div"><a title='membuat animasi dengan css3' href='http://codestyle.blogspot.com'>CodeStyle</a><br><span style="font-size:12px;color:white;">Animation</span></div>

demikian posting kali ini. semoga saja bermanfaat buat kita semua, hitung-hitung saling berbagi ilmu..

Spyning icon Rotasi pada gambar menggunakan css3

Kali ini kita akan membuat rotasi pada gambar menggunakan kode html dan css3. Trik ini dapat anda gunakan untuk menu animasi, header animasi dan lain-lain yang ada animasinya.

Seperti biasanya kita mulai dengan kode CSS..
Berikut kode CSS3 nya :

<style>

#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

</style>

Berputar bolak balik 360 derajat jika mouse mendekati objek

<div id="socialicons">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Berputar 60 derajar jika mouse mendekati objek atau menjauhi

<div id="socialicons2">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Berputar terbalik 360 derajar jika mouse mendekati objek saja

<div id="socialicons3">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Bagaimana, mudah bukan? segalanya kini lebih mudah dengan adanya fitur html5 dan css3. semoga bermanfaat ...

Membuat efek mouse unik menari dengan javascript

Kali ini kita akan membuat efek pada kursor mouse dengan tiga buah warna yang menari nari di sekelilingnya..
Kayak striptcase aja deh..Hehe...

Nah ini kode javascriptnya yang kamu copas di widget atau posting kamu..

<script language="JavaScript">
//by ycusoy
var a_Colour="red";
var b_Colour="blue";
var c_Colour="green";
var Size=40;

//Alter nothing below !!

var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.03;
if (document.layers){
window.captureEvents(Event.MOUSEMOVE);
function nsMouse(evnt){
xpos = window.pageYOffset evnt.pageX 6;
ypos = window.pageYOffset evnt.pageY 16;
}
window.onMouseMove = nsMouse;
}
else if (document.all)
{
function ieMouse(){
xpos = document.body.scrollLeft event.x 6;
ypos = document.body.scrollTop event.y 16;
}
document.onmousemove = ieMouse;
}

function swirl(){
for (i = 0; i < 3; i )
{
YDummy[i]=ypos Size*Math.cos(ThisStep i*2)*Math.sin((ThisStep)*6);
XDummy[i]=xpos Size*Math.sin(ThisStep i*2)*Math.sin((ThisStep)*6);
}
ThisStep =step;
setTimeout('swirl()',10);
}

var amount=10;
if (document.layers){
for (i = 0; i < amount; i )
{
document.write('<layer name=nsa' i ' top=0 left=0 width=' i/2 ' height=' i/2 ' bgcolor=' a_Colour '></layer>');
document.write('<layer name=nsb' i ' top=0 left=0 width=' i/2 ' height=' i/2 ' bgcolor=' b_Colour '></layer>');
document.write('<layer name=nsc' i ' top=0 left=0 width=' i/2 ' height=' i/2 ' bgcolor=' c_Colour '></layer>');
}
}
else if (document.all){
document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">'
'<div id="IDiv" style="position:relative">');
for (i = 0; i < amount; i )
{
document.write('<div id=x style="position:absolute;top:0px;left:0px;width:' i/2 ';height:' i/2 ';background:' a_Colour ';font-size:' i/2 '"></div>');
document.write('<div id=y style="position:absolute;top:0px;left:0px;width:' i/2 ';height:' i/2 ';background:' b_Colour ';font-size:' i/2 '"></div>');
document.write('<div id=z style="position:absolute;top:0px;left:0px;width:' i/2 ';height:' i/2 ';background:' c_Colour ';font-size:' i/2 '"></div>');
}
document.write('</div></div>');
}
function prepos(){
var ntscp=document.layers;
var msie=document.all;
if (document.layers){
for (i = 0; i < amount; i )
{
if (i < amount-1)
{
ntscp['nsa' i].top=ntscp['nsa' (i 1)].top;ntscp['nsa' i].left=ntscp['nsa' (i 1)].left;
ntscp['nsb' i].top=ntscp['nsb' (i 1)].top;ntscp['nsb' i].left=ntscp['nsb' (i 1)].left;
ntscp['nsc' i].top=ntscp['nsc' (i 1)].top;ntscp['nsc' i].left=ntscp['nsc' (i 1)].left;
}
else
{
ntscp['nsa' i].top=YDummy[0];ntscp['nsa' i].left=XDummy[0];
ntscp['nsb' i].top=YDummy[1];ntscp['nsb' i].left=XDummy[1];
ntscp['nsc' i].top=YDummy[2];ntscp['nsc' i].left=XDummy[2];
}
}
}
else if (document.all){
for (i = 0; i < amount; i )
{
if (i < amount-1)
{
msie.x[i].style.top=msie.x[i 1].style.top;msie.x[i].style.left=msie.x[i 1].style.left;
msie.y[i].style.top=msie.y[i 1].style.top;msie.y[i].style.left=msie.y[i 1].style.left;
msie.z[i].style.top=msie.z[i 1].style.top;msie.z[i].style.left=msie.z[i 1].style.left;
}
else
{
msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];
msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];
msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];
}
}
}
setTimeout("prepos()",10);
}
function Start(){
swirl(),prepos()
}
window.onload=Start;
// -->
</script>

bagaimana, keren kan..