MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
Anket Başlığı: Bu konu işinize yaradı mı ? (Eğer 3. seçenek çok gelirse 2. biranlatım yapabilirim. Belki..)
Evet bro sağol. Adamın dibisin!
Hayır dostum hiç işime yaramadı boşa anlatmışsın..
Eğer anlasaydım birşeyler derdim ama..
[Anket Sonuçlarını Göster]
 
Hatırlatma: Bu anket genel bir ankettir. Diğer kullanıcılar sizin hangi seçeneğe oy verdiğinizi görebilirler.
usameavci avatar
Konuyu Oyla:
  • Derecelendirme: 5/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 5/5 - 1 oy

jQuery.Parallax() Eklentisi ve Kullanımı


Sponsor Reklam
media venus

Çevrimdışı usameavci
 Tarih: 18-07-2014, Saat:18:14
#1
** 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ğıdaUyku 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 Dil Çıkarma

Bence bu eklentinin en zor kısmı hareketlendireceğiniz resimleri ayarlamak, resimler var ise gerisi 3-5 satır koddan ibaret Göz kırpma
ünlem Şunu da hatırlatmadan geçmeyelim. Adından da anlaşılacağı gbi bu bir jQuery eklentisidir. jQuery yoksa ÇALIŞMAZ. ünlem

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
adresinden js dosyamızı direk dahil edebilirsiniz. Yukarıda da belirttiğim gibi ben resimlerle uğraşmayı pek sevmediğim için bir arkadaşımızın demo gösterdiği sitedeki grafikleri kullanacağım, siz kendi grafiklerinizi kullanırsınız.

Dosyamızı dahil ettikten sonra kendi sitesi üzerinden anlatıma geçelim. Buyrun site linki:
Kod:
http://stephband.info/jparallax/
Bu adrese giriyoruz ve karşımıza direk installation yani kurulum kısmı açılıyor. İlk kodumuz;
Kod:
jQuery( '.parallax-layer' ).parallax( options );
Açıklayalım: Burada parallax-layer kısmı bizim eklediğimiz resimlerin sınıfını temsil ediyor.
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">
    <div class="paralPhoto"><img src="http://demo.eccetasarim.com/eccepure/wp-content/themes/EccePure/images/gorsel1.png" width="1280" height="400" alt="eccepure"/></div>
    <div class="paralPhoto"><img src="http://demo.eccetasarim.com/eccepure/wp-content/themes/EccePure/images/gorsel2.png" width="900" height="370" alt="eccepure"/></div>
    <div class="title">TakaharaShujin</div>
</div>
Kod:
jQuery( '.paralPhoto' ).parallax( options );
*** parallax metodunu uyguladığımız view port altında tekrar eden elemanlar. Eğer resimleri direk koyarsanız bu elemanlar img etiketini baz alır. Div içine koyarsanız yukarıdaki gibi divleri bazalır.

Kod kısmını önizleme yapacak şekilde ayarlayalım ve css kodlarımıza geçelim.
Kod:
<!DOCTYPE html>
<html>

  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="https://raw.githubusercontent.com/stephband/jparallax/master/js/jquery.parallax.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      jQuery(document).ready(function($){
          $('#paralHeader .paralPhoto').parallax({
              mouseport        : $("#paralHeader")
          });
      });
    </script>
  </head>

  <body>
    <h1>Parallax Uygulama!</h1>
    <div id="paralHeader">
        <div class="paralPhoto"><img src="http://demo.eccetasarim.com/eccepure/wp-content/themes/EccePure/images/gorsel1.png" width="1280" height="400" alt="eccepure"/></div>
        <div class="paralPhoto"><img src="http://demo.eccetasarim.com/eccepure/wp-content/themes/EccePure/images/gorsel2.png" width="900" height="370" alt="eccepure"/></div>
        <div class="title">TakaharaShujin</div>
    </div>
  </body>

</html>
Önizleme:
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;
Burada position: relative z-index ile derinlikleri değişse bile viewport dışına çıkmasını engelliyor, overflow: hidden kısmı da dışarıya taşan kısımları göstermemek için kullanılıyor, width: npx ve height: npx kısmı viewport kısmının genişliğini ve yüksekliğini belirtiyor. Nerede kulanacaksanız genişliğini ve yüksekliğini ona göre ayarlarsınız.
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 Süper

Yeni ve son kodlarımız:
Kod:
<!DOCTYPE html>
<html>

  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="https://raw.githubusercontent.com/stephband/jparallax/master/js/jquery.parallax.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      jQuery(document).ready(function($){
          $('#paralHeader .paralPhoto').parallax({
              mouseport        : $("#paralHeader")
          });
      });
    </script>
      <style type="text/css" media="screen">
          body {
              font: 14px 'Myriad Pro';
              background-color: #bbb;
          }
          #paralHeader {
              position: relative;
              overflow: hidden;
              width: 100%;
              height: 200px;
              background: url('http://demo.eccetasarim.com/eccepure/wp-content/themes/EccePure/images/background.jpg') no-repeat fixed left top / cover transparent;
              margin-top: 50px;
              box-shadow: 0 0 30px #000 inset;
              border-radius: 4px;
          }
          .paralPhoto {
              position: absolute;
          }
          .title {
              font-size: 80px;
              color: #FFF;
              position: absolute;
              left: calc(50% - 550px / 2);
              top: 30%;
              text-shadow: 0px -4px 2px #000;
              font-family: Arial;
          }
      </style>
  </head>

  <body>
    <h1>Parallax Uygulama!</h1>
    <div id="paralHeader">
        <div class="paralPhoto"><img src="http://demo.eccetasarim.com/eccepure/wp-content/themes/EccePure/images/gorsel1.png" width="1280" height="400" alt="eccepure"/></div>
        <div class="paralPhoto"><img src="http://demo.eccetasarim.com/eccepure/wp-content/themes/EccePure/images/gorsel2.png" width="900" height="370" alt="eccepure"/></div>
        <div class="title">TakaharaShujin</div>
    </div>
  </body>
</html>
Önizleme:
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 Melek - Masum
Cevapla
Sponsor Reklam
sponsor reklam sponsor reklam

Çevrimdışı Toretto
 Tarih: 18-07-2014, Saat:18:31
#2
Emeğine Sağlık Güzel Anlatım Olmuş Süper
Cevapla
Bunu Beğenenler:

Çevrimdışı MelihAtasever
 Tarih: 18-07-2014, Saat:23:33
#3
ee bundan iyisi şamda kayısı Açık Ağızlı Gülümseme eccepure aldı başını wordpresste gidiyor el atma zamanı geldi mybb içinde bir pureye hadi bakalım GülümsemeSüper
Cevapla
Bunu Beğenenler:

Çevrimdışı beta
 Tarih: 25-07-2014, Saat:23:36
#4
harika diyelimde başka bişey diyelim mi?
ben bu adamı seviyorum yaaw
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Jquery Çakışması Mesaj Editörü Sorunu [Çözüm] Luca 9 3,800 26-01-2016, Saat:05:03
Son Yorum: 3sr4rk3ss27
  Jquery Toggle efekti (Göster/Gizle) batuhanmerci 2 837 28-07-2014, Saat:01:58
Son Yorum: usameavci
  Dosyasız Link Yönlendirme Eklentisi EmreKarakaya 11 2,917 03-05-2012, Saat:21:07
Son Yorum: EmreKarakaya



Konuyu Okuyanlar: 1 Ziyaretçi