Langsung ke konten utama

Page Preloading



Hi World, saya akan membagikan tutorial tentang cara membuat efek halaman page preloader menggunakan animasi CSS dan SVGs untuk diterapkan pada blogger. Trik semacam ini dapat menjadi cara kreatif untuk pengunjung yang bosan nunggu loading, tetapi tentunya juga ga akan membebani.Contohnya pada blog saya sendiri djogzs.com yang saya gunakan saat ini.


Pre Loader ini menggunakan CSS3 pada animasi transisi untuk membuka dan menutup halamanya dan menggunakan SVG animasi Loader,serta javascript agar dapat menentukan timing preloader saat proses loading data/progress yang sudah selesai upada suatu halaman dan menutup preloadernya kembali.

Singkat mengenai SVG : SVG adalah singkatan dari Scalable Vector Graphics dan merupakan format file baru untuk menampilkan grafik dalam pengembangan web yang berbasis XML. masih agak sulit untuk dipahami, tetapi untuk kedepanya dipastikan lebih kompleks untuk membuat object / animasi daripada CSS3.


Sebelum menggunakan trik preloader, saya ingatkan dahulu untuk membackup template anda agar tidak terjadi sesuatu yang tidak diinginkan.


langkah pertama adalah login ke account blogger anda => Template => Edit HTML , lalu pilih 1 tema dari 3 preloader yang saya sediakan. pilih salah satu dan copy paste diatas code :
]]></b:skin>.


1. Glasshour

/* 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/AVvXsEisHfhKNdzotCRU2en8Hurn0gXqgzF6ZbQa35e2jHV_OrZqVNRQSvxROniICxvyk-P6sc1fs_8e2kgTbfhaMmIp_lQ_9yTo8U8WQW7sH4VLeL9IhTfngTy2vM-dq4Zn44OFSXaj-hTqmiS7/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 */
}



2. Kurumi
/* KURUMI THEME */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMt3U_4xM8aqldWKQoh2j_U0Cq_J8Vu5sgqwkY6RuJcOF8aA7lR6lr7oxpo3f5e-pdy5nvDccI42zT2pY4t66PE3LGeKYIdvwG9lV-d4214NK4XANdBX1MFHGCIMtURoaElKxjST12Ab01/s1600/kurumi.gif) no-repeat center center;
/* warna background dan gambar loader */
z-index: 999999;
}
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #222; /* 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: #DB2209; /* Warna garis circle saat loading */
}


3. Nisekoi
/* NISEKOI THEME */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #23B0E8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVnSdviWU0UFrC4Mxn2GUuUK5EAHIAHAmIeVeHJaZ63STCINwXlj_Xsh7PxkXeLDFcyPPap5gtqHSsn5-pZXydp9YkpteGy4coYFPu4A1TcMcMU8TSIfKrtKlvT4d5tjebmrhrEKvI6ZL7/s1600/Nisekoi.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: #FFFF2A; /* Warna garis circle saat loading */
}



Copy-paste juga semua CSS dibawah ini setelah css tema tadi.


/* 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 */




Selanjutnya, Copy-paste semua kode HTML dibawah ini tepat dibawah <body>

atau

<body class ...>


<div class='ip-container' id='ip-container'>
<div class='ip-header'>
<div class='ip-loader'>
<svg class='ip-inner' height='60px' viewBox='0 0 80 80' width='60px'>
<path class='ip-loader-circlebg' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z'/>
<path class='ip-loader-circle' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z' id='ip-loader-circle'/></svg></div></div></div>




Kemudian letakan kode Js dibawah ini tepat diatas kode </head>
<script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaTUFNbmtWeHpzOTQ"/>





dan letakan ketiga Js dibawah ini tepat diatas kode </body>

<script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaUWZGRkJNdGg2bWM"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaOFRtR2kzckx6bkE"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaRy1Qa1RiTDl6T0E"></script>


Simpan template dan buka halaman blog anda dan lihat hasilnya.



Trik pre-loader ini juga dapat kamu kreasikan sendiri seperti mengganti warna,logo,dan warna circle loader
caranya :

Cari CSS seperti dibawah ini, lalu ganti url/alamat gambar milik kamu yang saya tandai pada text warna merah.

untuk warna background, ganti kode hex yang saya tandai warna biru.

/* KURUMI THEME */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMt3U_4xM8aqldWKQoh2j_U0Cq_J8Vu5sgqwkY6RuJcOF8aA7lR6lr7oxpo3f5e-pdy5nvDccI42zT2pY4t66PE3LGeKYIdvwG9lV-d4214NK4XANdBX1MFHGCIMtURoaElKxjST12Ab01/s1600/kurumi.gif) no-repeat center center;
/* warna background dan gambar loader */
z-index: 999999;
}



Untuk bagian Loadernya, ganti warna hex pada variabel Stroke
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #222; /* 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: #DB2209; /* Warna garis circle saat loading */
}

Java script alternatif (sama aja)
<script src='http://tympanus.net/Tutorials/PagePreloadingEffect/js/modernizr.custom.js' type='text/javascript'></script>


<script src='http://tympanus.net/Tutorials/PagePreloadingEffect/js/classie.js' type='text/javascript'></script>
<script src='http://tympanus.net/Tutorials/PagePreloadingEffect/js/pathLoader.js' type='text/javascript'></script>
<script src='http://tympanus.net/Tutorials/PagePreloadingEffect/js/main.js' type='text/javascript'></script>

Selamat mencoba dan berkreasi, terima kasih :)

Mengenai kode hex dan lain", silakan menuju halaman FAQ's









Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

MATERI SENI BUDAYA KELAS XII SEMESTER 1 "SENI RUPA 2D"

Setelah mempelajari Bab 1 ini kamu diharapkan dapat mengapresiasi dan berkreasi seni rupa sebagai berikut: 1.         Mengidentifikasi jenis, simbol, fungsi, dan nilai estetis dalam karya seni rupa dua dimensi. 2.        Mengidentifikasi bahan, media, dan teknik dalam proses berkarya seni rupa dua dimensi. 3.        Membandingkan jenis, simbol, fungsi, dan nilai estetis teknik dalam karya seni rupa dua dimensi. 4.        Membandingkan bahan, media, dan teknik dalam proses berkarya seni rupa dua dimensi. 5.        Memilih bahan, media, jenis, simbol, fungsi, nilai estetis dan teknik dalam proses berkarya seni rupa dua dimensi. 6.        Membuat karya seni rupa dua dimensi.   Di kelas X dan XI kamu sudah mempelajari berbagai jenis karya seni rupa dua dimensi. Karya-karya tersebut ada yang memiliki fungsi pakai dan ada yang memiliki fungsi hias saja. Masih ingatkah kamu perbedaan karya seni rupa terapan dan seni rupa murni? Cobalah perhatikan benda-benda disekitar kamu, dapatkah kamu
Posting Komentar
Baca selengkapnya

Seni Lukis Cirebon

Geliat Seni Lukisan Kaca Di Cirebon Seni Lukis Kaca Di Wilayah Cirebon My World Seni Lukis Kaca Di Wilayah Cirebon My World Kesenian Kebudayaan Cirebon Seni Lukis Kaca Cirebon Yang Lukisan Kaca Warisan Asli Budaya Cirebon Seni Lukis Kaca Di Wilayah Cirebon My World Teknik Serta Makna Lukisan Kaca Cirebon Direktorat Warisan Dan Seni Lukis Kaca Cirebon Yang Memiliki Nilai Sejarah Tinggi Cirebon Cemerlang Lukisan Kaca Cirebon Bagaimana Sejarah Lukisan Kaca Cirebon Seni Rupa Dictio Community Seni Lukis Kaca Di Wilayah Cirebon My World Membuat Lukisan Kaca Khas Cirebon Ukm Serufo Uny Lukisan Kaca Cirebon Wikipedia Bahasa Indonesia Ensiklopedia Bebas Bung Pata Terus Melestarikan Lukisan Kaca Cirebon Radarcire
Posting Komentar
Baca selengkapnya

Gambar Seni Patung Bali

Seni Pemahatan Patung Bali Hindu Indonesia Gambar Monumen Patung Seni Candi Indonesia Fitur Air Bali Gambar Manusia Monumen Seni Candi Bali Mitologi Patung Inilah 5 Patung Ikonik Di Badung Versi Tribun Bali Tribun Bali Nilai Ekspor Patung Bali April 2018 Capai Rp 66 Miliar Bisnis Seni Ukir Patung Di Gianyar Bali Patung Bambu Bali Berukuran Raksasa Ini Tarik Perhatian Turis Gambar Monumen Asia Patung Gargoyle Seni Naga Budaya Tidak Seperti Nasib Getah Getih Ini Deretan Instalasi Bambu Gallery Karya Seni Bali Wisata Seni Ukir Batu Batubulan Gianyar Hard Rock Fm Patung Patung Unik Di Bali Halaman All Kompasiana Com Tuliskan 2 Contoh Karya Seni Rupa Yang Berasal Dari Bali Brainly Gambar Monumen Patung Pariw
Posting Komentar
Baca selengkapnya