Codepelajar – Animasi menjadi salah satu elemen penting yang digunakan untuk membuat antarmuka yang menarik. Salah satu jenis animasi yang sering ditemui adalah Animation Loading Effect atau efek animasi saat proses pemuatan sedang berlangsung. Tidak hanya membuat tampilan lebih menarik, animasi ini juga memperindah pengalaman pengguna dalam menggunakan aplikasi atau website.
Animation Loading Effect merupakan animasi yang dimunculkan saat aplikasi atau website sedang memuat data atau melakukan proses tertentu. Biasanya, animasi ini berupa tampilan yang bergerak atau berubah secara terus-menerus, menunjukkan bahwa pemuatan sedang berlangsung. Animasi ini memiliki dua fungsi utama, yaitu memberi tahu pengguna bahwa aplikasi sedang bekerja dan menghibur pengguna selama menunggu.
Salah satu contoh Animation Loading Effect yang sering ditemui adalah animasi berputar. Pada animasi ini, biasanya terdapat suatu ikon atau gambar yang berputar mengelilingi porosnya. Hal ini memberikan kesan bahwa aplikasi atau website sedang bekerja dan dapat meningkatkan antusiasme pengguna dalam menunggu. Selain itu, ada juga animasi yang berubah bentuk atau warna secara terus-menerus, memberikan efek visual yang menarik dan membuat antarmuka terkesan lebih dinamis.
Penggunaan Animation Loading Effect juga dapat membantu dalam meminimalisir rasa bosan atau frustrasi pengguna saat menunggu proses pemuatan. Dengan adanya animasi yang menarik, pengguna akan lebih bersabar dalam menunggu, mengurangi kemungkinan meninggalkan aplikasi atau website. Dalam dunia bisnis, hal ini sangat penting karena penggunaan animasi ini dapat membantu mempertahankan pelanggan dan meningkatkan konversi.
Untuk membuat Animation Loading Effect yang unik, diperlukan pemilihan animasi yang tepat sesuai dengan karakteristik aplikasi atau website tersebut. Animasi harus dapat mewakili tujuan atau pesan yang ingin disampaikan. Selain itu, penggunaan warna dan efek khusus juga dapat memberikan sentuhan unik pada animasi. Penting untuk menggunakan animasi yang tidak terlalu membebani kinerja perangkat, sehingga animasi tersebut tetap berjalan dengan lancar tanpa mengganggu pengalaman pengguna.
Dalam mengaplikasikan Animation Loading Effect, penting juga untuk mempertimbangkan faktor kecepatan pemuatan. Animasi yang terlalu lama atau terlalu cepat dapat mengganggu pengalaman pengguna. Sebaiknya, animasi disesuaikan dengan waktu yang dibutuhkan untuk memuat data atau proses aplikasi. Jika pemuatan terlalu lambat, animasi dapat digunakan sebagai pengganti untuk membuat pengguna tetap terlibat dalam pengalaman menggunakan aplikasi atau website.
Apa itu blogspot:
Blogspot adalah platform blogging gratis yang memungkinkan pengguna untuk membuat blog pribadi dengan mudah dan cepat. Platform ini tidak memerlukan keahlian teknis yang tinggi dan sangat ramah pengguna, membuatnya cocok untuk pemula maupun pengguna berpengalaman. Dengan Blogspot, siapa pun dapat memiliki blog pribadi yang dikustomisasi sesuai dengan kebutuhan dan preferensi mereka.
Source Code Animation Loading Effect Keren Seperti Cyber:
Animation loading effect ini hanya bisa berjalan pada plartform blogspot jadi untuk menggunakannya kalian hanya perlu menginstall kode di bawah ini pada tema blogspot Anda.
HTML:
<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
CSS:
#loadhalaman {
position: fixed;
opacity: 0.93;
top: 0;
left: 0;
background-color: #000;
z-index: 9999;
text-align: center;
width: 100%;
height: 100%;
padding-top: 20%;
color: #000;
}
.loadball {
background-color: transparent;
border: 5px solid #00a3ff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 35px #00a3ff;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
}
.loadball-2 {
background-color: transparent;
border: 5px solid #00a3ff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #00a3ff;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
0% {
-moz-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px#00a3ff;
}
50% {
-moz-transform: rotate(145deg);
opacity: 1;
}
100% {
-moz-transform: rotate(-320deg);
opacity: 0;
}
;
}
@-moz-keyframes spinoffPulse {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
;
}
@-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px#00a3ff;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
}
;
}
@-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
;
}
JavaScript:
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='" + siteURL + "'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});
$('#loadhalaman').click(function() {
$(this).hide();
});
function ssc_init() {
if (!document.body) {
return
}
var d = document.body;
var b = document.documentElement;
var f = window.innerHeight;
var c = d.scrollHeight;
ssc_root = document.compatMode.indexOf("CSS") >= 0 ? b : d;
ssc_activeElement = d;
ssc_initdone = true;
if (top != self) {
ssc_frame = true
} else {
if (c > f && (d.offsetHeight <= f || b.offsetHeight <= f)) {
ssc_root.style.height = "auto";
if (ssc_root.offsetHeight <= f) {
var a = document.createElement("div");
a.style.clear = "both";
d.appendChild(a)
}
}
}
if (!ssc_fixedback) {
d.style.backgroundAttachment = "scroll";
b.style.backgroundAttachment = "scroll"
}
if (ssc_keyboardsupport) {
ssc_addEvent("keydown", ssc_keydown)
}
}
function ssc_scrollArray(d, b, f, c) {
c || (c = 1000);
ssc_directionCheck(b, f);
ssc_que.push({
x: b,
y: f,
lastX: b < 0 ? 0.99 : -0.99,
lastY: f < 0 ? 0.99 : -0.99,
start: +(new Date)
});
if (ssc_pending) {
return
}
var a = function() {
var y = +(new Date);
var g = 0;
var x = 0;
for (var t = 0; t < ssc_que.length; t++) {
var n = ssc_que[t];
var j = y - n.start;
var r = j >= ssc_animtime;
var k = r ? 1 : j / ssc_animtime;
if (ssc_pulseAlgorithm) {
k = ssc_pulse(k)
}
var e = n.x * k - n.lastX >> 0;
var q = n.y * k - n.lastY >> 0;
g += e;
x += q;
n.lastX += e;
n.lastY += q;
if (r) {
ssc_que.splice(t, 1);
t--
}
}
if (b) {
var w = d.scrollLeft;
d.scrollLeft += g;
if (g && d.scrollLeft === w) {
b = 0
}
}
if (f) {
var i = d.scrollTop;
d.scrollTop += x;
if (x && d.scrollTop === i) {
f = 0
}
}
if (!b && !f) {
ssc_que = []
}
if (ssc_que.length) {
setTimeout(a, c / ssc_framerate + 1)
} else {
ssc_pending = false
}
};
setTimeout(a, 0);
ssc_pending = true
}
function ssc_wheel(d) {
if (!ssc_initdone) {
ssc_init()
}
var b = d.target;
var f = ssc_overflowingAncestor(b);
if (!f || d.defaultPrevented || ssc_isNodeName(ssc_activeElement, "embed") || ssc_isNodeName(b, "embed") && /\.pdf/i.test(b.src)) {
return true
}
var c = d.wheelDeltaX || 0;
var a = d.wheelDeltaY || 0;
if (!c && !a) {
a = d.wheelDelta || 0
}
if (Math.abs(c) > 1.2) {
c *= ssc_stepsize / 120
}
if (Math.abs(a) > 1.2) {
a *= ssc_stepsize / 120
}
ssc_scrollArray(f, -c, -a);
d.preventDefault()
}
function ssc_keydown(g) {
var k = g.target;
var d = g.ctrlKey || g.altKey || g.metaKey;
if (/input|textarea|embed/i.test(k.nodeName) || k.isContentEditable || g.defaultPrevented || d) {
return true
}
if (ssc_isNodeName(k, "button") && g.keyCode === ssc_key.spacebar) {
return true
}
var b, f = 0,
l = 0;
var c = ssc_overflowingAncestor(ssc_activeElement);
var j = c.clientHeight;
if (c == document.body) {
j = window.innerHeight
}
switch (g.keyCode) {
case ssc_key.up:
l = -ssc_arrowscroll;
break;
case ssc_key.down:
l = ssc_arrowscroll;
break;
case ssc_key.spacebar:
b = g.shiftKey ? 1 : -1;
l = -b * j * 0.9;
break;
case ssc_key.pageup:
l = -j * 0.9;
break;
case ssc_key.pagedown:
l = j * 0.9;
break;
case ssc_key.home:
l = -c.scrollTop;
break;
case ssc_key.end:
var h = c.scrollHeight - c.scrollTop - j;
l = h > 0 ? h + 10 : 0;
break;
case ssc_key.left:
f = -ssc_arrowscroll;
break;
case ssc_key.right:
f = ssc_arrowscroll;
break;
default:
return true
}
ssc_scrollArray(c, f, l);
g.preventDefault()
}
function ssc_mousedown(a) {
ssc_activeElement = a.target
}
function ssc_setCache(b, a) {
for (var c = b.length; c--;) {
ssc_cache[ssc_uniqueID(b[c])] = a
}
return a
}
function ssc_overflowingAncestor(c) {
var a = [];
var d = ssc_root.scrollHeight;
do {
var b = ssc_cache[ssc_uniqueID(c)];
if (b) {
return ssc_setCache(a, b)
}
a.push(c);
if (d === c.scrollHeight) {
if (!ssc_frame || ssc_root.clientHeight + 10 < d) {
return ssc_setCache(a, document.body)
}
} else {
if (c.clientHeight + 10 < c.scrollHeight) {
overflow = getComputedStyle(c, "").getPropertyValue("overflow");
if (overflow === "scroll" || overflow === "auto") {
return ssc_setCache(a, c)
}
}
}
} while (c = c.parentNode)
}
function ssc_addEvent(b, a, c) {
window.addEventListener(b, a, c || false)
}
function ssc_removeEvent(b, a, c) {
window.removeEventListener(b, a, c || false)
}
function ssc_isNodeName(b, a) {
return b.nodeName.toLowerCase() === a.toLowerCase()
}
function ssc_directionCheck(b, a) {
b = b > 0 ? 1 : -1;
a = a > 0 ? 1 : -1;
if (ssc_direction.x !== b || ssc_direction.y !== a) {
ssc_direction.x = b;
ssc_direction.y = a;
ssc_que = []
}
}
function ssc_pulse_(c) {
var a, d, b;
c = c * ssc_pulseScale;
if (c < 1) {
a = c - (1 - Math.exp(-c))
} else {
d = Math.exp(-1);
c -= 1;
b = 1 - Math.exp(-c);
a = d + b * (1 - d)
}
return a * ssc_pulseNormalize
}
function ssc_pulse(a) {
if (a >= 1) {
return 1
}
if (a <= 0) {
return 0
}
if (ssc_pulseNormalize == 1) {
ssc_pulseNormalize /= ssc_pulse_(1)
}
return ssc_pulse_(a)
}
var ssc_framerate = 150;
var ssc_animtime = 500;
var ssc_stepsize = 150;
var ssc_pulseAlgorithm = true;
var ssc_pulseScale = 6;
var ssc_pulseNormalize = 1;
var ssc_keyboardsupport = true;
var ssc_arrowscroll = 50;
var ssc_frame = false;
var ssc_direction = {
x: 0,
y: 0
};
var ssc_initdone = false;
var ssc_fixedback = true;
var ssc_root = document.documentElement;
var ssc_activeElement;
var ssc_key = {
left: 37,
up: 38,
right: 39,
down: 40,
spacebar: 32,
pageup: 33,
pagedown: 34,
end: 35,
home: 36
};
var ssc_que = [];
var ssc_pending = false;
var ssc_cache = {};
setInterval(function() {
ssc_cache = {}
}, 10 * 1000);
var ssc_uniqueID = function() {
var a = 0;
return function(b) {
return b.ssc_uniqueID || (b.ssc_uniqueID = a++)
}
}();
var ischrome = /chrome/.test(navigator.userAgent.toLowerCase());
if (ischrome) {
ssc_addEvent("mousedown", ssc_mousedown);
ssc_addEvent("mousewheel", ssc_wheel);
ssc_addEvent("load", ssc_init)
};
Demo:
Animation Loading Effect yang dapat membuat antarmuka lebih menarik dan pengalaman pengguna lebih baik. Menerapkan animasi yang tepat dapat membantu membangun antusiasme dan kesabaran pengguna selama menunggu proses pemuatan. Dengan menggunakan animasi yang unik dan sesuai dengan karakteristik aplikasi atau website, Animation Loading Effect dapat menjadi elemen kunci dalam menciptakan antarmuka yang menarik dan memikat.
