Tasarımlarda estetik küçük animasyonlar ile mümkün olmaktadır. Css, javascript ve bunun gibi yapılar sayesinde bu süreç kolay bir şekilde ilerleyebilir. Kodsal düzenlemeler ile tasarımlar yapılmaktadır. Bunun içinde bazı platformlardan yardım almak gerekmektedir. Aşağıda ki süreci inceleyerek bilgi sahibi olabilirsiniz.
Bunun için öncelikle div eklenmesi gerekmektedir.
Div sayesinde gerekli alan sağlanacaktır. İçerisine ise gerekli öğeler entegre edilecektir.
Bir sonra ki aşama ise css düzenlemeleri yapmak olacaktır. Css düzenlemeleri ile daha etkili öğeler ortaya çıkacaktır. Bu aşamada çalışma daha renkli bir nitelik kazanacaktır. Class lar düzenlenerek gerekli kodlar girilerek özellikler atanacaktır. Bu sayede tek bir düzenleme ile belirli yerlerde çağırma işlemler kullanılarak daha kolay bir sürece sahip olunacaktır.
.sut{
position: relative;
display: block;
float: left;
background-color: #444;
color: #fff;
padding: 100px;
box-sizing: border-box;
&.orange {
background-color: #EF8130;
}
&.blue {
background-color: #00ADE2;
}
&.gray {
background-color: #444;
}
&.green {
background-color: #76CE51;
}
&-1- { &2 {
width: 47.5%;
}&3 {
width: 30.8333%;
} &4 {
width: 22.5%; }}}
Bu süreçte yapılan atamalar da renkler ile adlandırılan sınıflara özellikler atanmıştır. Bu sayede özellikler daha düzenli bir yapı içerisinde girilmektedir. İlk girişte turuncu renk ile belirlenen classta ana temanın özellikleri girilmiş ve ondan sonra ki süreçte de renklere ait değerler girilmiştir. En sonda ise bazı genişlik değerleri verilmiştir.
Ana tema entegre edildikten sonra şimdi svg öğelere ihtiyaç duyulmaktadır. Svg öğeler ile animasyon aşaması artık başlamaktadır. Bunun içinde tekrar kodsal bir düzenleme yapmak gerekmekte ve bir svg oluşturmak gerekmektedir.
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
circle {
fill: rgba(255,255,255,0.1);
}
Yukarıda ki kod yapısı ile konumlandırma verilmiştir. Yani üstten ne kadar boşluk soldan ne kadar aralıklı falan gibi düzenlemeler yapılmıştır. Circle sınıfında ise renk düzenlemeleri yapılmaktadır.
Svgnin yanında bir de javascript ve jQuery de faydalı olmaktadır. Bu yapılar sayesinde gerekli kodlar ile animasyon daha estetik bir hal almaktadır. Mouse’nin click yani tıklama olayında ne olacak vs. gibi olaylar bu kod yapısında komutlar verilmektedir. Gerekli fonksiyonlar bu aşamada kazandırılarak animasyon daha performanslı ve esnek bir şekilde çalışmaktadır.
Javascript Kodu
$(".col").on("click", function(e){
var x = e.pageX;
var y = e.pageY;
var clickY = y – $(this).offset().top;
var clickX = x – $(this).offset().left;
var box = this;
// …
});
JQuery Kodu
var setX = parseInt(clickX);
var setY = parseInt(clickY);
Bu öğeleri ekledikten sonra yeni düzenlemeler de aynı şekilde kod yapıları ile yapılabilir.
