Postingan lainnya
(Minta Saran) Baru Belajar Bikin Animasi dengan Javascript
assalamualaikum. jadi gini ceritanya, lagi belajar pure javascript, terus bikin studi kasus dan diselesein sendiri, nah akhirnya ketemu ide bikin animasi blur text ini. ini asli mikir sendiri (biasanya sedikit nyontek dari google hihih)..
bisa dicek disini <a href=' https://naufalhfzhn.github.io/blurText/ '> https://naufalhfzhn.github.io/blurText/ </a>
nah sesuai judul saya cuma minta saran buat refactor kodenya, kali aja ada cara yg lebih simpel dan lebih bersih hihihi
ini full codenya
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEXT BLUR</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
html,body{height: 100%;font-family: 'Montserrat',cursive;display: flex;align-items: center;justify-content: center;background: #d7d7d7;}
@keyframes blurText {
from{text-shadow: 0 0 20px #7CAF00; color: transparent;}
to{text-shadow: 0 0 0 #7CAF00, 0 3px 2px #a2a2a2;}
}
h1{position: relative;
text-transform: uppercase;
text-shadow: 0 3px 2px #a2a2a2;
font-size: 3em;
color: #7CAF00
}
span{
letter-spacing: 5px;
animation: blurText 2.5s ease-in-out infinite alternate;
}
</style>
</head>
<body>
<h1 class="blurred">naufal hafizhan is <span class="textBlur"></span></h1>
<script type="text/javascript">
var textBlur = document.getElementsByClassName('textBlur'),
arrayText = ['happy', 'daydreamer', 'funny', 'cute', 'cool'],
angka = 0;
function changeText() {
setTimeout(function (){blurText()}, 5000)
textBlur[0].innerHTML = arrayText[angka];
angka++;
if (angka >= arrayText.length){angka = 0}
}
changeText();
</script>
</body>
</html>
mungkin cukup itu , maaf kalo bukan nanya , cenderung untuk sharing2 terimakasih..
0