Facebook Tarzı Scrollbar Yapımı

Merhaba Arkadaşlar ,

Facebook‘un artık hayatımızın vazgeçilmezi olduğunu hepimiz biliyoruz ” tabi benim için değil:) “Günlük hayatının büyük bir bölümünü orda olmasada sanal dünyada geçiren arkadaşlar var , emin olun 🙂 Sanırsam reel hayat artık kendisini sanal hayata bıraktı. Belkide ben yanlış düşünüyorumdur.:) NE DERSİNİZ ?

Tabi konumuzla ne alakası var diyeceksiniz Ömer hocam. 🙂 Ne yapayım? Burda bir uygulamadan bahsederken biraz hiciv yapalım dedik.:) Neyse asıl konumuza geçelim facebook’ta yeni dönem uygulamalarında bildiğiniz gibi herkesin durumu hakkında bilgi aldığımız “facebook’un sağ tarafında olan ” bil bölüm var. İşte o tarz Yapılmış bir  scroollbar‘ın  düzenlenmesini anlatacağım..

Size vereceğim Rar’lı dosyanın içinde 3  klasör ve 1 adet index.html dosyası bulunmakta. Bu klasörlerden css klasörü içerik düzenleme ile alakalı dosyanın olduğu klasördür. Js klasörü javascript kodlarının olduğu klasörüdür. İmages klasörü  uygulamanın içinde yer alan küçük resimlerin bulunuğu klasördür.

Bizim için önemli olan dosyalar tabikide index.html ve images klasörü içinde yer alan resimlerdir. Onun için ilk olarak resimlerimizi ordaki boyutları göz önünde bulundurarak resimler değiştirilmeli.

İndex.html dosyasını editör programı vasıtasıyla açtığımızda aşağıdaki kodları göreceğiz;

<a target=”_blank” href=”https://www.omerbozalan.com/”> ( burası tıklandığında gidecek  sayfa )
                        <img src=”images/thumbs/1.jpg”/> ( burası ise images klasörünün içinde bulunan scrollbarda yer alan küçük resim)
                        <div>
                            <h3>Draggable Image Boxes Grid</h3> ( scrooll bar başlığı )
                            Fikir kutulari kucuk ve menu ogeleri gibi gosteren bir suruklenebilir izgara sahip olmaktir. Bir kere tiklandiginda, thumbnail Tam boy resmi genisletmek ve menu ogesi kutusunda tam ekran bir icerik alanina genisletmek olacaktir. ( burası ise içerik )
                        </div>
                    </a>(Yukarıdaki alan yani mavi yazı kısmı  1 bölümden  oluşuyor. Artırmak için bu alanı çoğaltmanız yeterlidir.)
<a target=”_blank” href=”www.omerbozalan.com/”>
<img src=”images/thumbs/2.jpg”/>
<div>
<h3>Facebook Zaman Tuneli</h3>
Ana fikir yanal belgenin kaydirma konumuna bagli unsurlar slayt etmektir. Bir sol ve sag tarafina dogru sayfa bolmek, biz onlar ekranlarinda oldugunda merkezine sayfanin “disaridan” gelen unsurlar tasimak istiyorum. Ayrica 3D alaninda ogeleri tasimak icin bu secenegi ekleyecek.
</div>
</a>

Gördüğünüz gibi yukarıdaki kırmizi yazılarla sizlere index.html dosyasındaki kodların ve yerlerinin ne anlama geldiğini anlattık. Kolay gelsin. Anlamadığınız bir yer olursa yorum bölümünden bizlere iletişime geçin…

Anlatım : Ömer BOZALAN

(44)