Sahabat Renz Blogspot.com

TRIKS INTERNET untuk Blog dan Komputer plus Informasi

Get our toolbar!
» Belajar » Cara Membuat Efek Loading Tanpa Jqueri

Cara Membuat Efek Loading Tanpa Jqueri

by Produksi Sukabumi , at 14.37 , have 11 komentar
       Yap sebelum nya saya sudah membuat artikel tentang Tutorial Cara Membuat Efek Loading Blog, saya kira cara nya cuman hanya ini, tapi ternyata ada lagi cara lain untuk membuat Efek tersebut . Kata nya Cara yang kemarin menggunakan harus menggunakan Jquery, Tapi kalau yang sekarang tidak karena ini Cara Membuat Efek Loading Tanpa Jqueri. (ya walaupun saya juga tidak tahu apa tutor yang kemarin harus mneggunakan Jqueri atau engga, hehe tapi mau di uji coba ah,. hehe)
Yap Kalau misal Sahabat tidak suka dengan Efek Load Jqueri karena mungkin kata nya membuat berat blog (tapi blog ini pakai yang Cara Efek Load Pertama, hehe bukan cara tanpa Jqueri). Nah cara yang ini yaitu dengan menggunakan Css @keyframes dan gak usah pakai script apapun sehingga blog sahabat terasa lebih ringan.
contoh demo nya Demo (Efek nya lihat ketika postingan akan muncul) Yap langsung saja taruh CSS berikut diatas ]]> atau gunakan ctrl+f untuk memudahkan mencari

efek splash(hehe sebenar nya ga tahu nama efek nya) 

 @keyframes myfirst { from{opacity:0;} to{opacity:10;} }
    @-moz-keyframes myfirst    {    from{opacity:0;}    to{opacity:10;}    }
    @-webkit-keyframes myfirst    {    from{opacity:0;}    to{opacity:10;}    }
    @keyframes    {    from{transform:translate(0px, 9000px)}
    to{transform:translate(0px, 0px)}    }
    @-moz-keyframes    {    from{-moz-transform:translate(0px, 9000px)}
    to{-moz-transform:translate(0px, 0px)}    }
    @-webkit-keyframes    {    from{-webkit-transform:translate(0px, 9000px)}
    to{-webkit-transform:translate(0px, 0px)}    }
    #header-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;
-webkit-animation: myfirst 5s;}
    #main-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;
-webkit-animation: myfirst 5s;}
    #nav {animation: myfirst 5s;-moz-animation: myfirst 5s;
-webkit-animation: myfirst 5s;}
    #sidebar-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;
-webkit-animation: myfirst 5s;}
    h1,h2,h3,#id css {animation: myfirst 5s;-moz-animation: myfirst 5s;
-webkit-animation: myfirst 5s;}
    h1,h2,h3,.post img {animation: myfirst 5s;-moz-animation: myfirst 5s;
-webkit-animation: myfirst 8s;}
Tambahan:
Nah jika sahabat ingin Menambahkan Efek Loading Page pada elemen lain nya sahabat hanya tinggal menambahkan css seperti ini 

    #nama-elemen {animation: myfirst 5s;-moz-animation: myfirst 5s;
-webkit-animation: myfirst 5s;}
contoh 

    #footer {animation: myfirst 5s;-moz-animation: myfirst 5s;
-webkit-animation: myfirst 5s;}
sehingga kalau digabungkan dengan css yang di atas menjadi 

@keyframes myfirst
    {from{opacity:0;}
    to{opacity:10;}    }
    @-moz-keyframes myfirst
    { bla bla bla bla bla blabla blabla
 blabla blabla blabla blabla blabla blabla blabla blabla 
blabla blabla blabla blabla blabla blabla blabla blabla 
blabla blabla blabla blabla blabla bla haha hahhahahahahha sampai
 beres kode yang tadi bla bla hahha nah yang akan ditambah kan
 setelah kode ini
  #footer {animation: myfirst 5s;-moz-animation: myfirst 5s;
-webkit-animation: myfirst 5s;}
lalu simpan.
sumber : http://culkiboy.blogspot.com/2014/01/membuat-efek-load-page-sederhana-hanya.html

Atau dengan efek animasi lain
A. Animation 1 (Bounce and Rotate efek) 

    @-webkit-keyframes WAKloading{     0%{-webkit-transform:translate(0px,0px)
 scale(0.50);opacity:1}    
 20%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}
     40%{-webkit-transform:translate(0px,0px) scale(0.50);opacity:1;}  
   60%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}   
  80%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;
-webkit-transform:rotate(-360deg);}
     100%{-webkit-transform:translate(0px,0px) scale(1);opacity:1;}     }
     @-o-keyframes WAKloading{     0%{-o-transform:translate(0px,0px
) scale(0.50);opacity:1}     20%{-o-transform:translate(0px,-200px)
 scale(0.50);opacity:1;}     40%{-o-transform:translate(0px,0px)
 scale(0.50);opacity:1;}     60%{-o-transform:translate(0px,-200px)
 scale(0.50);opacity:1;}     80%{-o-transform:translate(0px,-200px) 
scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
     100%{-o-transform:translate(0px,0px) scale(1);opacity:1;}     }
     @-moz-keyframes WAKloading{     0%{-moz-transform:translate(0px,0px)
 scale(0.50);opacity:1}     20%{-moz-transform:translate(0px,-200px)
 scale(0.50);opacity:1;}     40%{-moz-transform:translate(0px,0px)
 scale(0.50);opacity:1;}     60%{-moz-transform:translate(0px,-200px)
 scale(0.50);opacity:1;}     80%{-moz-transform:translate(0px,-200px)
 scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
     100%{-moz-transform:translate(0px,0px) scale(1);opacity:1;}     } 
    @-ms-keyframes WAKloading{     0%{-ms-transform:translate(0px,0px)
 scale(0.50);opacity:1}     20%{-ms-transform:translate(0px,-200px)
 scale(0.50);opacity:1;}     40%{-ms-transform:translate(0px,0px)
 scale(0.50);opacity:1;}     60%{-ms-transform:translate(0px,-200px)
 scale(0.50);opacity:1;}     80%{-ms-transform:translate(0px,-200px)
 scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}     
100%{-ms-transform:translate(0px,0px) scale(1);opacity:1;}     }     
@keyframes WAKloading{     0%{transform:translate(0px,0px) 
scale(0.50);opacity:1}     20%{transform:translate(0px,-200px)
 scale(0.50);opacity:1;}     40%{transform:translate(0px,0px) 
scale(0.50);opacity:1;}     60%{transform:translate(0px,-200px) 
scale(0.50);opacity:1;}     80%{transform:translate(0px,-200px) 
scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}     
100%{transform:translate(0px,0px) scale(1);opacity:1;}     }
3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya! 

;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;
-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s
4.Sehingga nantinya jadi seperti ini : 

#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;
-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s}
5. Save Template!

B. Animation 2 (Earthquake Effect) 

    @keyframes WAKloading{     0%{opacity:1;-webkit-transform:rotate(0deg);}
     5%{opacity:1;-webkit-transform:rotate(5deg);}     
10%{opacity:1;-webkit-transform:rotate(-5deg);}     
15%{opacity:1;-webkit-transform:rotate(5deg);}     
20%{opacity:1;-webkit-transform:rotate(-5deg);}     
25%{opacity:1;-webkit-transform:rotate(5deg);}     
30%{opacity:1;-webkit-transform:rotate(-5deg);}    
 35%{opacity:1;-webkit-transform:rotate(-5deg);}     
40%{opacity:1;-webkit-transform:rotate(5deg);}     
45%{opacity:1;-webkit-transform:rotate(-5deg);}     
50%{opacity:1;-webkit-transform:rotate(5deg);}     
55%{opacity:1;-webkit-transform:rotate(-5deg);}     
60%{opacity:1;-webkit-transform:rotate(5deg);}
     65%{opacity:1;-webkit-transform:rotate(-5deg);}    
 70%{opacity:1;-webkit-transform:rotate(5deg);}     
80%{opacity:1;-webkit-transform:rotate(-5deg);}  
   85%{opacity:1;-webkit-transform:rotate(5deg);}   
  90%{opacity:1;-webkit-transform:rotate(-5deg);}   
  95%{opacity:1;-webkit-transform:rotate(5deg);}    
 35%{opacity:1;-webkit-transform:rotate(0deg);}     }     
@-o-keyframes WAKloading{     
0%{opacity:1;-webkit-transform:rotate(0deg);}     
5%{opacity:1;-webkit-transform:rotate(5deg);}     
10%{opacity:1;-webkit-transform:rotate(-5deg);}     
15%{opacity:1;-webkit-transform:rotate(5deg);}     
20%{opacity:1;-webkit-transform:rotate(-5deg);}    
 25%{opacity:1;-webkit-transform:rotate(5deg);}     
30%{opacity:1;-webkit-transform:rotate(-5deg);}     
35%{opacity:1;-webkit-transform:rotate(-5deg);}     
40%{opacity:1;-webkit-transform:rotate(5deg);}     
45%{opacity:1;-webkit-transform:rotate(-5deg);}    
 50%{opacity:1;-webkit-transform:rotate(5deg);}     
55%{opacity:1;-webkit-transform:rotate(-5deg);}    
 60%{opacity:1;-webkit-transform:rotate(5deg);}    
 65%{opacity:1;-webkit-transform:rotate(-5deg);}    
 70%{opacity:1;-webkit-transform:rotate(5deg);}     
80%{opacity:1;-webkit-transform:rotate(-5deg);}     
85%{opacity:1;-webkit-transform:rotate(5deg);}     
90%{opacity:1;-webkit-transform:rotate(-5deg);}     
95%{opacity:1;-webkit-transform:rotate(5deg);}    
 35%{opacity:1;-webkit-transform:rotate(0deg);}     }     
@-webkit-keyframes WAKloading{     
0%{opacity:1;-webkit-transform:rotate(0deg);}     
5%{opacity:1;-webkit-transform:rotate(5deg);}     
10%{opacity:1;-webkit-transform:rotate(-5deg);}     
15%{opacity:1;-webkit-transform:rotate(5deg);}     
20%{opacity:1;-webkit-transform:rotate(-5deg);}     
25%{opacity:1;-webkit-transform:rotate(5deg);}     
30%{opacity:1;-webkit-transform:rotate(-5deg);}     
35%{opacity:1;-webkit-transform:rotate(-5deg);}     
40%{opacity:1;-webkit-transform:rotate(5deg);}     
45%{opacity:1;-webkit-transform:rotate(-5deg);}     
50%{opacity:1;-webkit-transform:rotate(5deg);}     
55%{opacity:1;-webkit-transform:rotate(-5deg);}  
   60%{opacity:1;-webkit-transform:rotate(5deg);}  
   65%{opacity:1;-webkit-transform:rotate(-5deg);} 
    70%{opacity:1;-webkit-transform:rotate(5deg);} 
    80%{opacity:1;-webkit-transform:rotate(-5deg);}
     85%{opacity:1;-webkit-transform:rotate(5deg);} 
    90%{opacity:1;-webkit-transform:rotate(-5deg);}
     95%{opacity:1;-webkit-transform:rotate(5deg);}   
  35%{opacity:1;-webkit-transform:rotate(0deg);}     }   
  @-moz-keyframes WAKloading{    
 0%{opacity:1;-moz-transform:rotate(0deg
5%{opacity:1;-moz-transform:rotate(5deg);}
 10%{opacity:1;-moz-transform:rotate(-5deg);} 
15%{opacity:1;-moz-transform:rotate(5deg);} 
20%{opacity:1;-moz-transform:rotate(-5deg);} 
25%{opacity:1;-moz-transform:rotate(5deg);} 
30%{opacity:1;-moz-transform:rotate(-5deg);}
 35%{opacity:1;-moz-transform:rotate(-5deg);}
 40%{opacity:1;-moz-transform:rotate(5deg);}
 45%{opacity:1;-moz-transform:rotate(-5deg);}
 50%{opacity:1;-moz-transform:rotate(5deg);}
 55%{opacity:1;-moz-transform:rotate(-5deg);} 
60%{opacity:1;-moz-transform:rotate(5deg);} 
65%{opacity:1;-moz-transform:rotate(-5deg);}
 70%{opacity:1;-moz-transform:rotate(5deg);}
 80%{opacity:1;-moz-transform:rotate(-5deg);}
 85%{opacity:1;-moz-transform:rotate(5deg);} 
90%{opacity:1;-moz-transform:rotate(-5deg);} 
95%{opacity:1;-moz-transform:rotate(5deg);}
 35%{opacity:1;-moz-transform:rotate(0deg);} }
3. Cari kode #outer-wrapper sahabat seperti tadi.
4. Sehingga hasilnya nati jadi seperti ini : 

#outer-wrapper {-webkit-animation:WAKloading 3s;
-moz-animation:WAKloading 3s;-ms-animation:WAKloading 3s;
animation:WAKloading 3s;-o-animation:WAKloading 3s;}
5. Save Template

C. Animation3 ( Sliding Effect ) : 

@-webkit-keyframes WAKloading{from{-webkit-transform:translate(-1000px,0px);opacity:0}
to{-webkit-transform:translate(0px,0px);opacity:1.1;}}
@-moz-keyframes WAKloading{from{-moz-transform:translate(-1000px,0px);opacity:0}
to{-moz-transform:translate(0px,0px);opacity:1.1;}}
   @-ms-keyframes WAKloading{from{-ms-transform:translate(-1000px,0px);opacity:0}
to{-ms-transform:translate(0px,0px);opacity:1.1;}}
     @keyframes WAKloading{from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}}
3. Cari kode #outer-wrapper sahabat seperti tadi
4. Sehingga menjadi seperti ini : 

#outer-wrapper {animation:WAKloading 2s;-webkit-animation:WAKloading 2s;
-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;
-ms-animation:WAKloading 2s;animation:WAKloading 2s;}
5. Save Template !

hehe yap gimana udah paham kan Cara Membuat Efek Loading Tanpa Jqueri
Yap semoga bermanfaat hihi
Cara Membuat Efek Loading Tanpa Jqueri
Cara Membuat Efek Loading Tanpa Jqueri - written by Produksi Sukabumi , published at 14.37, categorized as Belajar . And have 11 komentar
Facebook Twitter Google+ Linkedin Technorati Digg
11 komentar Add a comment
Gupitan
Gupitan 29 Januari 2014 pukul 14.41
Demonya mana ya sob :)
Produksi Sukabumi
Produksi Sukabumi AUTHOR 29 Januari 2014 pukul 14.49 Delete
haha,. oiya lupa gan,. heri,. hehe, yap bentar ane update dulu,. hehe
Produksi Sukabumi
Produksi Sukabumi AUTHOR 29 Januari 2014 pukul 15.11 Delete
yap sudah di update gan heri demo nya,. hehe
Reply Delete
Unknown
Unknown 29 Januari 2014 pukul 21.10
hadir mas Randi Andrian :D
nyimak dulu yah...
Reply Delete
Produksi Sukabumi
Produksi Sukabumi Bukan siapa-siapa 29 Januari 2014 pukul 23.58
thanks gan Aldino..
wkwkwk bisa aja nih, gan aldino pura-pura, padahal ane nyomot dari gan aldino . haha
Unknown
Unknown 30 Januari 2014 pukul 00.40 Delete
wkwkwkwk, pura-pura gimana sob ?? hahaha :D
Produksi Sukabumi
Produksi Sukabumi AUTHOR 30 Januari 2014 pukul 05.49 Delete
haha,. masih ga mau ngaku nih gan aldino.. haha ane kan ngambil ilmu ini dari gan aldino,. gan sendiri kan udah tahu,. haha
Reply Delete
Zona Nyaman
Zona Nyaman 30 Januari 2014 pukul 16.48
Bagus mas efek nya,bisa ngintip2 gt dr bawah.
makasih sharing nya mas.
Produksi Sukabumi
Produksi Sukabumi AUTHOR 31 Januari 2014 pukul 09.49 Delete
yap,. hehe ya gan, ngintip dulu baru muncul,. hhe

yap sama" gan nehand , n thanks kunjungan nya,. hihi
Reply Delete
Unknown
Unknown 30 Januari 2014 pukul 18.49
wih di update lagi nih.. mantap dah efek efek nya :D
Produksi Sukabumi
Produksi Sukabumi AUTHOR 31 Januari 2014 pukul 09.50 Delete
hehe iya gan aldino biar lebih jos.. hehe
Reply Delete

Yap silahkan pendapat anda tentang artikel ini.
Bebas berkomentar asal tidak ada pihak yang dirugikan.

Cancel Reply
GetID
Theme designed by Damzaky - Published by Proyek-Template
notifikasi
close
To Top Page Up Page Down To Bottom Auto Scroll Down Stop Scroll Down