Web Sayfalarında Parallax Kullanımı

Merhaba arkadaşlar bugün sizlerle web sayfalarında parallax kullanımını konu olarak işleyeceğiz. Parallax nasıl kullanılır , scroll değişimi ile objeler nasıl hareket ettirilir ve web sayfalarına nasıl güzellikler katılır bunları hep birlikte öğreneceğiz.

Parallax ‘ın türkçe anlamı gözlemleyicinin duruş şekline bağlı olarak bir nesnenin yerinde meydana gelen bağıl değişiklik olarak nitelendiriliyor. Bizim kullanacağımız parallax ise gözlemcinin duruş şekline göre değil de scrollumuzun duruş şekline göre değişiklik gösterecek.

Hemen parallax adında bir klasör oluşturup projemize başlayalım. parallax adlı klasörümüzün içerisinde bulunacak dosyalar ;

  • index.html
    html kodlarımızı yazacağımızı dosyamız
  • main.css
    css kodlarımızı yazacağımız dosyamız
  • jquery-1.7.1.min.js
    jquery eklentimiz
  • jarallax-0.2.js
    jarallax animasyonlarımızı uygulamamızı sağlayacak eklentimiz
  • main.js
    jarallax animasyonları için yazacağımız kodlarımızın bulunacağı dosyamız
  • images klasörü
    bulut1.png , bulut2.png ve tepe.png resimlerimizi bulunacağı klasörümüz

Yukarıdaki eklentilere internet üzerinden ulaşabileceğiniz gibi yazımın sonunda paylaşacağım proje dosyaları arasından da alabilirsiniz. Yine her zamanki gibi kodları ayrı ayrı yazmak ve açıklamak yerine açıklama satırları halinde anlatacağım.

 

index.html

<!DOCTYPE HTML>
<html lang="tr-TR">
<head>
    <title>Paralax Örnekleme</title>
    <meta charset="UTF-8">
    <!-- main.css dosyamızı sayfamıza çağırıyoruz. -->
    <link rel="stylesheet" type="text/css" href="main.css">
    <!-- jquery-1.7.1.min.js dosyamızı sayfamıza çağırıyoruz. -->
    <script src="jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- jarallax-0.2.js dosyamızı sayfamıza çağırıyoruz. -->
    <script src="jarallax-0.2.js" type="text/javascript" charset="utf-8"></script>
    <!-- main.js dosyamızı sayfamıza çağırıyoruz. -->
    <script src="main.js" type="text/javascript" charset="utf-8"></script>
</head>
<!-- body tagımızın onload'ına main.js dosyamızın içindeki init() fonksiyonunuz yazarak
sayfamız yüklendiğinde çalışır hale getiriyoruz -->
<body onload="init()">
    <!-- Altta sabit kalacak tepe görselimizin bulunacağı div -->
    <div id="tepe"></div>
    <!-- Scroll işleminde hareket edecek bulut görselimizin bulunacağı div -->
    <div id="bulut1"></div>
    <!-- Scroll işleminde hareket edecek 2. bulut görselimizin bulunacağı div -->
    <div id="bulut2"></div>
    <!-- Scrollumuzu çıkarmak için kullanacağımız yazımızın bulunacağı div -->
    <div id="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu sapien neque. Nunc cursus eleifend rutrum. Donec hendrerit vulputate nunc eu venenatis. Ut pellentesque, lorem vitae viverra venenatis, dolor lacus blandit lorem, in accumsan est enim id eros. Mauris accumsan, tellus ac laoreet pharetra, eros enim vehicula eros, et bibendum lectus purus nec tortor. Duis imperdiet, neque et molestie mattis, felis justo molestie neque, eget ullamcorper velit turpis ut est. Integer ut pharetra turpis. Duis in ligula sed nunc gravida tempor. Pellentesque auctor risus a tortor suscipit, eget ullamcorper tellus vestibulum.
 
        Suspendisse venenatis, massa a elementum imperdiet, neque dolor mattis purus, sed blandit turpis ipsum quis dui. Fusce elit leo, condimentum in hendrerit ac, consequat sit amet quam. Mauris sagittis nisi id dignissim ultrices. Quisque sit amet cursus velit. Morbi ac congue lectus, a dictum ligula. Nunc semper quis tellus vel rhoncus. Aenean tincidunt mauris in bibendum sollicitudin. Cras ut leo mollis, vestibulum arcu quis, tempus mauris. Maecenas tincidunt commodo egestas. Maecenas rutrum ante ac nulla sodales auctor. Sed nulla sem, tempus eget luctus suscipit, accumsan sed nisl. Aenean a turpis lorem. Suspendisse eu mi sit amet tellus consequat volutpat sed ut urna. Etiam odio erat, vulputate ac felis sed, sollicitudin commodo neque. Morbi blandit metus lectus, non vulputate nisi aliquam eu.
 
        Mauris massa sem, tempus at molestie sagittis, ultricies ut tortor. Aenean sed justo vitae nulla laoreet congue. Morbi pellentesque purus libero, vitae auctor velit condimentum vel. Vestibulum vitae eros rutrum, luctus elit ac, ultrices justo. In posuere porta fermentum. Donec varius, tellus at lobortis tempus, ligula dolor pulvinar ligula, non iaculis nibh mauris et turpis. Duis sed pellentesque nisl. Maecenas non quam a felis varius tempus eu vitae ipsum. Pellentesque in ante vel velit feugiat consectetur.
 
        Ut tincidunt metus lacus, id pretium neque semper sed. Vivamus faucibus lacus orci, tincidunt accumsan sem auctor vitae. Mauris eget elit mi. Donec ultricies enim in commodo blandit. Suspendisse semper dapibus urna, eu commodo urna placerat et. Nulla rhoncus nibh quis turpis pellentesque, eu imperdiet magna vulputate. Phasellus sed nunc eget erat pretium vulputate. Aliquam erat volutpat. Proin interdum facilisis eleifend. Cras tempor tempus dolor quis gravida. Nulla malesuada quis magna nec hendrerit. In sed varius quam, laoreet porta lectus. Quisque facilisis ipsum risus, vel posuere felis luctus sit amet. Donec eget ultricies massa. Quisque vel pulvinar leo.
 
        Donec quis risus lobortis nisl sollicitudin porta. Aliquam cursus orci tristique neque porta, sit amet tristique lacus porta. Curabitur et volutpat odio. Aliquam aliquet erat at elementum convallis. Mauris lacinia, arcu ut aliquam blandit, erat sapien elementum odio, vitae pulvinar nisi nunc porttitor odio. Nunc scelerisque neque eros, quis dapibus est mollis eu. Pellentesque id adipiscing purus. Vestibulum commodo dignissim lectus. Mauris iaculis erat at sapien imperdiet, et pulvinar nisi cursus. Mauris in mauris sed lorem aliquam hendrerit. Pellentesque mi velit, consectetur sit amet pretium eu, suscipit id enim. Curabitur eget libero eget eros rhoncus rutrum sit amet sed ante.
    </div>
</body>
</html>

 

main.css

/* body'mizin arkapanina gokyuzu etkisi icin bir renk veriyoruz */
body{ background:#c4dfe6; }
 
/* text idli divimize yazi stillerimizi veriyoruz bir genislik verip divimizi margin 0 auto ile ortaliyoruz */
#text{
    width:500px;
    font-family:Arial;
    color:#21363b;
    margin:0 auto;
    line-height:21px;
    letter-spacing:1px;
}
 
/*
bulut1 idli divimize position fixed veriyoruz arkaplan resmimiz kadar genislik ve yukseklik degerlerimizi veriyoruz.
left %50 veriyoruz ve marginleft -576 ile genisligin yarisini girerek ortaliyoruz.
background'umuzu images dosyamiz icindeki bulut1.png yapiyoruz.
z-indeximizi -1 yaparak divimizin yazi divinin altinda kalmasini sagliyoruz.
*/
#bulut1{
    position:fixed;
    width:1153px;
    height:276px;
    margin-left:-576px;
    left:50%;
    top:70%;
    background:url(images/bulut1.png) no-repeat;
    z-index:-1;
}
 
/*
bulut2 idli divimize position fixed veriyoruz arkaplan resmimiz kadar genislik ve yukseklik degerlerimizi veriyoruz.
left %50 veriyoruz ve marginleft -570 ile genisligin yarisini girerek ortaliyoruz.
background'umuzu images dosyamiz icindeki bulut2.png yapiyoruz.
z-indeximizi -2 yaparak divimizin yazi ve #bulut1 divilerinin altinda kalmasini sagliyoruz.
*/
#bulut2{
    position:fixed;
    width:1140px;
    height:264px;
    margin-left:-570px;
    left:50%;
    top:55%;
    background:url(images/bulut2.png) no-repeat;
    z-index:-2;
}
 
/*
tepe idli divimize position fixed veriyoruz arkaplan resmimiz kadar genislik ve yukseklik degerlerimizi veriyoruz.
left %50 veriyoruz ve marginleft -590 ile genisligin yarisini girerek ortaliyoruz.
background'umuzu images dosyamiz icindeki tepe.png yapiyoruz.
z-indeximizi 1 yaparak divimizin yazinin, #bulut1 ve #bulut2 divilerinin ustunde kalmasini sagliyoruz.
*/
#tepe{
    position:fixed;
    width:1179px;
    height:187px;
    margin-left:-590px;
    left:50%;
    background:url(images/tepe.png) no-repeat;
    bottom:0;
    z-index:1;
}

 

main.js

//init fonksiyonumuzu oluşturuyoruz.
  init = function(){
    //jarallax eklentimizi kullanmak icin jarallax değişkenimize atıyoruz.
    var jarallax = new Jarallax();
    //jarallax.addAnimation ile #bulut1 ve #bulut2 idli divlerimize efecktimizi veriyoruz.
    //#bulut1 divimize progress ile scrollumuz %0 konumunda iken yukarıdan %70 konumunda olması gerektigini soyluyoruz.
    //ve scrollumuz 100% konumunda iken yukarıdan %10 konumuna gecmesini soyluyoruz.
    jarallax.addAnimation('#bulut1',[{progress:'0%', top:'70%'},{progress:'100%', top:'10%'}]);
    //#bulut2 divimize progress ile scrollumuz %0 konumunda iken yukarıdan %55 konumunda olması gerektigini soyluyoruz.
    //ve scrollumuz 100% konumunda iken yukarıdan %25 konumuna gecmesini soyluyoruz.
    jarallax.addAnimation('#bulut2',[{progress:'0%', top:'55%'},{progress:'100%', top:'25%'}]);
  }<span id="mce_marker" data-mce-type="bookmark"></span>

 

Kodlarımızı yazdıktan sonra projemizin sorunsuz biçimde çalıştığını göreceksiniz. Biz sadece 2 layer ile bulutları hareket ettirdik siz istediğiniz kadar layer’ı üst üste bindirip hareket ettirebilirsiniz. Gerisi sizin hayal gücünüze kalıyor.

Peki ben sadece objelerimi yukarı aşağı mı hareket ettirebileceğim ? Tabi ki hayır biz hep top ile yukarı aşağı bir çalışma yaptık siz top yerine right, bottom, left ve opacity gibi css elemanlarını kullanabilir objelerinizi isteğiniz yere hareket ettirebilirsiniz. Daha ayrıntılı bilgiyi şu adresteki derslerden ve örnek kullanımlardan bulabilirsiniz. Bir sonraki makalede görüşmek üzere.

DEMO
http://www.emrahozgilik.com/ornek/parallax/

İNDİR
http://yadi.sk/d/TMgMRXRpATfd6

  • Cemal Baş

    Paylaşım ve Yazının için Teşekkürler github kullanıyormusunuz ? Kodu oraya ekleseniz daha iyi olur sanırsam.K.gelsni