Tekno Sehat - Bosan dengan tampilan blog yang begitu - begitu saja ? Tenang saja , karena pada kali ini admin Devia akan membagikan 3 efek preloading yang wajib kamu coba.
Efek preloading adalah transisi yang muncul sebelum tampilan website atau blog dimuat lalu akan hilang setelah halaman sudah muncul dengan penuh.
Cara Memasang Efek Preloading Keren Di Blogger
Pertama - tama sebelum kamu memasang kode preloading , kamu harus mengganti versi Jquery library versi 1.7.1
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>Cara menggantinya cukup mudah, kalian buka Blogger > Tema > Edit HTML
Setelah itu tambahkan kode ini sebelum </body>
Lalu tambahkan kode HTML dibawah ini dibawah kode <body>
Jika sudah langkah selanjutnya adalah tambahkan kode CSS dibawah ini sebelum </head>
Jelly Box
Jika kamu bosan kamu dapat mencoba efek preloading ini :#preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px)} @keyframes loader{0%{left:-100px}100%{left:110%}} #box{width:50px;height:50px;background:#fff;animation:animate .5s linear infinite;position:absolute;top:0;left:0;border-radius:3px} @keyframes animate{17%{border-bottom-right-radius:3px}25%{transform:translateY(9px) rotate(22.5deg)}50%{transform:translateY(18px) scale(1,.9) rotate(45deg);border-bottom-right-radius:40px}75%{transform:translateY(9px) rotate(67.5deg)}100%{transform:translateY(0) rotate(90deg)}} #shadow{width:50px;height:5px;background:#000;opacity:0.1;position:absolute;top:59px;left:0;border-radius:50%;animation:shadow .5s linear infinite} @keyframes shadow{50%{transform:scale(1.2,1)}}
SVG ANIMATION
SPRING LINE
#preloader{overflow:hidden;background:#00cec9;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #container{width:70px;height:35px;overflow:hidden;position:absolute;top:calc(50% - 17px);left:calc(50% - 35px)} #loader{width:70px;height:70px;border-style:solid;border-top-color:#FFF;border-right-color:#FFF;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;box-sizing:border-box;animation:rotate 3s ease-in-out infinite;transform:rotate(-200deg)} @keyframes rotate{0%{border-width:10px}25%{border-width:3px}50%{transform:rotate(115deg);border-width:10px}75%{border-width:3px}100%{border-width:10px}}
Kesimpulan : Efek Preloading ini dapat mempengaruhi lamanya saat halaman website / blog kamu dimuat.
Sekian dari informasi yang saya dapat berikan semoga bermanfaat terima kasih.
No comments:
Post a Comment