Membuat Efek Selonjor dan Melambai Pakai CSS

Perhatikan dan pelajari baik-baik atribut CSS3 yang bernama animation / transition / transform dan keyframes Ke empat properti tersebut jika sudah digabung and menggabungkan diri, dapat tercipta sebuah kreasi top jelegur (*) Cobalah tengok apa yang dapat dilakukan oleh dunia CSS sekarang ini! Sekarang Koben akan berbagi trick CSS agar menghasilkan efek selonjoran dan bergerak-gerak. Sebelum mulai pada acara puncak, berikut ada 2 link sebagai pembelajaran tentang transitions & animations & CSS @keyframes animation
Sobat masih ingat dengan artikel tutorial end of page slide out box jquery plugin? Membuat sesuatu tersembunyi, tetapi ketika kita melakukan scroll ke bawah akan tampaklah apa yg tersembunyi itu.

Dengan 4 elemen yang disebutkan pada awal pos tadi, kita sekarang bisa membuat hal serupa! Cek this out...perhatikan pojok kanan bawah!!!

http://jsbin.com/unilub

Tidak 100% sama, tapi minimal mendekati sama :d

.luncur {
position: fixed;
right: 0;
bottom: 0;
width: 200px;
}
.luncur a {
display: block;
position: relative;
left: 200px;
color: #111;
font-size: 22px;
font-weight: bold;
-webkit-animation: link 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275) 2s forwards;
-moz-animation: link 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275) 2s forwards;
-ms-animation: link 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275) 2s forwards;
-o-animation: link 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275) 2s forwards;
animation: link 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275) 2s forwards;
}
@-webkit-keyframes link{
from{
left:200px;
}
to{
left:20px;
}
}
@-moz-keyframes link{
from{
left:200px;
}
to{
left:20px;
}
}
@-ms-keyframes link{
from{
left:200px;
}
to{
left:20px;
}
}
@-o-keyframes link{
from{
left:200px;
}
to{
left:20px;
}
}
@keyframes link{
from{
left:200px;
}
to{
left:20px;
}
}

HTML planing<div class="luncur">
<a href="javascript:void();" onclick="this.parentElement.style.display='none';">YOUR TITLE</a>
</div>

Jika sesuatu terlihat menarik apalagi unik, selalu saja membuat penasaran :d Pernah melihat sebuah gambar melambai-lambai, seolah-olah menyuruh kepada si penglihat untuk mengklik ;))

http://jsbin.com/eqoliw

Perhatikan sisi kiri monitor engkau, pandangilah terus :p

#flagTwit {
position: fixed;
z-index: 200;
top: 101px;
left: -200px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA_A2VsPIFSDc1B2PM0axy82lvZ45w6mvFxH3gXVJ7wB0v44Z3voPZvNfIiD6lE6PVqtymksPuft3aaVwP5duuCE44aqzouhw1llVBkRz8m3lysWd06KC9_NH64avRiUJ1i_YyTBPoJPM/s320/twit.png);
width: 200px;
height: 240px;
-webkit-animation: twit 35s ease 5s infinite;
-moz-animation: twit 35s ease 5s infinite;
-ms-animation: twit 35s ease 5s infinite;
-o-animation: twit 35s ease 5s infinite;
animation: twit 35s ease 5s infinite;
}
@-webkit-keyframes twit {
0%{
left:-200px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
5%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
left:-30px;
}
5.2%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
5.4%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
5.6%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
5.8%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
6%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
6.2%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
left:-30px;
}
6.4%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
left:-30px;
}
10%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
left:-30px;
}
12%{
left:-200px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
}
@-moz-keyframes twit {
0%{
left:-200px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
5%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
left:-30px;
}
5.2%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
5.4%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
5.6%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
5.8%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
6%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
6.2%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
left:-30px;
}
6.4%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
left:-30px;
}
10%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
left:-30px;
}
12%{
left:-200px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
}
@-ms-keyframes twit {
0%{
left:-200px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
5%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
left:-30px;
}
5.2%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
5.4%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
5.6%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
5.8%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
6%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
6.2%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
left:-30px;
}
6.4%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
left:-30px;
}
10%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
left:-30px;
}
12%{
left:-200px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
}
@-o-keyframes twit {
0%{
left:-200px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
5%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
left:-30px;
}
5.2%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
5.4%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
5.6%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
5.8%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
6%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
6.2%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
left:-30px;
}
6.4%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
left:-30px;
}
10%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
left:-30px;
}
12%{
left:-200px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
}
@keyframes twit {
0%{
left:-200px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
5%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
left:-30px;
}
5.2%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
5.4%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
5.6%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
5.8%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
6%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
6.2%{
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
left:-30px;
}
6.4%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
left:-30px;
}
10%{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
left:-30px;
}
12%{
left:-200px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
}

Markup plan<div id='flagTwit'> </div>Koben punya sebuah blog yg kontennya berisikan resource trik CSS keren punya CSS Box
Happy coding \m/