/* HourGlass THEME */ .ip-header { position: fixed; top: 0; z-index: 100; min-height: 480px; width: 100%; height: 100%; background: #505050 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmgBn63Xy93Q-liqCuagUsbwD_rnNODt4N_a6O950WcuCsHpK9aijMbT-V6Q0RyT_g6iilt8GbUdwxrkgV-dRg82d57nNhAAg1bgWeQ2uy8yZ_oIcVq_5mJtBeyehODdE1lqvQjElhdws/s1600/hourglass.gif) no-repeat center center; /* warna background dan gambar loader */ z-index: 999999; } .ip-header .ip-loader svg path.ip-loader-circlebg { stroke: #fff; /* warna background circle loader */ } .ip-header .ip-loader svg path.ip-loader-circle { -webkit-transition: stroke-dashoffset 0.2s; transition: stroke-dashoffset 0.2s; stroke: #13BAFA; /* Warna garis circle saat loading */ } /* Pre-Loader main */ .ip-loader { position: absolute; left: 0; width: 100%; opacity: 0; cursor: default; pointer-events: none; } .ip-loader { bottom: 20%; } .ip-header .ip-inner { display: block; margin: 0 auto; } .ip-header .ip-loader svg path { fill: none; stroke-width: 6; } /* Animasi */ .loading .ip-loader { opacity: 1; -webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; } .loading .ip-loader { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes animInitialHeader { from { opacity: 0; -webkit-transform: translate3d(0,800px,0); } } @keyframes animInitialHeader { from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); } } .loaded .ip-loader { opacity: 1; } .loaded .ip-loader { -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes animLoadedLoader { to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } } @keyframes animLoadedLoader { to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } } /* Animasi header ketika loading selesai */ .loaded .ip-header { -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes animLoadedHeader { to { -webkit-transform: translate3d(0,-100%,0); } } @keyframes animLoadedHeader { to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } } .layout-switch .ip-header { position: absolute; } /* End Preloader */

Senin, 27 Februari 2012

Cara membuat animasi tulisan berjalan di blog

Pernahkah anda membuka blog kemudian di blog tersebut ada animasi tulisan berjalan, mungkin kalian pernah mengunjunginya dan menganggap hal seperti itu sudah biasa tapi bagi yang belum mngetahui hal tersebut pasti akan merasa kagum dan ingin membuat blog mereka seperti itu.
tulisan kali ini saya akan memposting sebuah animasi tulisan berjalan dan silahkan anda mengcopy atau membuat sendiri tulisan tersebut.
Cara membuat tulisan berjalan di blog.
1. Masuk ke dashbord blog anda
2. Kemudian pilih Rancangan
3. Klik New Widget
4. Pilih HTML java script
5. Paste kode script ke widget anda

1. Tulisan berjalan ke kiri

< marquee behavior="scroll">Lkp Dian Nusantara Surakarta</marquee>

2. Tulisan berjalan ke kanan

<marquee behavior="sroll" direction="right">Program Pendidikan Satu Tahun</marquee>

3. Tulisan berjalan ke atas.

<marquee height="30" behavior="scroll" direction="up">Ayo Bergabung Bersama Lkp Dian Nusantara Solo</marquee>

4. Tulisan berjalan ke bawah.

<marquee height="30" behavior="scroll" direction="down">Jangan Pernah Ragu Untuk Memilih Dian Nusantara Solo</marquee>

5. Tulisan Memantul.

<marquee width="400" behavior="alternate">DINUS SOLO</marquee>

Selamat Mencoba ....

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)