jQuery.Parallax() Eklentisi ve Kullanımı - Baskı Önizleme +- MyBB Depo Forum (https://mybbdepo.com) +-- Forum: Mybb Ders Deposu (https://mybbdepo.com/mybb-ders-deposu-forumu) +--- Forum: Yazılı Anlatım Deposu (https://mybbdepo.com/yazili-anlatim-deposu-forumu) +--- Konu Başlığı: jQuery.Parallax() Eklentisi ve Kullanımı (/jquery-parallax-eklentisi-ve-kullanimi-konusu.html) |
jQuery.Parallax() Eklentisi ve Kullanımı - usameavci - 18-07-2014 ** Uyarılar **
Konu işinize yaradıysa anketi oylasanız yeter. Teşekkürler, yararlı vs gibi yorumlar atmanıza gerek yok. Soru ve sorunlarınız için yorum yazın, PM atmayın! Yaptım olmadı gibi yorumlar atmayın ben yaptım oldu önizlemeleri aşağıda Yaptığınız halde çalışmaz ise Firefox yada Chrome tarayıcısından sayfaya sağ tıklayıp Öğeyi İncele - Öğeyi Denetle panelinin Console - Konsol kısmından hataya bakabilirsiniz. jQuery.Parallax();
Merhabalar arkadaşlar. Son zamanlarda kıymete binen bir jQuery eklentisinden bahsedeceğim size.Eklentimiz başlıkta da belirttiğim gibi jQuery.Parallax eklentisi. Bu eklenti ne işe yarıyor ? Belirttiğiniz çerçeve içinde bulunan resimleri farenin hareketlerini baz alarak x ve y ekseninde konumlandırıyor. Bilimsel açıklamayı geçersek belirli bir alanda içine eklenen resimleri fareye gre konumlandırarak şekil birşeyler yapıyor Bence bu eklentinin en zor kısmı hareketlendireceğiniz resimleri ayarlamak, resimler var ise gerisi 3-5 satır koddan ibaret Şunu da hatırlatmadan geçmeyelim. Adından da anlaşılacağı gbi bu bir jQuery eklentisidir. jQuery yoksa ÇALIŞMAZ. Nasıl kullanırız? Öncelikle ister Parallax Git Master'dan dosyaları indirip kendi sunucunuzdan ekleyebilirsiniz. İsterseniz de Kod: https://raw.githubusercontent.com/stephband/jparallax/master/js/jquery.parallax.min.js Dosyamızı dahil ettikten sonra kendi sitesi üzerinden anlatıma geçelim. Buyrun site linki: Kod: http://stephband.info/jparallax/ Kod: jQuery( '.parallax-layer' ).parallax( options ); Bu sınıfa parallax metodunu uyguluyoruz ve options kısmına da ayarlarımızı yazıyoruz. Ben genel olarak ul li yapısını kullanıyorum ama iç içe oldukları sürece sıkıntı olmaz div de kullanabilirsiniz. Şuan html ve js kodlarımız şu şekilde; Kod: <div id="paralHeader"> Kod: jQuery( '.paralPhoto' ).parallax( options ); Kod kısmını önizleme yapacak şekilde ayarlayalım ve css kodlarımıza geçelim. Kod: <!DOCTYPE html> Kod: http://embed.plnkr.co/Bio7aeUqhavepn3NkCTE/preview Css kodlarımızda fazla birşey yok. Css'in önemi viewportu kısıtlamamız gerektiğinden geliyor. Sitesinde de yazdığı viewport kısmına aşağıdaki kodları ekliyoruz. Kod: position:relative; overflow:hidden; width:npx; height:npx; Daha sonra viewport içindeki tekrar eden itemlere de position: absolute değeri vereceğiz ve bu sayede resimlerimiz rahat bir şekile uçup kaçabilsin Yeni ve son kodlarımız: Kod: <!DOCTYPE html> Kod: http://embed.plnkr.co/KdW8kT9faX2IaBnfhISb/preview Ayrıntılı ayarları sitesinden bakabilirsiniz. Genel olarak kullanım ve mantık bu şekilde. Mybb uyarlamasını size bırakıyorum. Eğer uyarlayamıyorsanız ücretini ödeyerek yaptırın ekonomiye can verin. Bir başka makalede görüşmek üzere sağlıcakla Cvp: jQuery.Parallax() Eklentisi ve Kullanımı - Toretto - 18-07-2014 Emeğine Sağlık Güzel Anlatım Olmuş Cvp: jQuery.Parallax() Eklentisi ve Kullanımı - MelihAtasever - 18-07-2014 ee bundan iyisi şamda kayısı eccepure aldı başını wordpresste gidiyor el atma zamanı geldi mybb içinde bir pureye hadi bakalım Cvp: jQuery.Parallax() Eklentisi ve Kullanımı - beta - 25-07-2014 harika diyelimde başka bişey diyelim mi? ben bu adamı seviyorum yaaw |