** 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.
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.jsDosyamı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">
<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 );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>Kod:
http://embed.plnkr.co/Bio7aeUqhavepn3NkCTE/previewCss 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>
<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>Kod:
http://embed.plnkr.co/KdW8kT9faX2IaBnfhISb/previewAyrı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
eccepure aldı başını wordpresste gidiyor el atma zamanı geldi mybb içinde bir pureye hadi bakalım 
