Front-end Developer ne yapar? - Super Mario

[egemenozbeyli]

Kişisel blogumuz üzerinde yaptığımız 'Front-end Developer ne yapar?' konulu paylaşımımız, Codepen tarafında çok beğenildiğinden sizlerle de paylaşmak istedim.




Front-end Developer ne yapar?
Günümüzde iyi bir önyüz geliştiricisi olmak istiyorsanız birkaç stil kodu biliyor olmakla yetinmemeli, fonksiyonelite tarafında da kendinizi geliştirmelisiniz. Biraz da grafik tasarım..


Adobewordpress‘in Adobe eğitimleri sizi grafik tasarımcı, HTML–CSS–JS dersleri web tasarımcısı yapabilir. Bu iki yola da hakim olmanız da sizi tasarımcı yapar. Bunu müzisyenin de, ressamın da sanatçı diye nitelendirilmesiyle örneklendirebiliriz.


Makalemizin devamında “Front-end Developer ne yapar?” sorusunu hazırlayacağımız çalışmayla, aynı anda grafik tasarım ve web tasarımı yaparak örneklendireceğiz.


ÖRNEĞİ GÖRÜNTÜLE






Bugün ne yapacağız?
Başlıkta da belirtildiği üzere Super Mario temalı bir çalışma yapacağız. Özetle üzerini tıkladığımızda -ki bildiğiniz gibi Mario bu kutucuklara kafasıyla vurur- altın çıkaran bir kutu hazırlayacağız. Çizimlerde Photoshop, kalan işlerde de HTML,CSS ve JS ile meşgul olacağız. Ses efektleri mi? Merak etmeyin onları aşağıda sizlerle paylaşıyor olacağız.


Mario bir konsept, piksel temelli çizimler yapmalıyız. İlk olarak kutularımızı hazırlayalım. Tıklanmadan önce, tıklandıktan sonra olmak üzere iki adet kutuya ihtiyacımız var. Bu iki görseli biz tek bir görselmiş gibi hazırlayıp CSS Sprite ile kullanacağız. Bunun dışında da yine piksel yapıda bir altın görseline ihtiyacımız olacak.


Eğer görsellerin çizimiyle yani sürecin grafik tasarım kısmıyla oyalanmak istemiyorsanız sizi buraya alalım :


Kutu Görseli :

Altın Görseli :

Ses Dosyaları :
gold-sound.mp3
block-sound.mp3


Artık kod yazmaya hazırız. İlk olarak HTML kodlarımız ile başlayalım.


İlk olarak mario classına sahip bir çerçeve oluşturalım. Bu yapımızı çevrelesin ve relative yapısıyla herşeyi bir arada tutsun. İçerisine de kutuyu temsilen bir box classına sahip division yer alıyor. Onun içerisinde de son olarak coin classına sahip bir span, yani altın öğemiz bulunuyor.

<div class="mario">  <div class="box">    <span class="coin"><img src="http://adobewordpress.com/tasarim/images/coin.png"></span>  </div></div>

CSS Kodları


Yukarıda bahsettiğimiz mario isimli çerçevemiz ile başlayalım. Örnek için tablo yapıda, yukarıdan 250 piksel uzaklaştırılmış ve ortalanmış bir çerçeve seçiyoruz.

div.mario {
  display:table;
  position:relative;
  margin:250px auto 0 auto;
}

box yani kutucuk tasarımımızı yapalım. Relative yapıdaki bu öğeye sabit genişlik ve yükseklik değeri verdikten sonra margin-top tanımı için bir geçiş efekti uygulayalım ki tıklandığında biraz daha yumuşak hareket etsin. Arkaplan pozisyonlamasını x ve y düzleminde 0 yaparak ilk 150 piksel içerisindeki görseli, yani kutunun tıklanmamış, soru işaretli halini kullanmış oluyoruz.

div.mario div.box{
  position:relative;
  width:150px;
  height:150px;
  transition:margin-top .2s;
  cursor:pointer;
  background-image:url('http://adobewordpress.com/tasarim/images/box.png');
  background-position:0 0;
}

Şimdi de box‘ın tıklandıktan sonra alacağı hali belirleyelim. Dikkat ederseniz bu sefer tekrar arkaplan resmini tanımlamıyor, sadece pozisyonlandırmayı yeniliyoruz. Yukarıda bıraktığımız margin-top tanımını da sıfıra çekiyoruz. Son olarak not-allowed olarak ayarladığımız cursor, kutunun üstüne işaretçimiz ile geldiğimizde simgenin “tıklanamaz” hale gelmesini sağlıyor.

div.mario div.box.empty{
  background-position:150px 0;
  margin-top:0;
  cursor:not-allowed;
}

Daha önce hazırladığımız coin tanımlı altın resmimize de opacity transition (geçiş) efekti vererek devam edelim.

div.mario span.coin img{
  transition:opacity .3s ease-out;
}

Aşağıda hem kutu hem de altın için hazırladığımız animasyonları uyguluyor olacağız. İşi cross-browser olarak ayakta tutabilmek için kod satırlarımız biraz uzuyor.


Altının çerçevesi (coin classını verdiğimiz span) için 800 milisaniyelik çizgisel yapıdaki position animasyonunu tanımlıyoruz. Bu animasyon altının yukarı yükselerek yok olmasını sağlayacak.


Altın resminin kendisi için de 400 milisaniyelik dönme efektini yani spin animasyonunu uyguluyoruz.

div.mario span.coin.play{
  transition:all .5s ease-out;
  -webkit-animation-name: position;
  -webkit-animation-duration: 800ms;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: position;
  -moz-animation-duration: 800ms;
  -moz-animation-timing-function: linear;
  -ms-animation-name: position;
  -ms-animation-duration: 800ms;
  -ms-animation-timing-function: linear;
  animation-name: position;
  animation-duration: 800ms;
  animation-timing-function: linear;
}
 
div.mario span.coin.play img{
  -webkit-animation-name: spin;
  -webkit-animation-duration: 400ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 400ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 400ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 400ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

Sırada position ve spin animasyonlarını hazırlamak var. Dönme hareketi için sabit yükseklikte genişliği daraltmak yeterli olacaktır. Pozisyonlama için de margin tanımını ve görünürlüğü eş zamanlı düşürmek istediğimiz sonucu verecektir.

@-moz-keyframes spin {
    10% { width:90px;height:120px}
    45% { width:3px;height:120px}
    90% { width:90px;height:120px;}
}
@-webkit-keyframes spin {
    10% { width:90px;height:120px}
    45% { width:3px;height:120px}
    90% { width:90px;height:120px;}
} [MENTION=183502]key[/MENTION]frames spin {
    10% { width:90px;height:120px}
    45% { width:3px;height:120px}
    90% { width:90px;height:120px;}
}
 
@-moz-keyframes position {
    10% { margin-top:-100px;opacity:0;}
    25% { margin-top:-130px;opacity:1;}
    85% { margin-top:-180px;}
    90% { margin-top:-200px;opacity:0;}
}
@-webkit-keyframes position {
    10% { margin-top:-100px;opacity:0;}
    25% { margin-top:-130px;opacity:1;}
    85% { margin-top:-180px;}
    90% { margin-top:-200px;opacity:0;}
} [MENTION=183502]key[/MENTION]frames position {
    10% { margin-top:-100px;opacity:0;}
    25% { margin-top:-130px;opacity:1;}
    85% { margin-top:-180px;}
    90% { margin-top:-200px;opacity:0;}
}

Sırada tıklama işlemi ve diğerleri için jQuery kodları var.


Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Kodları ayrıştırmadan, olduğu gibi paylaşalım. Sonrasında da ne yaptıkları hakkında konuşalım.

$('div.mario').click(function(){    var mario = $(this);    mario.find('div.box').css('margin-top','-25px');    if (mario.find('span.coin').hasClass( "play" ) ) {        mario.find('div.box').addClass('empty');        $("<audio class='block'></audio>").attr({            'src':'http://adobewordpress.com/tasarim/include/block-sound.mp3',            'autoplay':'autoplay'        }).appendTo("body");        setTimeout(function(){            $('audio.block').remove();        }, 800);    }else{        $("<audio></audio>").attr({            'src':'http://adobewordpress.com/tasarim/include/gold-sound.mp3',            'autoplay':'autoplay'        }).appendTo("body");        mario.find('span.coin').addClass('play');        setTimeout(function(){            mario.find('div.box').addClass('empty');        }, 150);    }     setTimeout(function(){        mario.find('div.box').css('margin-top','0');    }, 200);});

Tıklama kontrolü yaptığımız öğe yukarıda HTML tarafında yazdığımız mario classına sahip division. jQuery tarafında da ilk olarak mario isimli bir değişken tanımlıyoruz. Sonrasında kutunun tıklandığında yukarı doğru yükselmesi için -25 piksel değerinde bir margin-top ekliyoruz. Hatırlarsanız CSS tarafında margin-top için geçiş efekti uygulamıştık. İşte o kod satırı tam olarak burada işe yarıyor.


Devam edelim. Kutucuk tıklandığında ekleyeceğimiz play classının hali hazırda olup olmadığına bakıyoruz. Varsa animasyon daha önce oynatılmıştır, yani kutu tıklanmıştır diye varsayıyoruz. Eğer kutu daha önce tıklanmışsa block-sound.mp3‘ü sayfaya, body elemanının içerisine ekliyoruz. 800 milisaniye sonra da eklediğimiz audio elemanını silerek tarayıcının şişmesini engelliyoruz. Eğer kutu daha önce tıklanmamışsa da gold-sound.mp3‘ü oynatıp yukarıda bahsettiğimiz play classını span.coin‘e ekliyoruz. O esnada da div.box‘a empty classını ekleyerek ikinci hazırladığımız kutu görselini görünür kılıyoruz.


Herşey bittiğinde de en JavaScript kodlarının en üstünde verdiğimiz margin-top tanımını kaldırarak kutuyu olduğu yere çekiyoruz. Bütün bu işlem 200 milisaniye sürüyor.


Bu kadar.


Kapanış


“Front-end Developer ne yapar?” sorusuna meslek içi teknik tabirlerden ibaret olmayan eğlenceli bir makale ile cevap vermek istedik. Umarım sizleri de bizi eğlendiği kadar eğlendirmiştir.


kaynak : Front-end Developer ne yapar? -Super Mario