CSS ile Yazıya Glitch Efekti

YouTube'ta Takip Et →

CSS ile Glitch efekti yapıyoruz. Glitch efekti bozuk bir monitöre baktığınızda aldığınız görüntü gibi bir görünüm sağlar. Arkaya bir de ses koyduğunuzda bzzt efekti de diyebiliriz.

Glitch efektinde CSS3 ile güncel kodlar kullanıldığı için güncel tarayıcılarda çalışacaktır. Türlü türlü çeşidi olmasına karşın bu derste CSS ile üç metne verdiğimiz hareket efekti ve renkler ile glitch efektini sağlayabiliyoruz.

İki sayfamız olacak. Biri index.html, diğeri style.css. Önce index.html sayfamıza HTML kodlarını ekleyelim.

<div id="container">
  <h1>EFEKT</h1>
  <h1>EFEKT</h1>
  <h1>EFEKT</h1>
</div>

Şimdi de style.css’e yazacağımız kodları yazalım.

body {
	background-color: #222;
}

#container {
	margin: 35vw auto;
}

h1 {
	text-align: center;
	color: #fff;
	font-size: 8em;
	margin: 0;
	line-height: 0;

	animation: glitch1 2.5s infinite;
}

h1:nth-child(2) {
  color: #67f3da;
  animation: glitch2 2.5s infinite;
}

h1:nth-child(3) {
  color: #f16f6f;
  animation: glitch3 2.5s infinite;
}

@keyframes glitch1 {
	0%{transform:none;opacity:1}
	7%{transform:skew(-0.5deg,-0.9deg);opacity:.75}
	10%{transform:none;opacity:1}
	27%{transform:none;opacity:1}
	30%{transform:skew(0.8deg,-0.1deg);opacity:.75}
	35%{transform:none;opacity:1}
	52%{transform:none;opacity:1}
	55%{transform:skew(-1deg,0.2deg);opacity:.75}
	50%{transform:none;opacity:1}
	72%{transform:none;opacity:1}
	75%{transform:skew(0.4deg,1deg);opacity:.75}
	80%{transform:none;opacity:1}
	100%{transform:none;opacity:1}
}

@keyframes glitch2 {
	0%{transform:none;opacity:.25}
	7%{transform:translate(-2px,-3px);opacity:.5}
	10%{transform:none;opacity:.25}
	27%{transform:none;opacity:.25}
	30%{transform:translate(-5px,-2px);opacity:.5}
	35%{transform:none;opacity:.25}
	52%{transform:none;opacity:.25}
	55%{transform:translate(-5px,-1px);opacity:.5}
	50%{transform:none;opacity:.25}
	72%{transform:none;opacity:.25}
	75%{transform:translate(-2px,-6px);opacity:.5}
	80%{transform:none;opacity:.25}
	100%{transform:none;opacity:.25}
}

@keyframes glitch3 {
	0%{transform:none;opacity:.25}
	7%{transform:translate(2px,3px);opacity:.5}
	10%{transform:none;opacity:.25}
	27%{transform:none;opacity:.25}
	30%{transform:translate(5px,2px);opacity:.5}
	35%{transform:none;opacity:.25}
	52%{transform:none;opacity:.25}
	55%{transform:translate(5px,1px);opacity:.5}
	50%{transform:none;opacity:.25}
	72%{transform:none;opacity:.25}
	75%{transform:translate(2px,6px);opacity:.5}
	80%{transform:none;opacity:.25}
	100%{transform:none;opacity:.25}
}

index.html’yi kullandığınız bir tarayıcıyla açın. Kodlar doğru bir şekilde eklendiyse, h1 etiketindeki kelimelere glitch efekti uygulandığını göreceksiniz.