Çek bırak özellikli logo yapımı

Jquery ile çek bırak özellikli logo nasıl yapabilirim?

2. Yıl teması‘nda küçük bir atraksiyon olsun diye, sol üst köşedeki rozet resmini jQuery kullanarak hareketlendirmiştim. işleyişi gayet basit. Mouse (fare) ile nesneyi tutup çekiyorsunuz ve bıraktığınız zaman eski yerine geri dönüyor. Basit birşey olmasına rağmen nedense çok ilgi gördü ve bunun nasıl yapıldığını anlatmamı isteyenler oldu. Bu yazıyı da onlar için özel hazırladım

Ben bu atraksiyonu ilk defa moo.fx sayfasında görmüştüm. Siz de bu sayfaya girerek sağ-üst köşedeki 3 KB yazan nesneyi inceleyebilirsiniz. Bu sayfadaki kodlara gözgezdirmiştim ve aynı şeyi jQuery kullanarak yapmayı denemiştim. Aslında 3 basit adımda siz de buna benzer atraksiyonlar yapabilirsiniz ve ziyaretçilerinizi ufak da olsa etkileyebilirsiniz. şimdi aşağıdaki adımları takip ederek bu işlemi yapmaya başlayalım:

Html kodlaması
Css ile biçimlendirme ve konumlandırma
jQuery ile nesneye hareket kazandırma
1. Html kodlaması

ilk adımda bir içerik nesnesi belirteceğiz. Daha sonra da bu içerik nesnesinin içerisine, hareketlendirmek istediğimiz rozet nesnesini yerleştireceğiz. şimdilik “rozet” nesnesinin içerisinde yalnızca v2 yazısı görünüyor ama daha sonra bunun arkaplanına css yardımıyla bir rozet resmi atayacağız.

v2

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident...

Bu adımda yaptığımız işlemlerin sonucunu Adım 1 sayfasında veya alttaki ekran görüntüsünde görebilirsiniz

2. Css ile biçimlendirme ve konumlandırma

ilk adımda, hareketlendirmek istediğimiz “rozet” nesnesini ve bunu içerisinde tutan “içerik” nesnesini oluşturmuştuk. ikinci adımda bu nesneleri css kullanarak biçimlendireceğiz. Ayrıca “rozet” nesnesinin yerini css ile konumlandırma (positioning) konusundan faydalanarak “içerik” nesnesinin sol-üst köşesine taşıyacağız. şimdi bu işlemleri yapan css kodlarına gözatalım:



Bu kodlar yardımıyla “icerik” nesnesini relative olarak, “rozet” nesnesini ise absolute olarak konumlandırdık. Daha sonra “rozet” nesnesinin genişlik ve yükseklik değerlerini, arkaplan olarak olarak kullandığımız “rozet.png” dosyasının genişlik ve yükseklik değerlerine eşitledik (77px). Hemen ardından top ve left değerleri ile “rozet” nesnesinin, “icerik” nesnesinin sol-üst köşesine yerleşmesini sağladık (-40px). Son iki satırda ise IE 6′nın png dosyalarıyla yaşadığı saydamlık problemine çözüm getirmiş olduk. Bu problem ile ilgili ayrıntılı bilgi edinmek isterseniz Internet Explorer 6 için saydam PNG desteği sayfasını okumalısınız.

Bu adımda yaptığımız işlemlerin sonucunu Adım 2 sayfasında veya alttaki ekran görüntüsünde görebilirsiniz.

3. jQuery ile nesneye hareket kazandırma

Yapacak tek bir işlem kaldı: jQuery ve 2 adet eklenti yardımıyla “rozet” nesnesine hareket kazandırmak… Bu adımda bize EasyDrag ve Easing eklentileri de lâzım olacak. O yüzden bu eklentileri indirip jQuery ile birlikte web sayfamıza dahil etmeliyiz. Bu dahil etme işlemini şöyle yapabilirsiniz:

<script></script>
<script></script>
<script></script>

Artık herşey hazır olduğuna göre rozet nesnesini hareketlendirecek kodlarımıza bakalım:

<script>
$(document).ready(function(){

$("div#rozet").easydrag();

$("div#rozet").ondrop(function(){
$('div#rozet').animate(
{ top:'-40px', left:'-40px'},
{duration: 1000, easing: 'easeOutElastic'}
);
});

});
</script>

Öncelikle $("div#rozet").easydrag(); kodu ile rozet nesnesinin sürüklenebilir olmasını sağlıyoruz. Sonraysa $("div#rozet").ondrop(); kodunu kullanarak sürüklenen nesne bırakıldığında herhangi bir işlem yapılmasını belirtiyoruz. Bu iki kod

eklentisinin bize sağladığı özelliklerdir.

Bu işlemlerden sonra ondrop() fonksiyonu tetiklendiği anda rozet nesnesinin ilk top ve left değerlerine geri dönmesini jQuery’nin yerleşik fonksiyonu olan animate() ile sağlıyoruz. Bu işlem 1000 milisaniyelik bir sürede gerçekleşiyor. Ayrıca bu esnada rozet nesnemize Easing eklentisinin easeOutElastic isimli efektinin uygulanmasını belirtiyoruz. Tüm bu işlemleri yapmamızı sağlayan animate() fonksiyonu hakkında detaylı bilgiyi jQuery ve Efekt işlemleri isimli yazımda bulabilirsiniz.

Bu son adımda yaptığımız işlemlerin sonucunu Adım 3 sayfasında görebilirsiniz.

Sonuç

Gördüğünüz gibi son derece kolay bir işlem. Dikkat etmemiz gereken şey, ilk başta belirlemiş olduğumuz adımları tek tek ve sırayla uygulamaya geçirmiş olmamızdır. Aslında basit gibi görünen bu konuda pekçok bilgiyi de içiçe kullanmış olduk. O yüzden arada sırada böyle atraksiyonlar hazırlamak, öğrendiğimiz bilgileri somut olarak kullanma adına faydalı oluyor. Siz de mutlaka okuduğunuzla kalmayıp, buradaki işlemleri kendi kendinize uygulayınız. Bu yazıyla ilgili dosyaları ise bu bağlantıdan bilgisayarınıza indirebilirsiniz.

Kaynak: http://www.eburhan.com/jquery-ile-cek-birak-ozellikli-nesneler-olusturmak/

hocam bunu inlceledimde anlamadım birşey benim yapmak istediğim jsleri headların arasına bğaladım şimdi logo hareketlensin die ne kod eklicem.

Hocam açıkçası bende fazla anlamam ama ilk olarak js kodlarını head etiketleri arasına ekliyorsunuz, sonra js kodumuzu ekliyoruz. ( Unutmuyoruz ki Easydrag eklentisi bize lazım olacak. ) Yada direk kaynak dosyayı indirin kodları kontrol edin, yanlışlarınızı düzelterek bakın.

öyle denedimde yapamıyom hocam

Aslında bu güzel bir konu. Ayrı bir konu açıp anlataibilirsin technic man

Hocam alıntı bir yazı, ama kabul edilebilirse yayınlayabilirim. Veya yakın zaman içinde kendi anlatımımı yapabilirim gibime geliyor. :)

Orasını bilemem .. Ama istifade edilebilecek bir konu..

saygılarımla...

ben ne diyom siz ne yazıyorsunuz