MyBB Depo Forum

** 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 Uyku

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

Ş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

Emeğine Sağlık Güzel Anlatım Olmuş Süper

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ümseme

harika diyelimde başka bişey diyelim mi?
ben bu adamı seviyorum yaaw

usameavci

Toretto

MelihAtasever

beta